/* ═══════════════════════════════════════════════════════
   Fokus – lokales Stylesheet
   Variablen (--farbe1 bis --farbe3, --groesse1 bis --groesse4)
   sind in /dateien/style.css definiert.
   ═══════════════════════════════════════════════════════ */

/* ── Breadcrumb ──────────────────────────────────────── */

nav.breadcrumb {
	margin: 1em 0 0 0;
	text-align: center;
	font-size: var(--groesse1);
}

nav.breadcrumb a,
nav.breadcrumb span {
	display: inline-block;
	padding: 0.3em 0.6em;
	margin: 0 0.3em;
}

nav.breadcrumb a {
	background-color: var(--farbe2);
	color: var(--farbe1);
}

/* Aktuelle Seite (letzter Abschnitt) */
nav.breadcrumb span {
	background-color: var(--farbe1);
	color: var(--farbe2);
}

/* Trennzeichen zwischen den Stationen */
/*nav.breadcrumb a + a::before,
nav.breadcrumb a + span::before {
	content: " / ";
	background: none;
	color: inherit;
	padding: 0;
	display: inline;
}*/

/* ── Fokus-Übersicht: Unterseiten-Linkliste ───────────── */
/* Die Kacheln selbst nutzt jetzt einheitlich nav.fokusThemen /
   article.fokusThema aus /dateien/style.css — siehe fokusKacheln(). */

ul.fokusUnterseiten {
	margin: 0.4em 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--groesse1);
}

ul.fokusUnterseiten li {
	display: inline;
}

ul.fokusUnterseiten li:not(:last-child)::after {
	content: " · ";
}

/* ── Künstler-/Werkelisten (fokusZeigeKuenstler, fokusZeigeArbeiten) ──── */
/* .fokusListe statt aria-label als Hook: aria-label dient der Barriere-
   freiheit und trägt je nach Seitentyp unterschiedlichen Text („Arbeiten",
   „Verfügbare Arbeiten", „Kaufbare Arbeiten" …) — als CSS-Selektor wäre er
   unvollständig und an Textänderungen gekoppelt. */

.fokusListe {
	margin-bottom: 3em;
}

/* Zusätzlicher Abstand nur, wenn zwei Listen direkt aufeinanderfolgen
   (z. B. Künstler- vor Werkeliste). Erscheint nur eine Liste, greift
   ausschließlich der einheitliche Abstand aus margin-bottom oben — daher
   bleibt der Abstand auch dann konsistent, wenn die Künstlerliste fehlt. */
.fokusListe + .fokusListe {
	margin-top: 4em;
}

/* ── FAQ (details / summary) ─────────────────────────── */

.faq {
	text-align: left;
	margin: 1em 0;
}

.faq > details {
	border-bottom: 1px solid var(--farbe1);
	padding: 0.8em 0;
	font-size: var(--groesse2);
	line-height: 1.3em;
}

.faq > details:last-child {
	border-bottom: none;
}

.faq > details > summary {
	cursor: pointer;
	font-weight: bold;
	list-style: none;
	padding-right: 1.5em;
	position: relative;
}

.faq > details > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	font-weight: normal;
	transition: transform 0.2s;
}

.faq > details[open] > summary::after {
	content: "–";
}

.faq details summary::-webkit-details-marker {
	display: none;
}

.faq > details > p {
	margin: 0.8em 0 0.2em;
	font-size: var(--groesse1);
	line-height: 1.5em;
}

/* ── Info-Zeile im Kunst-kaufen-Teaser (Technik) ── */

p.teaserInfo {
	font-size: var(--groesse1);
	margin: 0.4em 0 0.5em;
	line-height: 1.4em;
}

/* ── Teaser-Zusatzhinweis (Preis / Verfügbarkeit / Abholung) ────────── */

span.teaserZusatz {
	display: inline-block;
	font-size: var(--groesse1);
	padding: 0.25em 0.5em 0.15em 0.5em;
}

span.teaserZusatz.tz-preis,
span.teaserZusatz.tz-verfuegbar {
	background-color: rgba(200, 230, 200, 1);
	color: rgba(30, 100, 30, 1);
}

span.teaserZusatz.tz-anfrage {
	background-color: rgba(220, 220, 200, 1);
	color: rgba(80, 80, 40, 1);
}

span.teaserZusatz.tz-reserviert {
	background-color: rgba(240, 210, 180, 1);
	color: rgba(130, 60, 10, 1);
}

span.teaserZusatz.tz-abholung {
	background-color: rgba(200, 220, 240, 1);
	color: rgba(30, 70, 110, 1);
	font-weight: normal;
}