/*
 Theme Name:   MenschKunst Galerie
 Description:  Neues Galerie-Design (Oktober 2026), zwei Varianten: a "Galerie auf Papier", b "Ausstellung". Zuerst fuers Handy gestaltet.
 Author:       MenschKunst
 Template:     wpartiststheme
 Version:      0.1
*/

/* Farben, Schriften und Abstaende kommen aus dem MenschKunst-Design-System
   (/assets/css/meku-design-system.css, vom Galerie-Plugin geladen).
   Inter liegt wie Newsreader lokal unter /assets/fonts - kein Abruf bei Dritten. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/assets/fonts/Inter-variable.woff2') format('woff2');
}

:root {
	--g-grund: var(--mk-paper, #fafaf8);
	--g-flaeche: var(--mk-surface, #fff);
	--g-tinte: var(--mk-ink, #2c2c2c);
	--g-leise: var(--mk-ink-soft, #666);
	--g-blass: var(--mk-ink-faint, #999);
	--g-linie: var(--mk-line, #e8e4de);
	--g-gold: var(--mk-accent-strong, #96690a);
	--g-gold-hell: var(--mk-accent-soft, #f1e7cf);
	--g-titel: 'Newsreader', Georgia, 'Book Antiqua', serif;
	--g-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--g-rand: 20px;            /* Seitenrand auf dem Handy */
	--g-max: 1240px;
	--g-luft: 48px;            /* Abstand zwischen Abschnitten */
}
@media (min-width: 768px) { :root { --g-rand: 32px; --g-luft: 72px; } }
@media (min-width: 1200px) { :root { --g-rand: 48px; --g-luft: 96px; } }

/* Variante b: weisser Raum, schwarze Schrift, Gold nur als Hauch */
.g-variante-b {
	--g-grund: #ffffff;
	--g-linie: #ececec;
}

/* ---------- Grundlagen (ueberschreibt Bootstrap und das alte Theme) ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
	background: var(--g-grund) !important;
	color: var(--g-tinte);
	font-family: var(--g-text);
	font-size: 16px;
	line-height: 1.6;
	padding-top: 0 !important;
}
#page.blue-gradient, .blue-gradient { background: transparent !important; }
a { color: var(--g-tinte); text-decoration-color: var(--g-linie); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--g-gold); }
h1, h2, h3, h4 { font-family: var(--g-titel); font-weight: 500; color: var(--g-tinte); letter-spacing: -0.005em; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--g-gold); outline-offset: 2px; }

.g-wrap { max-width: var(--g-max); margin: 0 auto; padding: 0 var(--g-rand); }
.g-skip { position: absolute; left: -9999px; }
.g-skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 8px 12px; }

.g-kicker {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--g-blass);
}
.g-kicker a { color: inherit; text-decoration: none; }
.g-lead { font-size: 18px; line-height: 1.5; color: var(--g-leise); margin: 0 0 20px; }
.g-prosa { color: var(--g-leise); }
.g-prosa p { margin: 0 0 14px; }
.g-prosa em { color: var(--g-blass); font-size: 0.92em; }

/* ---------- Kopf ---------- */
.g-kopf {
	background: var(--g-grund);
	border-bottom: 1px solid var(--g-linie);
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .g-kopf { top: 46px; }
@media (min-width: 783px) { .admin-bar .g-kopf { top: 32px; } }
.g-kopf__innen {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 14px;
	padding-bottom: 10px;
}
.g-marke__name {
	display: block;
	font-family: var(--g-titel);
	font-size: 24px;
	line-height: 1.15;
	color: var(--g-tinte);
	text-decoration: none;
}
.g-marke__techniken {
	display: block;
	margin-top: 4px;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--g-blass);
}
.g-nav {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.g-nav::-webkit-scrollbar { display: none; }
.g-nav a {
	flex: 0 0 auto;
	padding: 6px 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--g-leise);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.g-nav a:hover, .g-nav a[aria-current="page"] { color: var(--g-tinte); border-bottom-color: var(--g-gold); }

@media (min-width: 900px) {
	.g-kopf__innen { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-top: 22px; padding-bottom: 16px; }
	.g-marke__name { font-size: 28px; }
	.g-nav { gap: 28px; }
}

/* Variante b: Name mittig, Menue darunter mittig */
.g-variante-b .g-kopf { border-bottom: 0; }
.g-variante-b .g-kopf__innen { align-items: center; text-align: center; }
@media (min-width: 900px) {
	.g-variante-b .g-kopf__innen { flex-direction: column; align-items: center; gap: 12px; }
}
.g-variante-b .g-nav { justify-content: center; }

/* Techniken unter dem Namen im Kopf - auf allen Seiten, auch auf dem Handy */

/* ---------- Kuenstler (Startseite) ---------- */
.g-person { padding: 32px 0 var(--g-luft); }
.g-person__raster { display: grid; gap: 24px; }
.g-person__bild { margin: 0; }
.g-person__bild img {
	display: block;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--g-flaeche);
}
.g-person__name { font-size: 38px; line-height: 1.05; margin: 0 0 14px; }
.g-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 18px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.g-links span { color: var(--g-linie); }
.g-links a { color: var(--g-gold); text-decoration: none; }
.g-links a:hover { text-decoration: underline; }
.g-person__vita { margin: 16px 0 0; }

/* Handy: kleines Portraet neben dem Namen, nur der erste Absatz - damit die Werke schnell kommen */
@media (max-width: 767px) {
	.g-person { padding-bottom: 40px; }
	.g-person__raster { grid-template-columns: 84px 1fr; gap: 0 16px; align-items: center; }
	.g-person__text { display: contents; }
	.g-person__bild { grid-row: 1 / span 2; }
	.g-person__bild img { width: 84px; height: 84px; }
	.g-person .g-kicker { grid-column: 2; align-self: end; margin-bottom: 4px; }
	.g-person__name { grid-column: 2; align-self: start; font-size: 30px; margin: 0; }
	.g-person .g-lead, .g-person__prosa, .g-person__vita, .g-links { grid-column: 1 / -1; }
	.g-person .g-lead { margin-top: 20px; }
	.g-variante-b .g-person__name { font-size: 30px; }
	.g-variante-b .g-person .g-kicker { margin-top: 0; }
	/* Variante a: keine Zeile ueber dem Namen - Portraet und Name mittig nebeneinander */
	.g-variante-a .g-person__bild { grid-row: 1; }
	.g-variante-a .g-person__name { align-self: center; }
	.g-variante-b .g-person__prosa { margin-top: 20px; }
}
.g-variante-b .g-werke { padding-top: 28px; }
@media (min-width: 768px) {
	.g-person { padding-top: 56px; }
	.g-person__raster { grid-template-columns: minmax(220px, 4fr) 7fr; gap: 48px; align-items: start; }
	.g-person__name { font-size: 52px; }
}

/* Variante b: Buehne mit grossem Namen, Kuenstler erst nach den Werken */
.g-buehne { padding: 40px 0 8px; text-align: center; }
.g-buehne__name { font-size: 44px; line-height: 1.02; margin: 0 0 12px; }
.g-buehne__teaser { max-width: 640px; margin: 0 auto; color: var(--g-leise); font-size: 17px; }
@media (min-width: 768px) {
	.g-buehne { padding: 72px 0 16px; }
	.g-buehne__name { font-size: 72px; }
	.g-buehne__teaser { font-size: 19px; }
}
.g-variante-b .g-person { border-top: 1px solid var(--g-linie); margin-top: var(--g-luft); padding-top: var(--g-luft); }
.g-variante-b .g-person__name { font-size: 34px; }
@media (min-width: 768px) { .g-variante-b .g-person__name { font-size: 42px; } }

/* ---------- Abschnitt-Kopf, Chips ---------- */
.g-werke { padding-bottom: var(--g-luft); }
.g-werke--seite { padding-top: 32px; }
@media (min-width: 768px) { .g-werke--seite { padding-top: 56px; } }
.g-abschnitt {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--g-linie);
	padding-bottom: 10px;
	margin-bottom: 18px;
}
.g-abschnitt__titel { font-size: 26px; margin: 0; }
@media (min-width: 768px) { .g-abschnitt__titel { font-size: 32px; } }
.g-mehr {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--g-gold);
	text-decoration: none;
	white-space: nowrap;
}
.g-mehr--zahl { color: var(--g-blass); }

.g-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	margin: 0 calc(-1 * var(--g-rand)) 22px;
	padding: 0 var(--g-rand) 2px;
}
.g-chips::-webkit-scrollbar { display: none; }
/* Handy: umbrechen statt seitlich wischen - alle Techniken auf einen Blick */
@media (max-width: 767px) {
	.g-chips { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; gap: 6px; }
	.g-chip { min-height: 32px; padding: 0 10px; font-size: 12px; }
	.g-chip span { font-size: 11px; }
}
@media (min-width: 768px) { .g-chips { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; } }
.g-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--g-linie);
	background: var(--g-flaeche);
	font-size: 13px;
	color: var(--g-leise);
	text-decoration: none;
}
.g-chip span { color: var(--g-blass); font-size: 12px; }
.g-chip:hover { border-color: var(--g-gold); color: var(--g-tinte); }
.g-chip.ist-aktiv { border-color: var(--g-tinte); color: var(--g-tinte); }
.g-chip--klein { min-height: 30px; font-size: 12px; padding: 0 10px; }

/* ---------- Werk-Karten ---------- */
.g-raster { display: grid; grid-template-columns: 1fr; gap: 32px 20px; }
@media (min-width: 560px) { .g-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .g-raster { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; } }
@media (min-width: 1024px) { .g-raster--vier { grid-template-columns: repeat(4, 1fr); } }
/* "Mehr von ..." auf dem Handy: zwei kleine Spalten statt vier grosser Bilder untereinander */
@media (max-width: 559px) {
	.g-raster--vier { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
	.g-raster--vier .g-karte__titel { font-size: 16px; margin-top: 8px; }
	.g-raster--vier .g-karte__meta { display: none; }
}

.g-karte { margin: 0; }
.g-karte__link { display: block; text-decoration: none; color: inherit; }
.g-karte__bild { display: block; overflow: hidden; background: var(--g-flaeche); }
.g-karte__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.g-karte__link:hover .g-karte__bild img { transform: scale(1.03); }
.g-karte__titel {
	display: block;
	margin-top: 12px;
	font-family: var(--g-titel);
	font-size: 20px;
	line-height: 1.25;
	color: var(--g-tinte);
}
.g-karte__meta { margin: 4px 0 0; font-size: 13px; color: var(--g-leise); }
.g-karte__preis { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--g-tinte); }
.g-preis--privatbesitz, .g-preis--ohne { font-weight: 400 !important; color: var(--g-blass) !important; }

/* Variante b: Mauerwerk - jedes Bild in seinem echten Format, kein Zuschnitt */
.g-variante-b .g-raster:not(.g-raster--vier) {
	display: block;
	column-count: 2;
	column-gap: 14px;
}
@media (min-width: 1024px) { .g-variante-b .g-raster:not(.g-raster--vier) { column-count: 3; column-gap: 28px; } }
.g-variante-b .g-raster:not(.g-raster--vier) .g-karte { break-inside: avoid; margin-bottom: 26px; }
.g-variante-b .g-raster:not(.g-raster--vier) .g-karte__bild img { aspect-ratio: auto; }
.g-variante-b .g-karte__titel { font-family: var(--g-text); font-size: 14px; font-weight: 600; margin-top: 10px; }
.g-variante-b .g-karte__meta, .g-variante-b .g-karte__preis { font-size: 12px; }
@media (max-width: 559px) {
	/* Mauerwerk auf dem Handy: zwei schmale Spalten, Angaben knapp */
	.g-variante-b .g-karte__meta { display: none; }
}

/* ---------- Werkseite ---------- */
.g-werk { padding-top: 16px; }
.g-werk__raster { display: grid; gap: 24px; }
.g-werk__bilder { margin: 0 calc(-1 * var(--g-rand)); }
.g-werk__buehne { background: var(--g-flaeche); padding: 0; }
.g-werk__buehne a { display: block; cursor: zoom-in; }
.g-werk__buehne img {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-height: 78vh;
	object-fit: contain;
}
.g-werk__ansichten .row { margin: 10px 0 0 !important; }
.g-werk__ansichten .col { padding: 0 var(--g-rand) !important; }
.g-werk__ansichten .img-thumbnail { border: 1px solid var(--g-linie); border-radius: 0; padding: 2px; }
.g-werk__ansichten .meku-thumb-active .img-thumbnail { border-color: var(--g-gold); }

.g-werk__titel { font-size: 34px; line-height: 1.1; margin: 0 0 18px; }
.g-angaben { margin: 0 0 20px; border-top: 1px solid var(--g-linie); }
.g-angaben div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--g-linie); }
.g-angaben dt { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-blass); padding-top: 2px; }
.g-angaben dd { margin: 0; font-size: 15px; }
.g-werk__preis { margin: 0 0 18px; font-family: var(--g-titel); font-size: 26px; }
.g-werk__preislabel { display: block; font-family: var(--g-text); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-blass); margin-bottom: 2px; }
.g-werk__preis.g-preis--privatbesitz, .g-werk__preis.g-preis--ohne { font-family: var(--g-text); font-size: 15px; }
.g-werk__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.g-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--g-gold);
	background: var(--g-gold);
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}
.g-knopf:hover { background: var(--mk-accent-hover, #9a6f08); }
.g-knopf--leise { background: transparent; color: var(--g-gold) !important; }
.g-knopf--leise:hover { background: var(--g-gold-hell); }
@media (max-width: 559px) { .g-werk__aktionen .g-knopf { flex: 1 1 100%; } }
.g-werk__beschreibung { margin-bottom: 18px; }
.g-schlagworte { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.g-blaettern {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 40px;
	margin-bottom: var(--g-luft);
	padding-top: 18px;
	padding-bottom: 18px;
	border-top: 1px solid var(--g-linie);
	border-bottom: 1px solid var(--g-linie);
}
.g-blaettern a { text-decoration: none; font-family: var(--g-titel); font-size: 18px; line-height: 1.25; }
.g-blaettern span { display: block; font-family: var(--g-text); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-blass); margin-bottom: 4px; }
.g-blaettern__nach { text-align: right; grid-column: 2; }

@media (min-width: 900px) {
	.g-werk { padding-top: 40px; }
	.g-werk__raster { grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
	.g-werk__bilder { margin: 0; }
	.g-werk__buehne { padding: 28px; }
	.g-werk__ansichten .col { padding: 0 !important; }
	.g-werk__info { position: sticky; top: 120px; }
	.g-werk__titel { font-size: 42px; }
}

/* Variante b: Bild ueber die ganze Breite, Angaben darunter in schmaler Spalte */
.g-variante-b .g-werk__buehne { background: transparent; }
@media (min-width: 900px) {
	.g-variante-b .g-werk__raster { grid-template-columns: 1fr; max-width: 980px; gap: 40px; }
	.g-variante-b .g-werk__buehne { padding: 0; }
	.g-variante-b .g-werk__buehne img { max-height: 84vh; }
	.g-variante-b .g-werk__info { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
	.g-variante-b .g-werk__info > .g-kicker,
	.g-variante-b .g-werk__info > .g-werk__titel { grid-column: 1 / -1; }
	.g-variante-b .g-werk__beschreibung, .g-variante-b .g-schlagworte { grid-column: 2; grid-row: 3 / span 3; }
	.g-variante-b .g-werk__titel { text-align: left; }
}

/* ---------- Fuss ---------- */
.g-fuss { border-top: 1px solid var(--g-linie); padding: 32px 0 40px; font-size: 13px; color: var(--g-blass); text-align: center; }
.g-fuss p, .g-fuss__links { margin: 0 0 8px; }
.g-fuss a { color: var(--g-leise); }
.g-fuss__name { color: var(--g-leise); }
.g-fuss .meku-betreiber { margin-top: 10px; font-size: 12px; color: var(--g-blass); }
.g-fuss__plattform { margin-top: 16px !important; font-size: 12px; }
/* Platz fuer die Leiste der Cookie-Einwilligung auf dem Handy */
@media (max-width: 559px) { .g-fuss { padding-bottom: 64px; } }

/* ---------- Seiten (Vita, Kontakt, Impressum, Datenschutz) ---------- */
.g-seite { padding: 32px 0 var(--g-luft); }
.g-seite__wrap { max-width: calc(760px + 2 * var(--g-rand)); }
.g-seite__titel { font-size: 36px; line-height: 1.1; margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--g-linie); }
.g-seite__bild { margin: 0 0 24px; }
.g-seite__bild img { display: block; width: 100%; height: auto; }
.g-seite__inhalt { font-size: 16px; line-height: 1.7; }
.g-seite__inhalt h2, .g-seite__inhalt h3 { font-size: 24px; margin: 36px 0 12px; color: var(--g-tinte); }
.g-seite__inhalt h4 { font-size: 19px; margin: 28px 0 8px; color: var(--g-tinte); }
.g-seite__inhalt ul { padding-left: 1.1em; }
.g-seite__inhalt li { margin-bottom: 4px; }
.g-seite__inhalt img { max-width: 100%; height: auto; }
@media (min-width: 768px) {
	.g-seite { padding-top: 56px; }
	.g-seite__titel { font-size: 46px; }
}

/* Formulare (Kontakt per Toolset/CF7, Gaestebuch) */
.g-seite input[type="text"], .g-seite input[type="email"], .g-seite input[type="url"], .g-seite input[type="tel"], .g-seite textarea, .g-seite select {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--g-linie);
	border-radius: 0;
	background: var(--g-flaeche);
	font: inherit;
	font-size: 16px; /* kein Zoom auf dem iPhone */
	color: var(--g-tinte);
}
.g-seite textarea { min-height: 160px; }
.g-seite input:focus, .g-seite textarea:focus { outline: 2px solid var(--g-gold); outline-offset: 0; border-color: var(--g-gold); }
.g-seite label { font-size: 13px; font-weight: 600; color: var(--g-tinte); }
.g-seite input[type="submit"], .g-seite button[type="submit"], .g-seite .btn {
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--g-gold);
	border-radius: 0;
	background: var(--g-gold);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}
.g-seite input[type="checkbox"], .g-seite input[type="radio"] { width: auto; min-height: 0; accent-color: var(--g-gold); }

/* Kontaktformular (CMB2 im Frontend): Bezeichnung ueber dem Feld, volle Breite */
.g-seite .cmb2-wrap, .g-seite .cmb2-metabox { margin: 0; }
.g-seite .cmb2-wrap .cmb-row { display: block; margin: 0; padding: 0 0 22px; border: 0; }
.g-seite .cmb2-wrap .cmb-th { float: none; width: auto; padding: 0 0 6px; }
.g-seite .cmb2-wrap .cmb-td { float: none; width: auto; padding: 0; }
.g-seite .cmb2-wrap .cmb-th label { font-size: 13px; }
.g-seite .cmb2-wrap input.regular-text, .g-seite .cmb2-wrap input[type="text"], .g-seite .cmb2-wrap input[type="email"], .g-seite .cmb2-wrap textarea { width: 100% !important; }
.g-seite .cmb2-radio-list, .g-seite .cmb2-checkbox-list { margin: 0; padding: 0; list-style: none; }
.g-seite .cmb2-radio-list li { display: inline-flex; align-items: center; gap: 8px; margin: 0 18px 8px 0; }
.g-seite .cmb2-radio-list li label { font-weight: 400; color: var(--g-leise); font-size: 15px; }
.g-seite .cmb2-metabox-description { margin: 6px 0 0; font-size: 13px; font-style: normal; color: var(--g-blass); }
.g-seite .cmb-type-checkbox .cmb-td { display: flex; gap: 10px; align-items: flex-start; }
.g-seite .cmb-type-checkbox label, .g-seite .cmb-type-checkbox .cmb2-metabox-description { font-weight: 400; font-size: 14px; color: var(--g-leise); margin: 0; }
.g-seite .cmb-type-checkbox .cmb-th label { font-weight: 600; font-size: 13px; color: var(--g-tinte); }
@media (max-width: 559px) { .g-seite .cmb2-radio-list li { display: flex; margin-right: 0; } }

/* Gaestebuch */
.g-gaestebuch__schreiben { margin: 0 0 32px; }
.g-eintraege { margin-top: 8px; }
.g-eintraege__titel { font-size: 24px; margin: 32px 0 16px; }
.g-eintraege__liste, .g-eintraege__liste .children { list-style: none; margin: 0; padding: 0; }
.g-eintraege__liste .children { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--g-linie); }
.g-eintrag__inhalt { padding: 18px 0; border-bottom: 1px solid var(--g-linie); }
.g-eintraege__liste .children .g-eintrag__inhalt { border-bottom: 0; padding-bottom: 6px; }
.g-eintrag__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.g-eintrag__name { font-family: var(--g-titel); font-size: 19px; color: var(--g-tinte); }
.g-eintrag__datum { font-size: 12px; color: var(--g-blass); }
.g-eintrag__text { color: var(--g-leise); }
.g-eintrag__text p { margin: 0 0 8px; }
.g-eintrag__wartet { font-size: 13px; color: var(--g-gold); margin: 0 0 6px; }
.g-eintrag__aktionen { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.g-eintrag__aktionen a { color: var(--g-gold); text-decoration: none; }
.comment-respond { margin-top: 24px; padding: 24px; background: var(--g-flaeche); border: 1px solid var(--g-linie); }
.comment-respond .g-eintraege__titel { margin-top: 0; }
.comment-respond p { margin: 0 0 16px; }
.comment-respond label { display: block; margin-bottom: 6px; }
.comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.comment-form-cookies-consent label { font-weight: 400; color: var(--g-leise); margin: 0; }
.g-formular__hinweis, .logged-in-as { font-size: 13px; color: var(--g-blass); }
#cancel-comment-reply-link { margin-left: 12px; font-family: var(--g-text); font-size: 12px; color: var(--g-gold); }

/* ---------- Uebrige Seiten im alten Aufbau (falls noch eine eigene Vorlage greift) ---------- */
.g-inhalt > .wrapper, .g-inhalt #single-wrapper, .g-inhalt .site-main { padding-top: 24px !important; margin-top: 0 !important; }
.g-inhalt .container { max-width: var(--g-max); padding-left: var(--g-rand); padding-right: var(--g-rand); }
.g-inhalt .entry-title, .g-inhalt .page-title { font-family: var(--g-titel); font-size: 34px; font-weight: 500; margin: 8px 0 20px; }
.g-inhalt .shadow-lg, .g-inhalt .shadow { box-shadow: none !important; }
.g-inhalt .entry-content { color: var(--g-leise); }
.g-inhalt .entry-content h3 { font-size: 22px; margin-top: 28px; }
.g-inhalt .btn-primary, .g-inhalt .btn-success { background: var(--g-gold) !important; border-color: var(--g-gold) !important; border-radius: 0; }
.g-inhalt .form-control { border-radius: 0; border-color: var(--g-linie); }

/* ---------- Umschalter fuer Admins (nur zum Vergleichen) ---------- */
.g-umschalter {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 9999;
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 6px 8px;
	background: #2c2c2c;
	color: #fff;
	font: 600 11px/1 var(--g-text);
	letter-spacing: 0.06em;
	box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.g-umschalter a { color: #fff; text-decoration: none; padding: 5px 8px; border: 1px solid #555; }
.g-umschalter a.ist-aktiv { background: #fff; color: #2c2c2c; }

/* ---------- Seiten-Navigation (Alle Werke) ---------- */
.g-seiten { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; }
.g-seiten .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--g-linie); background: var(--g-flaeche);
	font-size: 14px; color: var(--g-tinte); text-decoration: none;
}
.g-seiten .page-numbers.current { border-color: var(--g-tinte); font-weight: 600; }
.g-seiten .page-numbers.dots { border: 0; background: none; min-width: 20px; }
.g-seiten a.page-numbers:hover { border-color: var(--g-gold); color: var(--g-gold); }

/* ---------- Weiterlesen (lange Kuenstlertexte) ---------- */
.g-weiter summary {
	display: inline-block;
	margin: 4px 0 8px;
	cursor: pointer;
	list-style: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--g-gold);
}
.g-weiter summary::-webkit-details-marker { display: none; }
.g-weiter summary::after { content: " ↓"; }
.g-weiter[open] summary { display: none; }

/* Lange Kuenstlernamen: im Kopf auf dem Handy kleiner, damit er einzeilig bleibt */
@media (max-width: 899px) {
	.g-marke__name--lang { font-size: 18px; }
}
@media (max-width: 767px) {
	.g-person__name { overflow-wrap: anywhere; }
}

/* ---------- WordPress-Ausrichtung in Texten (Bilder links/rechts/mittig) ---------- */
.g-prosa::after { content: ""; display: table; clear: both; }
.g-prosa img { max-width: 100%; height: auto; }
.g-prosa .alignright { float: right; margin: 4px 0 16px 24px; }
.g-prosa .alignleft { float: left; margin: 4px 24px 16px 0; }
.g-prosa .aligncenter { display: block; margin: 8px auto 16px; float: none; }
.g-prosa .wp-caption { max-width: 100%; }
.g-prosa .wp-caption-text { font-size: 13px; color: var(--g-blass); margin-top: 4px; }
@media (max-width: 559px) {
	/* Handy: Bild kleiner, Text fliesst daneben */
	.g-prosa .alignright, .g-prosa .alignleft { max-width: 45%; }
	.g-prosa .alignright { margin-left: 14px; }
	.g-prosa .alignleft { margin-right: 14px; }
}

/* ---------- PLUS: Titelbild als Banner (wie Profil-Banner bei Facebook oder X) ---------- */
/* Ueberall dasselbe flache Format 3:1 - der Name ist auf dem Handy sofort zu sehen,
   und die Vorschau im Backend stimmt fuer Laptop und Handy. */
.g-titelbild { margin: 0; }
.g-titelbild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 1;
	max-height: 520px;    /* sehr breite Bildschirme */
	object-fit: cover;    /* Ausschnitt per object-position (wichtigste Stelle, vom Kuenstler gewaehlt) */
	background: var(--g-flaeche);
}
.g-titelbild figcaption {
	margin-top: 8px;
	text-align: right;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--g-blass);
}
.g-titelbild figcaption a { color: inherit; text-decoration: none; }
.g-titelbild figcaption a::after { content: " →"; } /* nur bei Werken */
.g-titelbild figcaption a:hover { color: var(--g-gold); }
.g-titelbild + .g-person { padding-top: 40px; }
.g-titelbild + .g-buehne { padding-top: 32px; }

/* Handy: Portraet ragt wie ein Profilbild ins Banner, Name direkt daneben */
@media (max-width: 767px) {
	.g-titelbild + .g-person { padding-top: 0; }
	.g-titelbild figcaption { min-height: 18px; margin-top: 6px; }
	.g-titelbild + .g-person .g-person__bild img {
		position: relative;
		margin-top: -54px;
		border: 3px solid var(--g-grund);
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
	}
	.g-titelbild + .g-person .g-person__raster { align-items: end; }
	.g-titelbild + .g-person .g-person__name { align-self: end; padding-bottom: 4px; }
}

/* Trenner zwischen eigenen Kategorien und Techniken in der Filterleiste */
.g-chips__trenner { flex: 0 0 auto; align-self: stretch; width: 1px; margin: 4px 6px; background: var(--g-linie); }

/* Viele Filter: auf dem Handy Auswahlliste statt Knoepfen */
.g-filterwahl { display: none; }
@media (max-width: 767px) {
	.g-chips--viele { display: none; }
	.g-filterwahl { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
	.g-filterwahl span { flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-blass); }
	.g-filterwahl select {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 44px;
		padding: 0 36px 0 12px;
		border: 1px solid var(--g-linie);
		border-radius: 0;
		background: var(--g-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
		-webkit-appearance: none;
		appearance: none;
		font: inherit;
		font-size: 16px;
		color: var(--g-tinte);
	}
}

/* ---------- PLUS: Vollbild-Diashow ---------- */
.g-diashow-knopf {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--g-gold);
	background: transparent;
	color: var(--g-gold);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}
.g-diashow-knopf:hover { background: var(--g-gold); color: #fff; }
.g-diashow-knopf span { font-size: 9px; }
.g-diashow-knopf:disabled { opacity: 0.5; cursor: wait; }

html.g-dia-offen, html.g-dia-offen body { overflow: hidden; }
.g-dia {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	flex-direction: column;
	background: #121212;
	color: #eee;
	font-family: var(--g-text);
}
.g-dia.ist-offen { display: flex; }
.g-dia__oben { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0 16px; }
.g-dia__zahl { margin-right: auto; font-size: 12px; letter-spacing: 0.1em; color: #999; }
.g-dia__knopf {
	width: 44px; height: 44px;
	border: 0; background: transparent; color: #eee;
	font-size: 18px; cursor: pointer;
}
.g-dia__knopf:hover, .g-dia__pfeil:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.g-dia__buehne { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 16px; }
.g-dia__bild { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity 0.25s ease; }
.g-dia__bild.ist-neu { opacity: 0.25; }
.g-dia__pfeil {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 52px; height: 72px;
	border: 0; background: transparent; color: #ccc;
	font-size: 44px; line-height: 1; cursor: pointer;
}
.g-dia__pfeil--vor { left: 4px; }
.g-dia__pfeil--nach { right: 4px; }
.g-dia__unten { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 12px 16px 18px; border-top: 1px solid #2a2a2a; }
.g-dia__unten p { margin: 0; }
.g-dia__titel { font-family: var(--g-titel); font-size: 20px; color: #fff; }
.g-dia__meta { font-size: 13px; color: #999; margin-top: 2px !important; }
.g-dia__rechts { text-align: right; flex: 0 0 auto; }
.g-dia__preis { font-size: 14px; font-weight: 600; color: #fff; }
.g-dia__link { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid #777; }
.g-dia__link::after { content: " →"; }
/* Handy: Pfeile ausblenden - wischen; Angaben untereinander */
@media (max-width: 767px) {
	.g-dia__pfeil { display: none; }
	.g-dia__buehne { padding: 8px 0; }
	.g-dia__unten { flex-direction: column; align-items: flex-start; gap: 8px; }
	.g-dia__rechts { text-align: left; display: flex; gap: 16px; align-items: baseline; }
}
.g-dia__tipp { display: none; }
@media (max-width: 767px) {
	.g-dia__tipp { display: block; position: absolute; left: 0; right: 0; top: 18px; text-align: center; font-size: 12px; color: #bbb; pointer-events: none; transition: opacity 0.6s ease; }
	.g-dia__tipp.ist-weg { opacity: 0; }
}

/* ---------- PLUS: Werke in Kapiteln ---------- */
.g-kapitel { padding: 8px 0 40px; }
.g-kapitel + .g-kapitel { border-top: 1px solid var(--g-linie); padding-top: 32px; }
.g-kapitel__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
.g-kapitel__titel { margin: 0; font-size: 26px; line-height: 1.15; }
.g-kapitel__titel a { text-decoration: none; color: inherit; }
.g-kapitel__titel a:hover { color: var(--g-gold); }
.g-kapitel__zahl { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-blass); }
.g-kapitel__kopf .g-diashow-knopf { margin-left: auto; }
.g-kapitel__text { max-width: 720px; margin-bottom: 20px; }
.g-kapitel__alle { margin: 18px 0 0; text-align: right; }
@media (min-width: 768px) { .g-kapitel__titel { font-size: 30px; } .g-kapitel { padding-bottom: 56px; } }
/* Einleitung oben auf der Kategorieseite */
.g-einleitung { max-width: 760px; margin: 0 0 24px; font-size: 17px; }

/* ---------- PLUS: dunkler Grundton (Hintergrund "Dunkel" oder Umschalter) ---------- */
/* Tiefes Anthrazit statt Schwarz, warmes Hellgrau als Schrift. Die Werke bleiben unveraendert -
   kein Abdunkeln, kein Filter (Ashe hatte die Bilder im Dunkelmodus verfaelscht). */
:root[data-ton="dunkel"],
:root[data-ton="dunkel"] .g-variante-b {
	--g-grund: #171716;
	--g-flaeche: #201f1e;
	--g-tinte: #ecebe8;
	--g-leise: #b9b7b2;
	--g-blass: #8d8b86;
	--g-linie: #33312e;
	color-scheme: dark;
}
:root[data-ton="dunkel"] .g-knopf,
:root[data-ton="dunkel"] .g-seite input[type="submit"],
:root[data-ton="dunkel"] .g-seite button[type="submit"],
:root[data-ton="dunkel"] .g-diashow-knopf:hover { color: #171716 !important; }
:root[data-ton="dunkel"] .g-knopf--leise { color: var(--g-gold) !important; }
:root[data-ton="dunkel"] .g-knopf--leise:hover { background: var(--g-gold-hell); }
:root[data-ton="dunkel"] .g-titelbild + .g-person .g-person__bild img { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
:root[data-ton="dunkel"] .g-skip:focus { background: var(--g-flaeche); }
/* Texte, die Kuenstler im Editor mit dunkler Schriftfarbe versehen haben, bleiben lesbar */
:root[data-ton="dunkel"] .g-prosa [style*="color: #000"],
:root[data-ton="dunkel"] .g-prosa [style*="color: rgb(0, 0, 0)"] { color: var(--g-tinte) !important; }
html[data-ton] body { transition: background-color 0.25s ease, color 0.25s ease; }

/* Umschalter-Knopf im Kopf */
.g-kopf__innen { position: relative; }
.g-ton-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--g-linie);
	border-radius: 50%;
	background: transparent;
	color: var(--g-leise);
	cursor: pointer;
}
.g-ton-knopf:hover { color: var(--g-tinte); border-color: var(--g-gold); }
.g-ton-knopf__sonne { display: none; }
:root[data-ton="dunkel"] .g-ton-knopf__mond { display: none; }
:root[data-ton="dunkel"] .g-ton-knopf__sonne { display: block; }
@media (max-width: 899px) {
	.g-ton-knopf { position: absolute; top: 12px; right: var(--g-rand); }
	.g-marke { padding-right: 52px; }
}
@media (min-width: 900px) {
	.g-ton-knopf { margin-left: 8px; align-self: center; }
	.g-variante-b .g-ton-knopf { position: absolute; top: 22px; right: var(--g-rand); }
}
@media (min-width: 900px) { .g-variante-a .g-nav { margin-left: auto; } }

/* ---------- Basic (Stufe 1/2): schmale MenschKunst-Zeile, kompakte Vorstellung ---------- */
.g-plattform {
	margin: 0;
	padding: 6px var(--g-rand);
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--g-blass);
	background: var(--g-flaeche);
	border-bottom: 1px solid var(--g-linie);
}
.g-plattform a { color: var(--g-leise); text-decoration: none; }
.g-plattform a:hover { color: var(--g-gold); }
/* Kompakt: kleines Portraet neben dem Namen - auch am Laptop */
@media (min-width: 768px) {
	.g-person--kompakt { padding-top: 40px; padding-bottom: 48px; }
	.g-person--kompakt .g-person__raster { grid-template-columns: 120px 1fr; gap: 0 28px; align-items: start; }
	.g-person--kompakt .g-person__bild img { width: 120px; height: 120px; }
	.g-person--kompakt .g-person__name { font-size: 40px; }
	.g-person--kompakt .g-person__prosa { max-width: 720px; }
}
/* Ohne Untertitel: Abstand zwischen Name und Text */
.g-person__name + .g-person__prosa { margin-top: 18px; }

/* ---------- Blog ("Aktuelles") ---------- */
.g-beitrag { display: grid; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--g-linie); }
.g-beitrag__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.g-beitrag__datum { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-blass); }
.g-beitrag__titel { font-size: 24px; margin: 4px 0 8px; }
.g-beitrag__titel a { text-decoration: none; color: inherit; }
.g-beitrag__anfang { margin: 0 0 10px; color: var(--g-leise); }
@media (min-width: 768px) { .g-beitrag:has(.g-beitrag__bild) { grid-template-columns: 220px 1fr; gap: 28px; } }
