/*
 * Gästebuch — Grunddarstellung.
 *
 * Bewusst sparsam und ohne feste Farben: das Plugin soll sich in jedes Theme
 * einfügen. Abstände über Variablen, damit sie an einer Stelle änderbar sind.
 */

.gbuch {
	--gbuch-abstand: 1.5rem;
	--gbuch-linie: currentColor;
	--gbuch-linie-staerke: 1px;

	container-type: inline-size;
}

/* ------------------------------------------------------------- Einträge */

.gbuch-liste {
	display: flex;
	flex-direction: column;
	gap: var(--gbuch-abstand);
	margin-block-end: var(--gbuch-abstand);
}

.gbuch-eintrag {
	padding-block: calc(var(--gbuch-abstand) * 0.75);
	border-block-start: var(--gbuch-linie-staerke) solid var(--gbuch-linie);
	/* Die Linie soll nur andeuten, nicht dominieren. */
	border-color: color-mix(in srgb, currentColor 20%, transparent);
}

.gbuch-eintrag:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.gbuch-eintrag__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin-block-end: 0.5rem;
}

.gbuch-eintrag__name {
	font-weight: 700;
}

.gbuch-eintrag__datum {
	font-size: 0.875em;
	opacity: 0.7;
}

.gbuch-eintrag__text > :first-child {
	margin-block-start: 0;
}

.gbuch-eintrag__text > :last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------- Seitenblätter */

.gbuch-blaetter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: var(--gbuch-abstand);
}

.gbuch-blaetter .page-numbers {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border: var(--gbuch-linie-staerke) solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 0.25rem;
	text-decoration: none;
	line-height: 1.4;
}

.gbuch-blaetter .page-numbers.current {
	font-weight: 700;
	border-color: currentColor;
}

/* --------------------------------------------------------------- Formular */

.gbuch-formular-bereich {
	margin-block-start: calc(var(--gbuch-abstand) * 1.5);
	padding-block-start: var(--gbuch-abstand);
	border-block-start: var(--gbuch-linie-staerke) solid color-mix(in srgb, currentColor 20%, transparent);
}

.gbuch-formular__titel {
	margin-block-start: 0;
}

.gbuch-formular__feld label {
	display: block;
	margin-block-end: 0.35rem;
	font-weight: 600;
}

.gbuch-formular textarea {
	inline-size: 100%;
	max-inline-size: 100%;
	padding: 0.6rem;
	font: inherit;
	line-height: 1.5;
}

.gbuch-formular__hinweis {
	font-size: 0.875em;
	opacity: 0.75;
}

.gbuch-knopf {
	padding: 0.55rem 1.2rem;
	font: inherit;
	cursor: pointer;
}

/* Sichtbarer Fokus — nie wegnehmen, ohne Ersatz zu geben. */
.gbuch a:focus-visible,
.gbuch button:focus-visible,
.gbuch textarea:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* -------------------------------------------------------------- Hinweise */

.gbuch-hinweis {
	padding: 0.6rem 0.9rem;
	border-inline-start: 4px solid color-mix(in srgb, currentColor 40%, transparent);
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.gbuch-hinweis--gut {
	border-inline-start-color: color-mix(in srgb, currentColor 60%, transparent);
}

.gbuch-leer {
	opacity: 0.8;
}

/* Backend: Herkunftsspalte */
.gbuch-herkunft {
	font-size: 0.9em;
	opacity: 0.85;
}