/* =============================================================================
   Komponentenbibliothek Heimat-Maler
   =============================================================================
   Jede Seite komponiert aus diesen Bausteinen. Neue Komponenten kommen nur mit
   Eintrag in docs/design-tokens.md §3 dazu.
   Alle Werte kommen aus tokens.css — hier steht kein einziges Farbliteral.
   ============================================================================= */

/* --- Grundlagen ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--hm-grund);
	color: var(--hm-text);
	font-family: var(--hm-font-text);
	font-size: var(--hm-size-basis);
	line-height: var(--hm-zeilenhoehe);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--hm-font-anzeige);
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	text-wrap: balance;
	margin: 0 0 var(--hm-abstand-4);
}

h1 { font-size: var(--hm-size-titel); }
h2 { font-size: var(--hm-size-gross); }

p { margin: 0 0 var(--hm-abstand-4); max-width: var(--hm-breite-text); }

a { color: var(--hm-akzent); }
a:hover { color: var(--hm-akzent-hover); }

/* Fokus muss immer sichtbar sein — Tastaturbedienung ist kein Sonderfall. */
:focus-visible {
	outline: 3px solid var(--hm-akzent);
	outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

.hm-inhalt {
	max-width: var(--hm-breite-inhalt);
	margin: 0 auto;
	padding: 0 var(--hm-abstand-5);
}

.hm-nur-vorlesen {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Knopf --------------------------------------------------------------- */

.hm-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hm-abstand-2);
	min-height: var(--hm-ziel-min-gross);
	padding: var(--hm-abstand-3) var(--hm-abstand-5);
	border: 1px solid var(--hm-aktion);
	border-radius: var(--hm-radius);
	background: var(--hm-aktion);
	color: var(--hm-text-invers);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.hm-knopf:hover { background: var(--hm-aktion-hover); border-color: var(--hm-aktion-hover); color: var(--hm-text-invers); }

.hm-knopf--leer {
	background: transparent;
	color: var(--hm-akzent);
	border-color: var(--hm-linie);
}

.hm-knopf--leer:hover { background: var(--hm-akzent-leise); color: var(--hm-akzent-hover); }

/* --- Werkkarte ----------------------------------------------------------- */

.hm-werkraster {
	display: grid;
	gap: var(--hm-abstand-5);
	grid-template-columns: repeat(2, 1fr);
	/* Ohne min-width:0 sprengen lange Titel die Spalten — bekannte Grid-Falle. */
	min-width: 0;
}

@media (min-width: 700px)  { .hm-werkraster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .hm-werkraster { grid-template-columns: repeat(4, 1fr); } }

.hm-werkkarte {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--hm-flaeche);
	border: 1px solid var(--hm-linie);
	border-radius: var(--hm-radius);
	padding: var(--hm-abstand-3);
	text-decoration: none;
	color: inherit;
}

.hm-werkkarte:hover { border-color: var(--hm-akzent); color: inherit; }

/*
  Die Bildbühne gleicht unterschiedliche Formate aus, ohne das Werk zu beschneiden.
  Feste Höhe + object-fit: contain — NIEMALS cover. Ein beschnittenes Gemälde ist
  auf einer Kunstplattform ein Sachfehler, kein Layout-Detail.
*/
.hm-werkkarte__buehne {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 190px;
	background: var(--hm-werkgrund);
	border-radius: var(--hm-radius-klein);
	padding: var(--hm-abstand-3);
}

.hm-werkkarte__buehne img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	box-shadow: var(--hm-schatten-werk);
}

.hm-werkkarte__titel {
	font-family: var(--hm-font-anzeige);
	font-style: italic;
	font-size: 1.1rem;
	margin: var(--hm-abstand-3) 0 var(--hm-abstand-1);
	overflow-wrap: anywhere;
}

.hm-werkkarte__meta {
	font-family: var(--hm-font-daten);
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
	margin-bottom: var(--hm-abstand-2);
}

.hm-werkkarte__preis {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin-top: auto;
	padding-top: var(--hm-abstand-2);
}

/* --- Statusbadge --------------------------------------------------------- */

/*
  Farbe allein trägt hier nie die Bedeutung — der Text steht immer daneben.
  Wer Farben nicht unterscheiden kann, liest trotzdem, was Sache ist.
*/
.hm-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--hm-abstand-2);
	font-size: var(--hm-size-klein);
	font-weight: 600;
	padding: var(--hm-abstand-1) var(--hm-abstand-3);
	border-radius: 999px;
	background: var(--hm-flaeche-tief);
	color: var(--hm-text-leise);
}

.hm-badge::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.hm-badge--verfuegbar { color: var(--hm-status-verfuegbar); }
.hm-badge--repro      { color: var(--hm-status-repro); }
.hm-badge--verkauft   { color: var(--hm-status-verkauft); }
.hm-badge--klaerung   { color: var(--hm-status-warnung); }

/* --- Werkbühne (Einzelansicht) ------------------------------------------- */

.hm-werkseite {
	display: grid;
	gap: var(--hm-abstand-7);
	grid-template-columns: 1fr;
	padding: var(--hm-abstand-6) 0 var(--hm-abstand-8);
}

@media (min-width: 860px) {
	.hm-werkseite { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}

.hm-werkbuehne {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	background: var(--hm-werkgrund);
	border-radius: var(--hm-radius);
	padding: clamp(var(--hm-abstand-4), 4vw, var(--hm-abstand-7));
}

.hm-werkbuehne img { box-shadow: var(--hm-schatten-werk); }

.hm-werkdaten {
	font-family: var(--hm-font-daten);
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
	line-height: 1.9;
	border-top: 1px solid var(--hm-linie);
	border-bottom: 1px solid var(--hm-linie);
	padding: var(--hm-abstand-3) 0;
	margin-bottom: var(--hm-abstand-5);
	font-variant-numeric: tabular-nums;
}

/* --- Herkunftsblock ------------------------------------------------------ */

.hm-herkunft {
	background: var(--hm-flaeche-tief);
	border-left: 3px solid var(--hm-akzent);
	padding: var(--hm-abstand-4) var(--hm-abstand-5);
	margin-bottom: var(--hm-abstand-5);
}

.hm-herkunft__titel {
	font-family: var(--hm-font-anzeige);
	font-weight: 600;
	display: block;
	margin-bottom: var(--hm-abstand-2);
}

/* Kennzeichnung unsicherer Angaben (Sprachleitfaden §3). */
.hm-unsicher {
	font-style: italic;
	color: var(--hm-text-leise);
}

/* --- Kaufblock ----------------------------------------------------------- */

.hm-preis {
	font-family: var(--hm-font-anzeige);
	font-style: normal;
	font-size: var(--hm-size-titel);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.hm-preis__zusatz {
	display: block;
	font-family: var(--hm-font-text);
	font-size: var(--hm-size-klein);
	font-weight: 400;
	color: var(--hm-text-leise);
	margin-top: var(--hm-abstand-1);
}

.hm-kaufblock__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hm-abstand-3);
	margin: var(--hm-abstand-5) 0;
}

/* Pflichthinweise (Privatverkäufer, GPSR) — ruhig, aber nicht versteckt. */
.hm-hinweis {
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
	background: var(--hm-flaeche);
	border: 1px solid var(--hm-linie);
	border-radius: var(--hm-radius);
	padding: var(--hm-abstand-3) var(--hm-abstand-4);
}

/* --- Formulare ----------------------------------------------------------- */

/*
  Beschriftungen stehen immer sichtbar über dem Feld — nie nur als Platzhaltertext.
  Ein Platzhalter verschwindet beim Tippen, und dann weiß niemand mehr, was gefragt war.
*/
.hm-feld { display: flex; flex-direction: column; gap: var(--hm-abstand-2); margin-bottom: var(--hm-abstand-5); }

.hm-feld__label { font-weight: 600; }

.hm-feld__hilfe { font-size: var(--hm-size-klein); color: var(--hm-text-leise); }

.hm-feld input,
.hm-feld select,
.hm-feld textarea {
	min-height: var(--hm-ziel-min-gross);
	padding: var(--hm-abstand-3);
	border: 1px solid var(--hm-linie);
	border-radius: var(--hm-radius);
	background: var(--hm-flaeche);
	color: var(--hm-text);
	font: inherit;
	width: 100%;
}

.hm-feld--fehler input,
.hm-feld--fehler select,
.hm-feld--fehler textarea { border-color: var(--hm-status-fehler); border-width: 2px; }

.hm-feld__fehler { color: var(--hm-status-fehler); font-weight: 600; font-size: var(--hm-size-klein); }

/* --- Schrittanzeige (Einlieferungs-Assistent) ---------------------------- */

.hm-schritte { margin-bottom: var(--hm-abstand-6); }

/* Der Fortschritt steht als Text da UND als Balken — der Balken allein sagt
   niemandem, wie viel noch kommt. */
.hm-schritte__text {
	display: flex;
	justify-content: space-between;
	gap: var(--hm-abstand-3);
	font-weight: 600;
	font-size: var(--hm-size-klein);
	margin-bottom: var(--hm-abstand-2);
}

.hm-schritte__balken { height: 8px; border-radius: 999px; background: var(--hm-flaeche-tief); overflow: hidden; }
.hm-schritte__balken i { display: block; height: 100%; background: var(--hm-akzent); }

/* --- Hilfe-Anker --------------------------------------------------------- */

/* In jedem Schritt der Einlieferung sichtbar: Menschen schlagen Formulare. */
.hm-hilfe {
	background: var(--hm-flaeche-tief);
	border-radius: var(--hm-radius);
	padding: var(--hm-abstand-4) var(--hm-abstand-5);
	margin-top: var(--hm-abstand-6);
}

.hm-hilfe a { font-weight: 600; white-space: nowrap; }

/* --- Breite Inhalte ------------------------------------------------------ */

/* Tabellen und Codeblöcke scrollen in sich, nie der Seitenkörper. */
.hm-scrollbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* --- Größenvergleich ------------------------------------------------------
   Menschen schätzen Bildgrößen auf Fotos notorisch falsch. Eine Silhouette
   neben dem Maß beantwortet die eigentliche Frage: Passt das an meine Wand?
   -------------------------------------------------------------------------- */

.hm-groesse {
	display: flex;
	align-items: flex-end;
	gap: var(--hm-abstand-4);
	background: var(--hm-flaeche-tief);
	border-radius: var(--hm-radius);
	padding: var(--hm-abstand-4);
	margin-bottom: var(--hm-abstand-5);
}

.hm-groesse svg { flex: none; }
.hm-groesse__text { font-size: var(--hm-size-klein); color: var(--hm-text-leise); }
.hm-groesse__text b { display: block; color: var(--hm-text); font-size: 1rem; }

/* --- Entstehungsgeschichte ------------------------------------------------
   Das, was ein Werk von einer Ware unterscheidet.
   -------------------------------------------------------------------------- */

.hm-geschichte {
	background: var(--hm-flaeche);
	border: 1px solid var(--hm-linie);
	border-left: 3px solid var(--hm-akzent);
	border-radius: var(--hm-radius-klein);
	padding: var(--hm-abstand-4) var(--hm-abstand-5);
	margin-bottom: var(--hm-abstand-5);
}

.hm-geschichte h3 {
	font-size: var(--hm-size-gross);
	margin-bottom: var(--hm-abstand-2);
}

.hm-geschichte__quelle {
	display: block;
	font-family: var(--hm-font-daten);
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
	margin-top: var(--hm-abstand-3);
}

/* --- Foto-Hinweis ---------------------------------------------------------
   Der Einlieferer kennt das Original, die Käuferin sieht nur das Foto.
   Kein Warnton — eine ehrliche Angabe schafft Vertrauen.
   -------------------------------------------------------------------------- */

.hm-fotohinweis {
	display: flex;
	gap: var(--hm-abstand-3);
	align-items: flex-start;
	background: var(--hm-akzent-leise);
	border-radius: var(--hm-radius-klein);
	padding: var(--hm-abstand-3) var(--hm-abstand-4);
	margin-bottom: var(--hm-abstand-5);
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
}

.hm-fotohinweis svg { flex: none; margin-top: 2px; }
.hm-fotohinweis b { color: var(--hm-text); }

/* --- Künstlerkopf und Quellenkasten --------------------------------------- */

.hm-kuenstlerkopf {
	display: grid;
	gap: var(--hm-abstand-6);
	grid-template-columns: 1fr;
	align-items: start;
	margin-bottom: var(--hm-abstand-7);
}

.hm-kuenstlerkopf > * { min-width: 0; }

@media (min-width: 760px) {
	.hm-kuenstlerkopf { grid-template-columns: 260px 1fr; }
}

.hm-kuenstlerkopf__bild {
	margin: 0;
	background: var(--hm-werkgrund);
	border-radius: var(--hm-radius);
	padding: var(--hm-abstand-3);
}

.hm-kuenstlerkopf__bild img { width: 100%; height: auto; box-shadow: var(--hm-schatten-karte); }

.hm-kuenstlerkopf__bild figcaption {
	font-family: var(--hm-font-daten);
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
	margin-top: var(--hm-abstand-3);
	line-height: 1.5;
}

.hm-quellen {
	background: var(--hm-flaeche-tief);
	border-radius: var(--hm-radius);
	padding: var(--hm-abstand-4) var(--hm-abstand-5);
	margin-top: var(--hm-abstand-6);
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
}

.hm-quellen h2 {
	font-family: var(--hm-font-daten);
	font-style: normal;
	font-size: var(--hm-size-klein);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hm-text);
	margin-bottom: var(--hm-abstand-3);
}

/* --------------------------------------------------------------------------
   Maßstabsgrafik — macht aus einer Zahl eine Vorstellung.
   Bewusst zurückhaltend: Das Werk ist die Hauptsache, die Grafik nur die Skizze
   daneben. Deshalb keine Fläche, keine Farbe außer den Tokens.
   -------------------------------------------------------------------------- */

.hm-masstab {
	margin: var(--hm-abstand-5) 0 0;
	padding: var(--hm-abstand-4);
	background: var(--hm-flaeche-tief);
	border-radius: var(--hm-radius);
}

.hm-masstab__bild {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	overflow: visible;
}

.hm-masstab__werk {
	fill: var(--hm-akzent-leise);
	stroke: var(--hm-akzent);
	stroke-width: 0.8;
	vector-effect: non-scaling-stroke;
}

.hm-masstab__person {
	fill: var(--hm-text-leise);
	opacity: 0.55;
}

.hm-masstab__boden {
	stroke: var(--hm-linie);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.hm-masstab__text {
	font-family: var(--hm-font-daten);
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
	margin-top: var(--hm-abstand-3);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Preisspiegel — die Aufstellung im Einliefern-Weg.
   Gestaltungsregel hier: Unser Anteil steht in derselben Schriftgröße wie der
   der Familie. Wer den eigenen Abzug kleiner setzt, wirkt unehrlich.
   -------------------------------------------------------------------------- */

.hm-preisspiegel {
	max-width: 34rem;
}

.hm-preisspiegel__titel {
	font-family: var(--hm-font-anzeige);
	font-size: var(--hm-size-gross);
	margin-bottom: var(--hm-abstand-3);
}

.hm-preisspiegel__einleitung {
	color: var(--hm-text);
	margin-bottom: var(--hm-abstand-6);
}

.hm-preisspiegel__richtung {
	border: 0;
	padding: 0;
	margin: 0 0 var(--hm-abstand-6);
}

.hm-preisspiegel__richtung legend {
	font-weight: 600;
	margin-bottom: var(--hm-abstand-2);
}

/* Die ganze Zeile ist anklickbar, nicht nur der kleine Punkt — auf dem
   Smartphone trifft niemand zuverlässig ein 16-Pixel-Ziel. */
.hm-wahl {
	display: flex;
	gap: var(--hm-abstand-3);
	align-items: flex-start;
	padding: var(--hm-abstand-4);
	margin-top: var(--hm-abstand-3);
	background: var(--hm-flaeche);
	border: 1px solid var(--hm-linie);
	border-radius: var(--hm-radius);
	cursor: pointer;
	min-height: 44px;
}

.hm-wahl:focus-within {
	border-color: var(--hm-akzent);
	box-shadow: 0 0 0 3px var(--hm-akzent-leise);
}

.hm-wahl input {
	margin-top: 0.25rem;
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
}

.hm-wahl__text {
	display: flex;
	flex-direction: column;
	gap: var(--hm-abstand-1);
	min-width: 0;
}

.hm-wahl__erklaerung,
.hm-hinweis {
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
	line-height: 1.5;
}

.hm-feld {
	margin-bottom: var(--hm-abstand-6);
}

.hm-feld__frage {
	display: block;
	font-weight: 600;
	margin-bottom: var(--hm-abstand-3);
}

.hm-feld__eingabe {
	display: flex;
	align-items: center;
	gap: var(--hm-abstand-2);
	max-width: 14rem;
}

.hm-feld__eingabe input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--hm-font-daten);
	font-size: var(--hm-size-gross);
	padding: var(--hm-abstand-3);
	border: 1px solid var(--hm-linie);
	border-radius: var(--hm-radius-klein);
	background: var(--hm-flaeche);
	color: var(--hm-text);
}

.hm-feld__eingabe input:focus {
	outline: 2px solid var(--hm-akzent);
	outline-offset: 1px;
}

.hm-feld__einheit {
	font-size: var(--hm-size-gross);
	color: var(--hm-text-leise);
	flex: none;
}

.hm-feld .hm-hinweis {
	margin-top: var(--hm-abstand-3);
}

.hm-aufstellung {
	background: var(--hm-flaeche-tief);
	border-radius: var(--hm-radius);
	padding: var(--hm-abstand-5);
}

.hm-aufstellung__titel {
	font-family: var(--hm-font-daten);
	font-size: var(--hm-size-klein);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hm-text-leise);
	margin-bottom: var(--hm-abstand-4);
}

.hm-aufstellung__tabelle {
	width: 100%;
	border-collapse: collapse;
}

.hm-aufstellung__zeile th {
	text-align: left;
	font-weight: 600;
	padding: var(--hm-abstand-3) 0;
	vertical-align: top;
}

.hm-aufstellung__zeile td {
	text-align: right;
	font-family: var(--hm-font-daten);
	padding: var(--hm-abstand-3) 0;
	vertical-align: top;
	white-space: nowrap;
	padding-left: var(--hm-abstand-4);
}

.hm-aufstellung__erklaerung {
	display: block;
	font-weight: 400;
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
	margin-top: var(--hm-abstand-1);
}

.hm-aufstellung__zeile--abzug td {
	color: var(--hm-text-leise);
}

.hm-aufstellung__zeile--ergebnis {
	border-top: 2px solid var(--hm-linie);
}

.hm-aufstellung__zeile--ergebnis th,
.hm-aufstellung__zeile--ergebnis td {
	font-size: var(--hm-size-gross);
	color: var(--hm-akzent);
	padding-top: var(--hm-abstand-4);
}

.hm-aufstellung__fussnote {
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
	line-height: 1.5;
	margin-top: var(--hm-abstand-4);
}

.hm-warnung {
	margin-top: var(--hm-abstand-5);
	padding: var(--hm-abstand-4);
	border-left: 4px solid var(--hm-status-warnung);
	background: var(--hm-flaeche);
	border-radius: var(--hm-radius-klein);
}

.hm-preisspiegel__ausweg {
	margin-top: var(--hm-abstand-6);
	font-size: var(--hm-size-klein);
	color: var(--hm-text-leise);
	line-height: 1.6;
}

@media (max-width: 30rem) {
	.hm-aufstellung {
		padding: var(--hm-abstand-4);
	}

	.hm-aufstellung__zeile th,
	.hm-aufstellung__zeile td {
		display: block;
		text-align: left;
		padding-left: 0;
	}

	.hm-aufstellung__zeile td {
		padding-top: 0;
	}
}

/* === Kopf und Fuß (Stilblatt D) ========================================== */

.hm-kopf {
	background: var(--hm-grund);
	border-bottom: 1px solid var(--hm-linie);
}

.hm-kopf__zeile {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hm-abstand-3) var(--hm-abstand-6);
	align-items: center;
	justify-content: space-between;
	padding-top: 18px;
	padding-bottom: 18px;
}

.hm-kopf__zeile > * { min-width: 0; }

.hm-marke {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--hm-abstand-1) var(--hm-abstand-3);
	color: var(--hm-text);
	text-decoration: none;
}

.hm-marke:hover { color: var(--hm-text); }

.hm-marke__wort {
	font-family: var(--hm-font-anzeige);
	font-style: italic;
	font-size: 1.6rem;
	line-height: 1.1;
}

.hm-marke__sub {
	font: 400 0.74rem/1.3 var(--hm-font-daten);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hm-text-leise);
}

.hm-kopf nav ul,
.hm-fuss nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm-kopf nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hm-ziel-min);
	padding: 0 var(--hm-abstand-3);
	border-radius: var(--hm-radius-klein);
	color: var(--hm-text);
	text-decoration: none;
}

.hm-kopf nav a:hover,
.hm-kopf nav .current-menu-item > a {
	background: var(--hm-flaeche-tief);
	color: var(--hm-text);
}

.hm-kopf__telefon {
	font-weight: 700;
	color: var(--hm-akzent);
	white-space: nowrap;
	text-decoration: none;
	min-height: var(--hm-ziel-min);
	display: inline-flex;
	align-items: center;
}

.hm-fuss {
	margin-top: var(--hm-abstand-8);
	border-top: 1px solid var(--hm-linie);
	background: var(--hm-grund);
	padding: var(--hm-abstand-6) 0;
	color: var(--hm-text-leise);
	font-size: var(--hm-size-klein);
}

.hm-fuss nav a { color: var(--hm-text-leise); }
.hm-fuss__zeile { margin: var(--hm-abstand-3) 0 0; }

.hm-archivkopf { padding: var(--hm-abstand-7) 0 var(--hm-abstand-5); }
.hm-archivkopf h1 { margin: 0 0 var(--hm-abstand-2); }
.hm-archivkopf p { margin: 0; color: var(--hm-text-leise); max-width: var(--hm-breite-text); }

.hm-knopfzeile {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hm-abstand-3);
}

/* === Startseite (Stilblatt D, Ansicht 1) ================================= */

.hm-start { padding: 50px 0 var(--hm-abstand-5); }

.hm-start__zeile {
	font: 400 0.78rem/1.3 var(--hm-font-daten);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hm-akzent);
	margin: 0 0 var(--hm-abstand-4);
}

.hm-start__titel {
	font-family: var(--hm-font-anzeige);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 4.6vw, 3.1rem);
	line-height: 1.14;
	margin: 0 0 28px;
	max-width: 20ch;
	text-wrap: balance;
}

.hm-start__buehne {
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr;
	align-items: end;
}

.hm-start__buehne > * { min-width: 0; }

@media (min-width: 860px) {
	.hm-start__buehne { grid-template-columns: 1.3fr 0.7fr; }
	.hm-start__buehne--ohne-werk { grid-template-columns: 1fr; }
}

.hm-start__werk { margin: 0; }
.hm-start__werk img { display: block; box-shadow: var(--hm-schatten-werk); }

.hm-start__etikett {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--hm-abstand-3);
	border-top: 1px solid var(--hm-linie);
	margin-top: var(--hm-abstand-4);
	padding-top: 10px;
}

.hm-start__werktitel { font-family: var(--hm-font-anzeige); font-style: italic; font-size: 1.15rem; }
.hm-start__werkdaten { font: 400 0.8rem var(--hm-font-daten); color: var(--hm-text-leise); letter-spacing: 0.06em; }

.hm-start__neben p { margin: 0 0 var(--hm-abstand-5); color: #4A4437; max-width: 34ch; }
.hm-start__buehne--ohne-werk .hm-start__neben p { max-width: var(--hm-breite-text); }

.hm-band { border-top: 1px solid var(--hm-linie); margin-top: 44px; padding: 40px 0 54px; }

.hm-band__kopf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--hm-abstand-4);
	margin-bottom: var(--hm-abstand-5);
}

.hm-band__titel {
	font: 400 0.82rem/1.3 var(--hm-font-daten);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0;
	color: var(--hm-text);
}

/* === Bild anbieten ======================================================== */

.hm-anbieten__einleitung { font-size: 1.05rem; }

.hm-anbieten__weg { max-width: var(--hm-breite-text); }

.hm-anbieten__schritte { padding-left: 1.3em; }
.hm-anbieten__schritte li { margin-bottom: var(--hm-abstand-4); }
.hm-anbieten__schritte b { display: block; }

.hm-anbieten__kontakt p { margin: var(--hm-abstand-2) 0; }

/* === Künstlerarchiv ======================================================= */

.hm-kuenstlerliste {
	display: grid;
	gap: var(--hm-abstand-5);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm-kuenstlerliste > * { min-width: 0; }

.hm-kuenstlerliste a {
	display: flex;
	flex-direction: column;
	gap: var(--hm-abstand-1);
	color: inherit;
	text-decoration: none;
}

.hm-kuenstlerliste__bild {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: var(--hm-werkgrund);
	border-radius: var(--hm-radius-klein);
	padding: var(--hm-abstand-3);
	margin-bottom: var(--hm-abstand-2);
}

.hm-kuenstlerliste__bild img { max-height: 100%; width: auto; object-fit: contain; box-shadow: var(--hm-schatten-karte); }
.hm-kuenstlerliste__name { font-family: var(--hm-font-anzeige); font-style: italic; font-size: 1.25rem; }
.hm-kuenstlerliste__daten { font: 400 0.8rem var(--hm-font-daten); color: var(--hm-text-leise); }

/* === WooCommerce-Seiten =================================================== */

.hm-laden { padding-top: var(--hm-abstand-6); }