/* Der Fundus auf der Seite.
 *
 * Die Farben kommen aus dem Theme, wenn eines da ist - über die
 * Variablen mit dem Vorsatz --sed-. Steht das Plugin auf einer Seite mit
 * einem anderen Theme, greifen die Ersatzwerte dahinter. So sieht es hier
 * richtig aus und anderswo wenigstens ordentlich.
 */

.sedif {
	--f-karte:  var(--sed-karte, #ffffff);
	--f-leis:   var(--sed-karte-leis, #f7f9fd);
	--f-linie:  var(--sed-linie, #dbe2ee);
	--f-fein:   var(--sed-linie-fein, #e9eef7);
	--f-text:   var(--sed-text, #16202c);
	--f-leise:  var(--sed-leise, #5b6878);
	--f-blau:   var(--sed-blau, #0f3d8c);
	--f-hell:   var(--sed-hell, #e7eefc);
	--f-gruen:  var(--sed-gruen, #1f7a52);
	--f-gruenh: var(--sed-gruen-hell, #e3f4ec);
	--f-rot:    var(--sed-rot, #a8412c);
	--f-roth:   var(--sed-rot-hell, #fbe9e4);
	--f-rund:   var(--sed-rund-klein, 10px);
	--f-titel:  var(--sed-titel, "Barlow Semi Condensed", "Arial Narrow", sans-serif);

	color: var(--f-text);
}

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

.sedif-titel { margin: 0 0 .4em; }

.sedif-zeile {
	margin: 0 0 14px;
	color: var(--f-leise);
	font-size: .98rem;
}

/* --- Die Gegenstände ------------------------------------------------ */

.sedif-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sedif-kachel {
	background: var(--f-leis);
	border: 1px solid var(--f-linie);
	border-radius: var(--f-rund);
	padding: 14px 16px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* Verliehene bekommen einen schmalen roten Streifen links. Die Marke
   sagt es auch, aber die Kante sieht man schon beim Überfliegen - und
   genau danach sucht, wer auf diese Seite kommt. */
.sedif-kachel.sedif-weg {
	border-left: 3px solid var(--f-rot);
	padding-left: 14px;
}

.sedif-kachel h3 {
	margin: 0 0 6px;
	font-family: var(--f-titel);
	font-size: 1.08rem;
	line-height: 1.2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sedif-wo { margin: 0 0 3px; font-size: .97rem; }
.sedif-seit,
.sedif-text { margin: 0; color: var(--f-leise); font-size: .9rem; }
.sedif-text { margin-top: 6px; }

/* --- Die Marke ------------------------------------------------------ */

.sedif-marke {
	display: inline-flex;
	align-items: center;
	font-family: var(--f-titel);
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 2px 9px 3px;
	border-radius: 999px;
	border: 1px solid transparent;
	white-space: nowrap;
}
.sedif-marke-da  { background: var(--f-gruenh); color: var(--f-gruen);
                   border-color: rgba(31, 122, 82, .28); }
.sedif-marke-weg { background: var(--f-roth);   color: var(--f-rot);
                   border-color: rgba(168, 65, 44, .26); }

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

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

.sedif-feld { flex: 1 1 180px; min-width: 0; }
.sedif-breit { flex: 2 1 260px; }

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

.sedif-feld select,
.sedif-feld input[type="text"] {
	width: 100%;
	font: inherit;
	color: var(--f-text);
	background: #fff;
	border: 1px solid var(--f-linie);
	border-radius: var(--f-rund);
	padding: 9px 11px;
}
.sedif-feld select:focus,
.sedif-feld input:focus {
	border-color: var(--f-blau);
	outline: none;
	box-shadow: 0 0 0 3px rgba(15, 61, 140, .12);
}

.sedif-haken {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: .95rem;
	color: var(--f-leise);
	padding-bottom: 9px;
}

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

.sedif-knopf-leise {
	background: transparent;
	color: var(--f-blau);
}
.sedif-knopf-leise:hover { background: var(--f-hell); filter: none; }

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

/* Die Rückmeldung nach dem Absenden. Sie steht in einer eigenen Zeile
   unter dem Formular und nimmt die volle Breite - sonst schiebt sie beim
   Erscheinen die Felder durcheinander. */
.sedif-antwort {
	flex: 1 1 100%;
	margin: 4px 0 0;
	min-height: 1.4em;
	font-size: .95rem;
	color: var(--f-gruen);
}
.sedif-antwort.sedif-schief { color: var(--f-rot); }

/* --- Der Verlauf ---------------------------------------------------- */

.sedif-untertitel {
	margin: 24px 0 6px;
	font-family: var(--f-titel);
	font-size: 1.1rem;
	color: var(--f-leise);
	letter-spacing: .03em;
	text-transform: uppercase;
}

.sedif-verlauf {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--f-fein);
}

.sedif-verlauf li {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	padding: 8px 2px;
	border-bottom: 1px solid var(--f-fein);
	font-size: .96rem;
}

.sedif-wann {
	font-variant-numeric: tabular-nums;
	color: var(--f-leise);
	min-width: 6ch;
}
.sedif-was { font-weight: 600; }
.sedif-wer { color: var(--f-leise); }

/* Die neueste Zeile hebt sich kurz hervor, wenn sie gerade dazukam. */
.sedif-verlauf li.sedif-neu {
	animation: sedif-aufleuchten 1.6s ease both;
}
@keyframes sedif-aufleuchten {
	0%   { background: var(--f-hell); }
	100% { background: transparent; }
}

.sedif-leer { color: var(--f-leise); }

@media (max-width: 560px) {
	.sedif-raster { grid-template-columns: 1fr; }
	.sedif-form { padding: 14px; }
	.sedif-feld, .sedif-breit { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.sedif-kachel,
	.sedif-verlauf li.sedif-neu { transition: none; animation: none; }
}


/* ======================================================================
   DAS ZEICHEN VOR DEM NAMEN

   Gordon, 09.09.2026: "Vielleicht mit kleinen Symbolen vorweg."

   Ein blaues Quadrat mit dem Umriss darin - dieselbe Form wie im
   Kopfstreifen der Seiten, damit die Kacheln zur Seite gehören und
   nicht wie ein fremdes Plugin aussehen.
   ====================================================================== */

.sedif-zeichen {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--f-hell);
	color: var(--f-blau);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sedif-zeichen svg { width: 17px; height: 17px; display: block; }

.sedif-kachel.sedif-weg .sedif-zeichen {
	background: var(--f-roth);
	color: var(--f-rot);
}

/* ======================================================================
   IN DER SEITENSPALTE

   Dort ist es schmal - rund 210 Punkte. Alles nebeneinander wird
   untereinander, die Kacheln verlieren ihr Raster, und der Rahmen
   kommt weg: Ein Kasten im Kasten sieht in einer schmalen Spalte aus
   wie ein Versehen.
   ====================================================================== */

.sedif-block {
	background: var(--f-karte);
	border: 1px solid var(--f-linie);
	border-radius: var(--f-rund);
	padding: 14px 14px 16px;
}

.sedif-block .sedif-untertitel { margin-top: 0; }

.sedif-schmal .sedif-raster { grid-template-columns: 1fr; gap: 8px; }
.sedif-schmal .sedif-kachel { padding: 10px 12px; }
.sedif-schmal .sedif-kachel h3 { font-size: 1rem; }
.sedif-schmal .sedif-wo { font-size: .92rem; }
.sedif-schmal .sedif-seit { font-size: .85rem; }
.sedif-schmal .sedif-text { display: none; }

.sedif-form.sedif-eng {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	display: block;
}
.sedif-form.sedif-eng .sedif-feld,
.sedif-form.sedif-eng .sedif-breit,
.sedif-form.sedif-eng .sedif-datum { margin-bottom: 10px; }
.sedif-form.sedif-eng .sedif-haken { padding: 0 0 10px; }
.sedif-form.sedif-eng .sedif-knopf { width: 100%; }

/* Das Kalenderfeld. Es ist schmaler als die übrigen - ein Datum hat
   eine feste Länge, und ein halbleeres Feld daneben sieht aus, als
   fehlte etwas. */
.sedif-datum { flex: 0 0 auto; min-width: 150px; }
.sedif-datum input[type="date"] {
	width: 100%;
	font: inherit;
	color: var(--f-text);
	background: #fff;
	border: 1px solid var(--f-linie);
	border-radius: var(--f-rund);
	padding: 8px 10px;
}


/* ======================================================================
   IN DER LINKEN SPALTE NICHT ÜBERSTEHEN

   Gordon, 09.09.2026 mit Bild: "Das ragt in den Content rein."

   Die Spalte ist rund 210 Punkte breit; das Widget bringt schon einen
   weißen Kasten mit, und der Kurzbefehl legte einen zweiten hinein.
   Zusammen mit den Innenabständen wurde das breiter als die Spalte -
   und was breiter ist als sein Platz, steht daneben.

   Also in der Spalte: kein eigener Kasten mehr, und nie breiter als
   das, was da ist.
   ====================================================================== */

.sedif,
.sedif-block {
	max-width: 100%;
	box-sizing: border-box;
}

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

#secondary .sedif-kachel,
.widget .sedif-kachel { padding: 9px 10px; }

#secondary .sedif-raster,
.widget .sedif-raster { grid-template-columns: 1fr; gap: 8px; }


/* Bei wem der Gegenstand gerade ist. */
.sedif-an {
	margin: 0 0 3px;
	font-size: .95rem;
	color: var(--f-rot);
}
.sedif-an strong { color: var(--f-rot); }

.sedif-anwen { flex: 1 1 170px; }

.sedif-feld select.sedif-zustand,
.sedif-feld input[list] {
	width: 100%;
	font: inherit;
	color: var(--f-text);
	background: #fff;
	border: 1px solid var(--f-linie);
	border-radius: var(--f-rund);
	padding: 9px 11px;
}


/* Der Name als Link - er führt zur Fundus-Seite, direkt ans Formular. */
a.sedif-name {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted var(--f-linie);
}
a.sedif-name:hover,
a.sedif-name:focus {
	color: var(--f-blau);
	border-bottom-color: var(--f-blau);
}

/* In der Spalte nutzen die Kacheln die volle Breite.

   Gordon, 09.09.2026: "Die weiße Box ist ja schon der hintere Rahmen,
   die inneren Boxen müssten breiter sein."

   Das Widget bringt seinen Rand mit; die Kachel bekommt deshalb hier
   weniger Polsterung und keinen eigenen Abstand nach außen. */
#secondary .sedif-kachel,
.widget .sedif-kachel { padding: 10px 11px; }

#secondary .sedif-raster,
.widget .sedif-raster { gap: 9px; }


/* Das Feld für einen neuen Gegenstand bleibt weg, bis es gebraucht
   wird. Das !important ist nötig: Die Regel für .sedif-feld setzt
   display, und die gewinnt sonst gegen das hidden-Attribut. */
.sedif-neufeld[hidden] { display: none !important; }

.sedif-feld select.sedif-wahl {
	width: 100%;
	font: inherit;
	color: var(--f-text);
	background: #fff;
	border: 1px solid var(--f-linie);
	border-radius: var(--f-rund);
	padding: 9px 11px;
}


/* Der Hinweis für Gäste - kein Fehler, sondern eine Auskunft. Deshalb
   grau und kursiv und nicht rot. */
.sedif-privat {
	margin: 4px 0 0;
	font-size: .92rem;
	font-style: italic;
	color: var(--f-leise);
}

/* Der Haken im Formular. Er steht neben seinem Text und nicht darüber -
   ein Kästchen mit einer Überschrift darüber sieht aus wie ein
   leeres Feld. */
.sedif-hakenzeile {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
}
.sedif-hakentext {
	font-size: .95rem;
	color: var(--f-text);
}

/* Der Link im Hinweis bleibt lesbar, auch wenn der Satz kursiv ist. */
.sedif-privat a {
	font-style: normal;
	font-weight: 600;
	color: var(--f-blau);
}