/* Die Termine auf der Seite.
 *
 * Farben aus dem Theme, mit Ersatzwerten dahinter - so sieht es hier
 * richtig aus und anderswo wenigstens ordentlich.
 */

.seda {
	--a-karte:  var(--sed-karte, #ffffff);
	--a-leis:   var(--sed-karte-leis, #f7f9fd);
	--a-linie:  var(--sed-linie, #dbe2ee);
	--a-fein:   var(--sed-linie-fein, #e9eef7);
	--a-text:   var(--sed-text, #16202c);
	--a-leise:  var(--sed-leise, #5b6878);
	--a-blau:   var(--sed-blau, #0f3d8c);
	--a-tief:   var(--sed-blau-tief, #0a2c66);
	--a-hell:   var(--sed-hell, #e7eefc);
	--a-rund:   var(--sed-rund-klein, 10px);
	--a-titel:  var(--sed-titel, "Barlow Semi Condensed", "Arial Narrow", sans-serif);

	color: var(--a-text);
	max-width: 100%;
	box-sizing: border-box;
}

.seda * { box-sizing: border-box; }

.seda-ueberschrift {
	margin: 0 0 10px;
	font-family: var(--a-titel);
	font-size: 1.1rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--a-leise);
}

/* --- Die Liste ------------------------------------------------------ */

.seda-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.seda-eintrag {
	display: flex;
	gap: 12px;
	background: var(--a-leis);
	border: 1px solid var(--a-linie);
	border-left: 3px solid var(--a-blau);
	border-radius: var(--a-rund);
	padding: 12px 14px;
}

/* Vorbei heißt: bleibt stehen, tritt zurück. */
.seda-eintrag.seda-vorbei {
	border-left-color: var(--a-linie);
	opacity: .62;
}

.seda-zeichen {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--a-hell);
	color: var(--a-blau);
	display: flex;
	align-items: center;
	justify-content: center;
}
.seda-zeichen svg { width: 18px; height: 18px; display: block; }
.seda-vorbei .seda-zeichen { background: var(--a-fein); color: var(--a-leise); }

.seda-mitte { min-width: 0; }

.seda-titel {
	margin: 0 0 3px;
	font-family: var(--a-titel);
	font-size: 1.08rem;
	line-height: 1.2;
}

.seda-wann {
	margin: 0 0 2px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--a-blau);
	font-size: .96rem;
}
.seda-vorbei .seda-wann { color: var(--a-leise); }

.seda-wo,
.seda-text,
.seda-wer { margin: 0 0 2px; color: var(--a-leise); font-size: .93rem; }
.seda-text { margin-top: 5px; color: var(--a-text); }
.seda-wer { font-size: .85rem; font-style: italic; }

.seda-leer { color: var(--a-leise); list-style: none; }

.seda-mehr { margin: 10px 0 0; font-size: .93rem; }

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

.seda-form {
	margin: 18px 0 0;
	padding: 16px;
	border: 1px dashed #b9c8e4;
	border-radius: var(--a-rund);
	background: var(--a-karte);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	align-items: flex-end;
}

.seda-feld { flex: 1 1 180px; min-width: 0; }
.seda-breit { flex: 2 1 260px; }
.seda-voll { flex: 1 1 100%; }

.seda-feld > span {
	display: block;
	font-family: var(--a-titel);
	font-size: .84rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--a-leise);
	margin-bottom: 4px;
}
.seda-feld > span em { text-transform: none; letter-spacing: 0; }

.seda-feld input,
.seda-feld textarea {
	width: 100%;
	font: inherit;
	color: var(--a-text);
	background: #fff;
	border: 1px solid var(--a-linie);
	border-radius: var(--a-rund);
	padding: 9px 11px;
	resize: vertical;
}
.seda-feld input:focus,
.seda-feld textarea:focus {
	border-color: var(--a-blau);
	outline: none;
	box-shadow: 0 0 0 3px rgba(15, 61, 140, .12);
}

.seda-knopf {
	display: inline-block;
	background: var(--a-blau);
	color: #fff;
	border: 1px solid var(--a-blau);
	border-radius: 999px;
	padding: 9px 20px;
	font-family: var(--a-titel);
	font-size: 1rem;
	letter-spacing: .04em;
	cursor: pointer;
	text-decoration: none;
}
.seda-knopf:hover:not(:disabled) { background: var(--a-tief); color: #fff; }
.seda-knopf:disabled { opacity: .55; cursor: default; }

.seda-knopf-leise { background: transparent; color: var(--a-blau); }
.seda-knopf-leise:hover { background: var(--a-hell); color: var(--a-tief); }

/* Der Knopf für die Seitenspalte - volle Breite, mit der Zahl der
   offenen Termine. Gordon, 09.09.2026: "Im linken Seitenmenü ein Knopf
   Aktuelles, den klickt man an und kommt auf die Seite." */
.seda-knopf.seda-gross {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 16px;
	font-size: 1.06rem;
}
.seda-zahl {
	background: rgba(255, 255, 255, .22);
	border-radius: 999px;
	padding: 1px 9px 2px;
	font-variant-numeric: tabular-nums;
}

.seda-hinweis {
	margin: 18px 0 0;
	padding: 14px 16px;
	background: var(--a-hell);
	border-radius: var(--a-rund);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: .97rem;
}

.seda-antwort {
	flex: 1 1 100%;
	margin: 4px 0 0;
	min-height: 1.4em;
	font-size: .95rem;
	color: var(--sed-gruen, #1f7a52);
}
.seda-antwort.seda-schief { color: var(--sed-rot, #a8412c); }

/* --- In der Seitenspalte --------------------------------------------
   Dort bringt das Widget schon einen Kasten mit - ein zweiter darin
   sähe aus wie ein Versehen. */

#secondary .seda-block,
.widget .seda-block { background: transparent; border: 0; padding: 0; }

.seda-schmal .seda-eintrag { padding: 10px 11px; gap: 9px; }
.seda-schmal .seda-titel { font-size: 1rem; }
.seda-schmal .seda-zeichen { width: 26px; height: 26px; }
.seda-schmal .seda-zeichen svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
	.seda-feld, .seda-breit { flex: 1 1 100%; }
	.seda-form { padding: 14px; }
}


/* Die Marke hinter der Überschrift. In Sternchen, wie Gordon es
   beschrieben hat - das liest sich wie ein Vermerk und nicht wie ein
   zweiter Titel. */
.seda-marke {
	display: inline-block;
	margin-left: 6px;
	font-family: var(--a-titel);
	font-size: .76rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: .1em;
	white-space: nowrap;
}
.seda-marke::before { content: "\2217\00a0"; }
.seda-marke::after  { content: "\00a0\2217"; }

/* Blau für das, was noch kommt - die Farbe der Seite. Grau für das,
   was vorbei ist. Gordon, 09.09.2026: "Das verstrichen kann auch grau
   sein, und das aktuell muss dann blau sein." */
.seda-marke-neu { color: var(--a-blau); }
.seda-marke-alt { color: var(--a-leise); opacity: .8; }


/* Der verschlossene Termin. Gestrichelt statt durchgezogen: Da ist
   etwas, aber nicht für jeden. */
.seda-eintrag.seda-zu {
	border-style: dashed;
	border-left-color: var(--a-linie);
	background: transparent;
}
.seda-zu .seda-zeichen { background: var(--a-fein); color: var(--a-leise); }
.seda-zu-text {
	margin: 4px 0;
	font-size: .94rem;
	font-style: italic;
	color: var(--a-leise);
}

/* Der Haken im Formular - neben seinem Text, nicht darunter. */
.seda-hakenzeile {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
}
.seda-hakentext { font-size: .95rem; color: var(--a-text); font-style: normal; }