/*
 * Zurückhaltend mit Absicht: das Plugin läuft in fremden Themes, von denen wir nichts
 * wissen. Deshalb keine Schriftarten, keine Farbwelt, keine festen Hintergründe —
 * geerbt wird, was das Theme vorgibt. Gesetzt werden nur Abstände, Rahmen und die
 * paar Farben, die eine Bedeutung tragen (Erfolg, Fehler, neue Nachricht).
 *
 * Farben kommen aus Variablen, damit ein Theme sie überschreiben kann, ohne unsere
 * Regeln zu übertrumpfen.
 */

.trs-block {
	--trs-rand: rgba(0, 0, 0, .12);
	--trs-gedaempft: rgba(0, 0, 0, .55);
	--trs-ok: #15803d;
	--trs-ok-flaeche: rgba(21, 128, 61, .08);
	--trs-fehler: #b91c1c;
	--trs-fehler-flaeche: rgba(185, 28, 28, .08);
	--trs-warn: #b45309;
	--trs-warn-flaeche: rgba(180, 83, 9, .08);
	--trs-neu: #1d4ed8;
	--trs-neu-flaeche: rgba(29, 78, 216, .1);
	margin: 1.5rem 0;
}

/* Rückfall für Browser ohne color-mix: wenigstens nach Systemeinstellung umschalten. */
@media (prefers-color-scheme: dark) {
	.trs-block {
		--trs-rand: rgba(255, 255, 255, .16);
		--trs-gedaempft: rgba(255, 255, 255, .6);
	}
}

/*
 * Der richtige Weg: aus der TEXTFARBE des Themes ableiten.
 *
 * prefers-color-scheme sagt nur, wie der Besucher sein Betriebssystem eingestellt hat —
 * nicht, welchen Hintergrund das Theme hat. Ein dunkles Theme bei hell eingestelltem System
 * bekam deshalb schwarze Rahmen auf schwarzem Grund. currentColor ist die Schriftfarbe und
 * hebt sich vom Hintergrund per Definition ab; ein Schleier daraus ist immer sichtbar.
 */
@supports (color: color-mix(in srgb, currentColor 20%, transparent)) {
	.trs-block {
		--trs-rand: color-mix(in srgb, currentColor 24%, transparent);
		--trs-gedaempft: color-mix(in srgb, currentColor 62%, transparent);
	}
}

.trs-titel { margin: 0 0 .75rem; }
.trs-klein { font-size: .85em; color: var(--trs-gedaempft); }
.trs-gross { font-size: 1.1em; font-weight: 600; margin: 0 0 .35rem; }

/* ---- Hinweise ---- */
.trs-hinweis {
	border: 1px solid var(--trs-rand);
	border-left-width: 4px;
	border-radius: 6px;
	padding: .9rem 1rem;
	margin: 0 0 1rem;
}
.trs-hinweis-ok { border-left-color: var(--trs-ok); background: var(--trs-ok-flaeche); }
.trs-hinweis-fehler { border-left-color: var(--trs-fehler); background: var(--trs-fehler-flaeche); }
.trs-hinweis-warn { border-left-color: var(--trs-warn); background: var(--trs-warn-flaeche); }
.trs-hinweis p:last-child { margin-bottom: 0; }

/* ---- Formular ---- */
.trs-formular p { margin: 0 0 1rem; }
.trs-formular label { display: block; font-weight: 600; margin-bottom: .3rem; }
.trs-formular input[type="text"],
.trs-formular input[type="email"],
.trs-formular select,
.trs-formular textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .6rem .7rem;
	border: 1px solid var(--trs-rand);
	border-radius: 6px;
	font: inherit;
	color: inherit;
	background: transparent;
}
.trs-formular textarea { resize: vertical; min-height: 8rem; }
.trs-formular .trs-klein { display: block; margin-top: .25rem; font-weight: 400; }

.trs-zwei { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .trs-zwei { grid-template-columns: 1fr 1fr; } }

/* Der Honigtopf muss für Menschen unsichtbar sein, für Roboter aber ausfüllbar
   bleiben — deshalb aus dem Sichtfeld schieben statt display:none. */
.trs-honig {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.trs-knopf {
	display: inline-block;
	padding: .65rem 1.3rem;
	border: 1px solid currentColor;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
}
.trs-knopf:hover { opacity: .8; }
.trs-absenden { margin-top: 1.25rem; }
.trs-datenschutz { margin-top: .5rem; }

/* ---- Artikel-Vorschläge im Formular ---- */
.trs-vorschlaege {
	border: 1px dashed var(--trs-rand);
	border-radius: 6px;
	padding: .75rem .9rem;
	margin: 0 0 1rem;
}
.trs-vorschlaege ul { margin: .35rem 0 0; padding-left: 1.1rem; }

/* ---- Wissensdatenbank ---- */
.trs-kb-filter {
	width: 100%;
	box-sizing: border-box;
	padding: .6rem .7rem;
	border: 1px solid var(--trs-rand);
	border-radius: 6px;
	font: inherit;
	color: inherit;
	background: transparent;
}
.trs-kb-gruppe { margin-top: 1.25rem; }
.trs-kb-gruppe h3 { margin: 0 0 .4rem; font-size: 1em; text-transform: uppercase; letter-spacing: .04em; color: var(--trs-gedaempft); }
.trs-kb-gruppe ul { margin: 0; padding-left: 1.1rem; }
.trs-kb-gruppe li { margin: .2rem 0; }

/* ---- Meine Anfragen ---- */
.trs-anfragen-liste { list-style: none; margin: 0; padding: 0; }
.trs-anfrage {
	border: 1px solid var(--trs-rand);
	border-radius: 8px;
	padding: .85rem 1rem;
	margin-bottom: .6rem;
}
.trs-anfrage-neu { border-left: 4px solid var(--trs-neu); }
.trs-anfrage-kopf { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.trs-anfrage-titel { font-weight: 600; text-decoration: none; }
.trs-anfrage-zeile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.trs-nummer { font-size: .85em; opacity: .7; }

.trs-marke {
	display: inline-block;
	font-size: .78em;
	font-weight: 600;
	padding: .12rem .5rem;
	border-radius: 999px;
	border: 1px solid var(--trs-rand);
}
.trs-marke-neu { color: var(--trs-neu); background: var(--trs-neu-flaeche); border-color: transparent; }
.trs-status-closed, .trs-status-resolved { color: var(--trs-gedaempft); }
.trs-status-open, .trs-status-pending { color: var(--trs-ok); }

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	.trs-knopf { transition: none; }
}

/* Aufklappbare Artikel — in der Wissensdatenbank wie in den Vorschlägen */
.trs-kb-artikel > summary { cursor: pointer; }
.trs-kb-artikel[open] > summary { font-weight: 600; }
.trs-kb-text {
	margin: .5rem 0 .9rem;
	padding-left: .9rem;
	border-left: 2px solid var(--trs-rand);
}
.trs-kb-text > :first-child { margin-top: 0; }
.trs-kb-text > :last-child { margin-bottom: 0; }