@charset "utf-8";
/* Discord-Hinweisband (inc/discordband.php, assets/js/discordband.js). Hoehe = Knopfhoehe wie Dunkel und DE.
   Der Streifen haengt um den Eckenradius ueber das Band: die Rundung beginnt genau am Bandrand, der Schatten
   hebt ihn ab. Es gibt nur eine Groesse dafuer, den Radius. */
.btm-hat-discordband { --bandhoehe: var(--knopfhoehe); }
.btm-discord {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: stretch;
	column-gap: 1rem;
	height: var(--knopfhoehe);
	/* rechts: wo Dunkel und DE enden (gemessen von discordband.js), sonst der Kopfrand */
	padding: 0 var(--schalter-rechts, var(--rand)) 0 var(--rand);
	background: var(--moos);
	color: var(--papier);
	font-family: var(--sans);
	font-size: .8125rem;
	line-height: var(--knopfhoehe);
}
.btm-discord__satz {
	position: relative; /* haelt die unsichtbare Messkopie im Band: ohne ragt sie seitlich aus der Seite */
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.btm-discord[data-lauf] .btm-discord__satz { text-overflow: clip; }
.btm-discord__text { display: inline-block; }
.btm-discord__mass {
	position: absolute;
	visibility: hidden;
	white-space: nowrap;
	pointer-events: none;
}
.btm-discord__punkt {
	display: inline-block;
	width: .4rem;
	height: .4rem;
	margin-inline: 1.25rem;
	border-radius: 50%;
	background: var(--ocker);
	vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
	.btm-discord__lauf {
		display: inline-block;
		white-space: nowrap;
		animation: btm-discord-lauf var(--lauf-dauer, 40s) linear infinite;
		will-change: transform;
	}
	.btm-discord:is(:hover, :focus-within) .btm-discord__lauf,
	.btm-discord[data-ruht] .btm-discord__lauf { animation-play-state: paused; }
	@keyframes btm-discord-lauf { to { transform: translateX(-50%); } }
}
/* Reduzierte Bewegung und der Satz passt nicht: das Band wird hoeher und bricht um, nichts laeuft. */
.btm-discord[data-umbruch] { height: auto; min-height: var(--knopfhoehe); }
.btm-discord[data-umbruch] .btm-discord__satz {
	padding-block: .5rem;
	white-space: normal;
	line-height: 1.35;
}
.btm-discord__tanzaku {
	flex: none;
	align-self: stretch;
	margin-bottom: calc(-1 * var(--radius-feld));
	padding: 0 1.25rem var(--radius-feld);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--ocker);
	color: var(--auf-ocker);
	border-radius: 0 0 var(--radius-feld) var(--radius-feld);
	filter: drop-shadow(0 2px 1.5px color-mix(in srgb, var(--schleierfarbe) 35%, transparent));
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1;
	text-decoration: none;
}
.btm-discord__zeichen {
	font-family: var(--sans-ja);
	font-size: 1.0625rem;
	font-weight: 500;
}
/* Unter 55rem stehen Dunkel und DE in der Namenszeile (kopf.css): der Streifen ist so breit wie beide. */
@media (max-width: 54.99rem) {
	.btm-discord__tanzaku {
		width: var(--schalter-breite, 5.75rem);
		padding-inline: 0;
		gap: .375rem;
	}
}
@media (hover: hover) {
	.btm-discord__tanzaku:hover { background: color-mix(in srgb, var(--ocker) 86%, var(--schleierfarbe)); }
}
/* Moos auf Moos trug keinen Fokusring: Papierring innen, Tinte aussen, ueber Band und Papier sichtbar. */
.btm-discord__tanzaku:focus-visible {
	outline: 2px solid var(--tinte);
	outline-offset: 4px;
	box-shadow: 0 0 0 4px var(--papier);
}
@media (forced-colors: active) {
	.btm-discord { border-bottom: 1px solid CanvasText; }
	.btm-discord__tanzaku { border: 1px solid LinkText; }
	.btm-discord__punkt { background: CanvasText; }
}