/*
 * Optometrie Online — Verzeichnis.
 *
 * Die Kachelform kommt aus dem Theme (.oo-card, .oo-tag). Hier steht nur, was
 * das Verzeichnis darüber hinaus braucht: das Suchformular und ein paar
 * Abstände.
 *
 * Bewusst keine eigenen Farben und keine eigene Kartenform: „Gleiches
 * Erscheinungsbild" heißt dieselbe Bauform, und die gehört ins Theme, nicht in
 * jedes Modul.
 */

.oo-dir {
	max-width: 900px;
}

/* ------------------------------------------------------------ Suchformular */

.oo-dir__search {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 24px;
	padding: var(--oo-card-padding, 18px);
	border: 1px solid var(--oo-line, #edeff2);
	border-radius: var(--oo-radius, 12px);
	background: var(--oo-surface, #fff);
}

.oo-dir__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.oo-dir__field label {
	font-size: 12px;
	font-weight: 600;
	color: var(--oo-ink-quiet, #8a94a6);
}

.oo-dir__field input,
.oo-dir__field select {
	min-height: 40px;
	padding: 8px 10px;
	border: 1px solid var(--oo-line-strong, #e3e7eb);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 14px;
}

.oo-dir__field input {
	width: 9ch;
}

.oo-dir__submit {
	min-height: 40px;
	padding: 8px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--oo-navy, #1e2a3a);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.oo-dir__submit:hover {
	opacity: .9;
}

/* ---------------------------------------------------------------- Ergebnis */

.oo-dir__count,
.oo-dir__notice {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--oo-ink-quiet, #8a94a6);
}

.oo-dir__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oo-dir__entry + .oo-dir__entry {
	margin-top: var(--oo-card-gap, 14px);
}

.oo-dir__heading {
	margin: 28px 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--oo-ink, #1a1d23);
}

.oo-dir__address {
	font-style: normal;
	font-size: 13px;
	line-height: var(--oo-line-height, 1.7);
	color: var(--oo-ink-soft, #4a5568);
}

.oo-dir__qualification {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--oo-ink-soft, #4a5568);
}

/* ------------------------------------------------------------ schmale Geräte */

@media (max-width: 575px) {
	.oo-dir__search {
		gap: 10px;
	}

	.oo-dir__field,
	.oo-dir__submit {
		flex: 1 1 100%;
	}

	.oo-dir__field input {
		width: 100%;
	}
}

/* ==========================================================================
   Formular und Warteschlange
   --------------------------------------------------------------------------
   Dieselben Kacheln wie im Forum: weißer Grund, ein Strich als Rand, runde
   Ecken. Die Farbwerte kommen aus den Merkmalen des Themes, damit eine
   Änderung dort auch hier ankommt.
   ========================================================================== */

.oo-entry-form fieldset,
.oo-review-card {
	margin: 0 0 var(--oo-card-gap, 14px);
	padding: var(--oo-card-padding, 18px);
	background: var(--oo-surface, #ffffff);
	border: 1px solid var(--oo-line-strong, #e3e7eb);
	border-radius: var(--oo-radius, 12px);
}

.oo-entry-form legend {
	padding: 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--oo-ink-soft, #4a5568);
}

.oo-entry-form label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--oo-ink-soft, #4a5568);
}

.oo-entry-form input[type="text"],
.oo-entry-form input[type="url"],
.oo-entry-form input[type="tel"],
.oo-entry-form input[type="number"],
.oo-entry-form select,
.oo-entry-form textarea,
.oo-review-card textarea {
	width: 100%;
	max-width: 32rem;
	padding: 9px 12px;
	font: inherit;
	background: var(--oo-surface, #ffffff);
	border: 1px solid var(--oo-line-strong, #e3e7eb);
	border-radius: var(--oo-radius-small, 6px);
}

.oo-entry-form input:focus,
.oo-entry-form select:focus,
.oo-entry-form textarea:focus {
	border-color: var(--oo-link, #1e5aa8);
	outline: 2px solid rgba(30, 90, 168, 0.12);
}

/* Der Hinweistext unter einem Feld erklärt, was nicht selbsterklärend ist. */
.oo-help {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--oo-ink-quiet, #8a94a6);
}

/*
 * Die Schwerpunkte stehen in einer Reihe, nicht untereinander — und nicht fett.
 *
 * Der Selektor nennt das Formular mit, obwohl `.oo-focus` allein
 * eindeutig wäre: Er muss `.oo-entry-form label` weiter oben schlagen,
 * und das gelingt nur über die Spezifität. Vorher stand hier `.oo-focus`
 * (0,1,0) gegen `.oo-entry-form label` (0,1,1) — die spätere Stellung im
 * Stylesheet half nicht, weil Spezifität vor Reihenfolge kommt. Acht
 * Schwerpunkte erschienen als acht fette Blockzeilen.
 *
 * Kein `!important`: Das gewinnt zwar auch, aber es nimmt jeder späteren Regel
 * die Möglichkeit, hier noch etwas zu ändern — und es verschweigt, wogegen es
 * eigentlich antritt.
 */
.oo-entry-form label.oo-focus {
	display: inline-block;
	margin: 0 14px 6px 0;
	font-weight: 400;
}

.oo-button,
.oo-button-quiet {
	padding: 9px 18px;
	font: inherit;
	border-radius: var(--oo-radius-small, 6px);
	cursor: pointer;
}

.oo-button {
	color: #ffffff;
	background: var(--oo-accent, #9c3a3a);
	border: 1px solid var(--oo-accent, #9c3a3a);
}

/*
 * „Zurückziehen" und „Ablehnen" sind stiller gehalten als die
 * Hauptrichtung. Beides sind Schritte, die man bewusst geht — sie sollen
 * erreichbar sein, aber nicht einladen.
 */
.oo-button-quiet {
	color: var(--oo-ink-soft, #4a5568);
	background: transparent;
	border: 1px solid var(--oo-line-strong, #e3e7eb);
}

/*
 * `.oo-notice` steht hier nicht mehr: Es gehoert dem Theme
 * (`theme/optometrie/assets/base.css`), weil es auch ausserhalb des
 * Verzeichnisses gebraucht wird. Zwei Definitionen derselben Form waeren
 * frueher oder spaeter zwei verschiedene Formen.
 */
.oo-message,
.oo-rejection,
.oo-status {
	padding: 10px 14px;
	margin-bottom: var(--oo-card-gap, 14px);
	background: var(--oo-surface-quiet, #fbfbfc);
	border-left: 3px solid var(--oo-line-strong, #e3e7eb);
	border-radius: var(--oo-radius-small, 6px);
}

.oo-rejection {
	border-left-color: var(--oo-accent, #9c3a3a);
}

.oo-review-data {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
	margin: 0 0 10px;
	font-size: 14px;
}

.oo-review-data dt {
	font-weight: 600;
	color: var(--oo-ink-quiet, #8a94a6);
}

.oo-review-data dd {
	margin: 0;
}

/*
 * Der freie Text über die eigene Arbeit. Eingerückt und ruhiger gesetzt als
 * die Prüfdaten darüber: Er ist die Selbstauskunft der Person, keine geprüfte
 * Angabe — der Unterschied soll ohne Überschrift zu sehen sein.
 */
.oo-about {
	margin: 0 0 14px;
	padding-left: 12px;
	border-left: 2px solid var(--oo-line, #edeff2);
	font-size: 14px;
	color: var(--oo-ink-soft, #4a5568);
}

/*
 * Zwei Kästchen, die aus der Karte herausstechen sollen, ohne zu schreien:
 *
 * - „Schon einmal entschieden" — die Sache lag der Moderation schon einmal vor.
 *   Wer das überliest, prüft dieselbe Sache ein zweites Mal von vorn oder
 *   schaltet frei, was gerade abgelehnt wurde. Als schmuckloser Absatz mitten
 *   in der Karte wurde er genau dafür übersehen.
 * - „Geänderte Anschrift" — die neue Adresse steht noch nirgends öffentlich.
 *
 * Ein leicht abgesetzter Grund und ein farbiger Strich links, dieselbe Bauform
 * wie `.oo-message` und Verwandte weiter oben. Keine eigene Kartenform: Die
 * gehört ins Theme.
 */
.oo-previous-decision,
.oo-proposal {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: var(--oo-surface-quiet, #fbfbfc);
	border-left: 3px solid var(--oo-accent, #9c3a3a);
	border-radius: var(--oo-radius-small, 6px);
	font-size: 14px;
}

/*
 * Der Strich in Dunkelblau statt im Akzentton: Die geänderte Anschrift ist
 * eine Auskunft, keine Warnung. Der rote Strich bleibt dem vorbehalten, was
 * schon einmal schiefging — sonst gewöhnt sich das Auge daran und übersieht
 * beides.
 */
.oo-proposal {
	border-left-color: var(--oo-navy, #1e2a3a);
}

.oo-previous-decision p,
.oo-proposal p {
	margin: 0 0 4px;
}

.oo-previous-decision p:last-child,
.oo-proposal p:last-child {
	margin-bottom: 0;
}

/*
 * Die Knopfzeile: Knöpfe nebeneinander, mit Abstand dazwischen, und auf
 * schmalen Geräten umbrechend statt über den Rand hinaus. `gap` statt eines
 * Außenabstands am Knopf — so bleibt der Abstand zwischen den Knöpfen und
 * nicht am Rand der Zeile hängen.
 */
.oo-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 16px 0 0;
}

/*
 * Hier stand eine dunkle Fassung. Sie ist bewusst entfernt.
 *
 * **Sie war wirkungslos, und das war nicht der einzige Grund.** Sie setzte
 * `var( --oo-surface, #1a1d23 )` und verliess sich damit auf den
 * Rückfallwert. Der greift nie: `theme/optometrie/assets/base.css:25` setzt
 * `--oo-surface: #ffffff` bedingungslos, also ist das Merkmal immer belegt.
 * Gemessen mit Playwright bei `colorScheme: dark` blieben Formular und
 * Prüfkarte `rgb(255,255,255)` — eine Regel, die dasteht und nichts tut.
 *
 * **Repariert wurde sie trotzdem nicht, sondern gestrichen.** Diese Seite
 * hat keine dunkle Fassung: Der Block war der einzige
 * `prefers-color-scheme` im ganzen Theme und im ganzen Plugin. Mit festen
 * Farbwerten statt Rückfallwerten hätte er funktioniert — und ein dunkles
 * Formular in eine ansonsten weisse Seite gesetzt. Das wäre schlechter als
 * gar keine dunkle Fassung.
 *
 * Der Entwurf verlangte sie, weil er für Apache Answer geschrieben war, das
 * eine mitbringt. Beim Umzug nach WordPress ist die Anforderung mitgewandert,
 * ihre Voraussetzung nicht.
 *
 * Eine dunkle Fassung gehört, wenn sie kommt, ins Theme — an die Stelle, an
 * der die `--oo-…`-Merkmale definiert werden. Dann zieht das Verzeichnis
 * ohne eigenes Zutun mit, weil es durchgehend dieselben Merkmale benutzt.
 */