/* Elektronmods-Anpassungen für Dazzle. Wird nach global.css geladen und überschreibt dort nur gezielt. */

/* Seitenbreite 1200px statt 960px; in schmaleren Fenstern mit 20px Rand */
.main_width {
	width: 1200px;
	max-width: calc(100% - 40px);
}

/* Header ohne obere Leiste: Logo links, Login/Register bzw. Benutzer-Links rechts daneben.
   Verlauf per CSS mit den Farben aus Dazzles header_bg.png (Zeilen 43–192). Das Bild selbst endet mit
   einer gestrichelten Linie, die bei Browser-Zoom/Retina-Skalierung an der Unterkante durchscheint. */
#header {
	height: 150px;
	background: #384958 linear-gradient(to bottom, #5e707f 0, #4d5f6e 56px, #3f5160 106px, #384958 149px);
}

.header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 92px;
}

.header-top .branding {
	display: block;
	height: auto;
	line-height: 0;
	margin: 0;
}

.header-top .logo {
	float: none;
	display: inline-block;
}

#panel {
	font-family: Arial, Sans-Serif;
	font-style: normal;
	font-size: 12px;
	text-shadow: none;
}

#panel a {
	color: #fff;
	transition: color 0.15s, background-color 0.15s;
}

/* Menüpunkte ohne Untertitel: Schrift mittig in der 58px-Leiste, Höhe wie vorher, damit die Trenner gleich bleiben */
.menu li {
	height: 48px;
}

.menu ul a:link,
.menu ul a:visited {
	margin-top: 20px;
}

/* Suche rechts in der Menüleiste. Die Leiste schneidet nicht mehr ab (Dazzle: overflow: hidden), damit das
   Dropdown unter dem Suchfeld herausragen kann; flow-root umschließt die gefloateten Menüpunkte trotzdem */
.menu {
	overflow: visible;
	display: flow-root;
}

.menu .search-box {
	position: relative;
	float: right;
	margin: 13px 15px 0 0;
}

/* Such-Button: Lupe als SVG statt Dazzles icon-sprite.png (1x-Bitmap, auf Retina-Displays verpixelt).
   Die Kurzschreibweise mit !important und höherer Spezifität überschreibt auch Dazzles background-position */
.menu .search-box .button {
	background: #353535 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M10.3 10.3l4.2 4.2' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px !important;
}

/* Dropdown unter dem Suchfeld (Link zur erweiterten Suche), aussehend wie Dazzles Benutzer-Dropdowns
   (80 % Schwarz = trans/black8.png). Eigene Klassen, weil Dazzles Script alle .user-dropdown-box gemeinsam auf- und zuklappt.
   Offen, solange Feld, Go-Button oder Link den Fokus haben; :hover hält es beim Anklicken des Links offen,
   weil Safari Links beim Klick keinen Fokus gibt und das Feld sonst schon beim Drücken der Maustaste zuklappt */
.search-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 88;
	padding: 5px;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 0 4px 4px 4px;
	font: 13px Arial, sans-serif;
	text-shadow: none;
}

.search-dropdown::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 10px;
	border: 5px solid transparent;
	border-top: 0;
	border-bottom-color: rgba(0, 0, 0, 0.8);
}

.search-box:focus-within .search-dropdown,
.search-dropdown:hover {
	display: block;
}

.search-dropdown a:link,
.search-dropdown a:visited {
	display: block;
	padding: 10px;
	background: #fff;
	color: #555;
	text-decoration: none;
}

.search-dropdown a:hover,
.search-dropdown a:focus {
	background: #f5f5f5;
	color: #222;
}

/* Dropdowns öffnen nach links, damit sie nicht über den rechten Rand ragen */
#panel .user-dropdown-box {
	left: auto;
	right: -5px;
	border-radius: 4px 0 4px 4px;
}

#panel .user-dropdown-box::before {
	left: auto;
	right: 10px;
}

/* Beim Quick-Login würde der Pfeil auf Register statt Login zeigen */
#quick_login .user-dropdown-box {
	border-radius: 4px;
}

#quick_login .user-dropdown-box::before {
	display: none;
}

#panel .loginlink:hover {
	color: #d7e1ea;
}

/* Register-Button: flach und modern statt Verlauf und Schatten */
#panel .registerlink {
	background: #8db318;
	color: #fff;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 4px;
	box-shadow: none;
	text-shadow: none;
}

#panel .registerlink:hover {
	background: #7a9c12;
	color: #fff;
}

/* Startseite: Pfadzeile (Breadcrumb) entfällt, sie zeigt dort nur den Forennamen.
   "index-page" setzt Dazzles index-Template am <body>. */
.index-page .navigation,
.index-page .navigation + br {
	display: none;
}

/* Pfadzeile: Trenner ">" statt Dazzles "→" (Templates nav_sep / nav_sep_active), mit mehr Abstand */
.navigation .nav-sep {
	margin: 0 6px;
	color: #999;
}

/* Forenlisten mit größerer Schrift als Dazzles 10–12px: Kategorie 12px, Forenname 16px, Beschreibung 13px
   (Unterforen, Zahlen und letzter Beitrag bei ihren eigenen Regeln weiter unten) */
table.tborder:has(td.col-forumdetails) td.thead {
	font-size: 12px;
}

.col-forumdetails > strong a {
	font-size: 16px;
}

.col-forumdetails .forumdesc {
	font-size: 13px;
	line-height: 1.4;
}

/* Forenbeschreibungen gerade statt Dazzles Kursiv (Forenliste und Kategorie-Hover) */
.forumdesc {
	font-style: normal;
}

/* Forenstatus als Drehknopf wie das "o" im Logo statt Dazzles Kästchen mit drei Punkten:
   neue Beiträge = dunkler Knopf aufgedreht, keine neuen = grauer Knopf zugedreht,
   geschlossen = Schloss, Weiterleitung = Pfeil. Als SVG direkt im CSS (je rund 300 Byte):
   keine Bilddatei, kein zusätzlicher Request, scharf auf Retina. */
.forum_status {
	width: 26px;
	height: 26px;
	background: no-repeat 0 0 / 26px 26px;
}

.forum_status.forum_on {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23485c6b'/%3E%3Ccircle cx='14' cy='14' r='8.5' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3Cpath d='M15.4 12.6l2.4-2.4' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.forum_status.forum_off {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23a3adb5'/%3E%3Ccircle cx='14' cy='14' r='8.5' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3Cpath d='M12.6 15.4l-2.4 2.4' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.forum_status.forum_offclose {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23a3adb5'/%3E%3Ccircle cx='14' cy='14' r='8.5' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3Crect x='10.5' y='13.5' width='7' height='5' rx='1' fill='%23fff'/%3E%3Cpath d='M12 13.5v-1.7a2 2 0 0 1 4 0v1.7' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
}

.forum_status.forum_offlink {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23a3adb5'/%3E%3Ccircle cx='14' cy='14' r='8.5' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3Cpath d='M11 17l6-6m-4.5 0h4.5v4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Unterforen unter dem Forennamen als kleine Karten: oben das Gerätebild, darunter der Name, darunter die nächste Ebene
   (z. B. Software | Hardware) als zusammenhängende Buttons mit feiner Trennlinie.
   Die nächste Ebene und die Bilder liefert das Plugin "Elektronmods Tweaks", ausgegeben über forumbit_subforums und forumbit_depth3. */
.subforumbox {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
}

.subforum-row {
	display: flex;
	flex-direction: column;
	background: #f2f4f6;
	border-radius: 8px;
	overflow: hidden;
	line-height: 1.3;
}

/* Gerätebild: Bildbereich mit fester Höhe, damit die Karten einer Zeile gleich aufgebaut sind;
   breite Geräte (Keys) werden auf die Kartenbreite verkleinert */
.subforum-image {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 112px;
	padding: 16px 14px 4px;
}

.subforum-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	filter: drop-shadow(0 3px 4px rgba(20, 30, 40, 0.25));
	transition: transform 0.15s;
}

.subforum-image:hover img {
	transform: translateY(-2px);
}

/* ".subforumbox" davor, damit Dazzles ".col-forumdetails a" (grau) nicht gewinnt */
.subforumbox .subforum-link {
	padding: 9px 12px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	color: #316180;
}

.subforum-children {
	display: flex;
	border-top: 1px solid #e0e5ea;
}

.subforumbox .subforum-children a {
	flex: 1;
	padding: 7px 10px;
	font-size: 13px;
	text-align: center;
	color: #6f8494;
	transition: background-color 0.15s, color 0.15s;
}

.subforumbox .subforum-children a + a {
	border-left: 1px solid #e0e5ea;
}

.subforumbox .subforum-link:hover {
	color: #1f4660;
	text-decoration: underline;
}

.subforumbox .subforum-children a:hover {
	color: #1f4660;
	background: #e6ebef;
}

/* Unterforen ohne eigene nächste Ebene (z. B. Hardware/Software direkt unter Syntakt): ein Button-Paar
   unter dem Forennamen, gestaltet wie die untere Button-Zeile der Karten (nicht fett) */
.subforumbox:not(:has(.subforum-children)) {
	display: flex;
	width: fit-content;
	gap: 0;
	background: #f2f4f6;
	border-radius: 8px;
	overflow: hidden;
}

.subforumbox:not(:has(.subforum-children)) .subforum-row {
	display: block;
	background: none;
	border-radius: 0;
	transition: background-color 0.15s;
}

/* Bilder gibt es dort nur über dem ganzen Paar, nicht in den einzelnen Buttons */
.subforumbox:not(:has(.subforum-children)) .subforum-row .subforum-image {
	display: none;
}

.subforumbox:not(:has(.subforum-children)) .subforum-row + .subforum-row {
	border-left: 1px solid #e0e5ea;
}

.subforumbox:not(:has(.subforum-children)) .subforum-link {
	display: block;
	min-width: 90px;
	padding: 7px 12px;
	font-size: 13px;
	font-weight: normal;
	text-align: center;
	color: #6f8494;
}

.subforumbox:not(:has(.subforum-children)) .subforum-row:hover {
	background: #e6ebef;
}

.subforumbox:not(:has(.subforum-children)) .subforum-link:hover {
	color: #1f4660;
	text-decoration: none;
}

/* Button-Paar mit Gerätebild (Syntakt, Tonverk; auf den Forenseiten auch die einzelnen Modelle):
   eine Karte so breit wie die übrigen, das Bild über den Buttons */
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) {
	flex-wrap: wrap;
	width: calc(50% - 4px);
}

.subforumbox > .subforum-image {
	flex: 0 0 100%;
	height: 124px;
	padding-bottom: 16px;
}

/* Basis 1px statt 0, sonst passt der erste Button noch neben das Bild in die erste Zeile */
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) .subforum-row {
	flex: 1 1 1px;
	border-top: 1px solid #e0e5ea;
}

/* Gerätekarten als Weiche Software | Hardware: Beim Überfahren wandert die Button-Zeile nach oben über die ganze Karte,
   die Trennlinie wächst mit, dann ist die linke Hälfte ein Button "Software" und die rechte "Hardware".
   Bild und Name führen nicht mehr ins Modell-Forum selbst (z. B. Digitakt I), damit dort niemand versehentlich landet;
   per Tastatur (Tab) bleibt der Name erreichbar. Am Handy öffnet ein Tippen auf die Karte das Overlay
   (cursor: pointer macht die Karte für iOS antippbar, :hover bleibt dann bis zum nächsten Tippen stehen).
   Karte mit Modellen: .subforum-row mit .subforum-children; Gerät ohne Modelle (Syntakt, Tonverk): die .subforumbox selbst. */
.subforum-row:has(> .subforum-children),
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) {
	position: relative;
	padding-bottom: 32px;
	cursor: pointer;
}

.subforum-row:has(> .subforum-children) > :is(.subforum-image, .subforum-link),
.subforumbox:not(:has(.subforum-children)) > .subforum-image {
	pointer-events: none;
}

/* Button-Zeile unten, 32px hoch (wie bisher 7px + Text + 7px + 1px Linie) */
.subforum-row > .subforum-children,
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) > .subforum-row {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
	height: 32px;
	background: #f2f4f6;
	transition: height 0.3s cubic-bezier(0.3, 0.7, 0.2, 1), background-color 0.3s;
}

.subforum-row > .subforum-children {
	right: 0;
}

.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) > .subforum-row {
	width: 50%;
}

.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) > .subforum-row + .subforum-row {
	left: 50%;
}

.subforumbox .subforum-row > .subforum-children a,
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) .subforum-link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 100%;
	padding: 0 10px;
	transition: background-color 0.15s, color 0.15s, font-size 0.3s;
}

/* Offen: Button-Zeile über die ganze Karte, Bild schimmert durch */
.subforum-row:hover > .subforum-children,
.subforum-row > .subforum-children:has(a:focus-visible),
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image):hover > .subforum-row,
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image):has(.subforum-link:focus-visible) > .subforum-row {
	height: 100%;
	border-top-color: transparent;
	background: rgba(242, 244, 246, 0.86);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.subforumbox .subforum-row:hover > .subforum-children a,
.subforumbox .subforum-row > .subforum-children:has(a:focus-visible) a,
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image):hover .subforum-link,
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image):has(.subforum-link:focus-visible) .subforum-link {
	font-size: 15px;
	font-weight: bold;
	color: #316180;
}

.subforumbox .subforum-row:hover > .subforum-children a + a,
.subforumbox .subforum-row > .subforum-children:has(a:focus-visible) a + a,
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image):hover > .subforum-row + .subforum-row,
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image):has(.subforum-link:focus-visible) > .subforum-row + .subforum-row {
	border-left-color: #cdd6de;
}

/* Die Hälfte unter der Maus (Tönung auf dem Link, die milchige Fläche darunter bleibt) */
.subforumbox .subforum-row > .subforum-children a:is(:hover, :focus-visible),
.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) .subforum-link:is(:hover, :focus-visible) {
	background: rgba(49, 97, 128, 0.12);
	color: #1f4660;
}

@media (prefers-reduced-motion: reduce) {
	.subforum-row > .subforum-children,
	.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) > .subforum-row,
	.subforumbox .subforum-row > .subforum-children a,
	.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) .subforum-link {
		transition: none;
	}
}

/* Forenliste: Themen/Beiträge als Icons (Tooltip und Screenreader-Text nennen sie),
   letzter Beitrag ab etwa der Mitte mit vollem Titel statt nach 25 Zeichen abgeschnitten */
.em-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

table.tborder td.col-postcount {
	width: 90px;
	min-width: 0;
	text-align: left;
}

/* Themen und Beiträge nebeneinander, Aufrufe darunter: zwei statt drei Zeilen. Zwischen Themen- und Beitragszahl so viel
   Luft wie zwischen den beiden Zeilen (rund 10px) */
.forum-stat {
	display: inline-block;
	font-size: 13px;
	line-height: 1.6;
}

.forum-stat:first-child {
	margin-right: 8px;
}

.forum-stat:last-child {
	display: block;
}

.forum-stat .fa {
	width: 14px;
	margin-right: 4px;
	color: #9aa8b3;
	text-align: center;
}

table.tborder td.col-lastpost {
	width: 40%;
	min-width: 0;
}

/* Grid mit minmax(0, 1fr) lässt die Tabellenzelle schmaler werden als der Titel;
   ist er länger, endet er mit "…" (voller Titel im Tooltip) */
.lastpost-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.lastpost-subject,
.lastpost-meta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lastpost-subject {
	font-size: 14px;
	font-weight: bold;
}

/* Geräte-Foren mit Karten (Elektron Hardware außer "Other Elektron Hardware"): die vier Themen mit den neuesten Beiträgen
   aus dem Forum und seinen Unterforen statt nur des letzten Beitrags. Das Plugin "Elektronmods Tweaks" setzt die Liste
   .em-recent vor MyBBs eigenen letzten Beitrag, der dann entfällt. */
.em-recent {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.em-recent ~ * {
	display: none;
}

/* Vor "by …" das Unterforum des Themas ("in Digitakt II › Software"), gesetzt wie Dazzles .postedby */
.em-recent-forum {
	font-size: 11px;
	font-weight: bold;
}

/* Themenlisten (Forenansicht, Ankündigungen, Suchergebnisse, User-CP) erkennt man am Status-Icon in der ersten Zelle.
   Titel wie die letzten Beiträge auf der Startseite: 14px fett statt Dazzles 13px, bisher nur ungelesene fett */
tr:has(> td > .thread_status) :is(.subject_new, .subject_old),
td.forumdisplay_announcement > a {
	font-size: 14px;
	font-weight: bold;
}

/* Status-Icons (neu, heiß, eigene Beiträge, geschlossen) und ihre Legende unter der Liste entfallen. Die Spalte bleibt
   mit Breite 0 stehen, sonst passen die colspans der Kopfzeilen ("Thread / Author" über drei Spalten) nicht mehr */
tr > td:has(> .thread_status) {
	width: 0;
	padding: 0;
}

tr > td > .thread_status,
div.float_left:has(> div > dl.thread_legend) {
	display: none;
}

/* Post-Icon direkt vor dem Titel: 15px Rand wie die übrigen Zellen, 10px Abstand zum Titel. Die Kopfzelle über den
   drei Spalten hat width="66%" (Suche 56%); ohne sie verteilt der Browser keine Restbreite mehr in die Icon-Spalte */
table.tborder:has(> tbody > tr > td > .thread_status) td.tcat[colspan="3"] {
	width: auto;
}

tr:has(> td > .thread_status) > td:nth-child(2) {
	width: 16px;
	padding-right: 0;
}

tr:has(> td > .thread_status) > td:nth-child(3) {
	padding-left: 10px;
}

/* Hat kein Thema der Liste ein Post-Icon, entfällt auch diese Spalte und die Titel stehen am Rand
   (nur ab 768px, am Handy fehlt die Icon-Spalte immer, siehe dort) */
@media (min-width: 768px) {
	table.tborder:has(> tbody > tr > td > .thread_status):not(:has(> tbody > tr > td:nth-child(2) > img)) tr:has(> td > .thread_status) > td:nth-child(2) {
		width: 0;
		padding: 0;
		font-size: 0;
	}

	table.tborder:has(> tbody > tr > td > .thread_status):not(:has(> tbody > tr > td:nth-child(2) > img)) tr:has(> td > .thread_status) > td:nth-child(3) {
		padding-left: 15px;
	}
}

/* Gelesen: Titel grau; ungelesene behalten das normale Blau. MyBBs grüner Pfeil "Go to first unread post" vor dem
   Titel entfällt */
tr:has(> td > .thread_status) :is(.subject_old > a, a.subject_old),
td.forumdisplay_announcement > a.subject_old {
	color: #687480;
}

tr:has(> td > .thread_status) a:has(> img[src*="jump.png"]) {
	display: none;
}

/* Geschlossen: kleines Schloss hinter dem Titel */
tr:has(> td > .thread_status[class*="close"]) :is(span.subject_new, span.subject_old, a.subject_new, a.subject_old)::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 6px;
	vertical-align: -1px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 7.2V5.1a2.8 2.8 0 0 1 5.6 0v2.1' fill='none' stroke='%238a97a2' stroke-width='1.7'/%3E%3Crect x='3' y='7' width='10' height='8' rx='1.6' fill='%238a97a2'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}

/* "Never" (noch kein Beitrag) ist im Template per Inline-Style zentriert; links wie die Titel */
table.tborder td.col-lastpost > div {
	font-size: 13px;
	text-align: left !important;
}

/* Kategorien ohne Unterforen-Karten (alle außer Elektron Hardware): Zeilen nur so hoch wie die zwei Zeilen Zahlen
   (Threads und Posts, darunter Views) plus 4px oben und unten statt Dazzles 20px (Status-Zelle 15px, dort mit !important).
   Erkannt am Inhalt statt an der Kategorie-ID, weil die fids auf bb.test und live verschieden sind.
   Nur am Desktop; am Handy gelten die Abstände der Regeln im Media Query unten. */
@media (min-width: 980px) {
	table.tborder:has(td.col-forumdetails):not(:has(.subforumbox)) td:is(.col-indicator, .col-forumdetails, .col-postcount, .col-lastpost) {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}
}

/* Find-Button unter Beiträgen entfällt: die Zahlen bei Posts/Threads neben dem Autor verlinken auf die Suche */
.postbit_buttons > a.postbit_find {
	display: none;
}

/* Report, Edit, Delete, Delete permanently, Warn und Purge Spammer nur mit Icon, alle gleich breit.
   Die Beschriftung bleibt als Tooltip (title) und für Screenreader erhalten. */
.postbit_buttons > a:is(.postbit_report, .postbit_edit, .postbit_qdelete, .postbit_purge, .postbit_warn, .postbit_purgespammer) span {
	font-size: 0;
}

.postbit_buttons > a:is(.postbit_report, .postbit_edit, .postbit_qdelete, .postbit_purge, .postbit_warn, .postbit_purgespammer) span::before {
	width: 14px;
	margin-right: 0;
	text-align: center;
}

/* Purge Spammer: Person mit x statt Warndreieck (das steht links schon für den Warning Level) */
.postbit_buttons a.postbit_purgespammer span:before {
	content: "\f235";
}

/* PM-Button steht als Brief-Icon neben dem Benutzertitel (Template postbit_classic) statt unter dem Beitrag */
.author_information a.postbit_pm {
	display: inline-block;
	margin-left: 6px;
	color: #9aa8b3;
	line-height: 1;
	text-decoration: none;
}

.author_information a.postbit_pm:hover {
	color: #1f6fcc;
}

.author_information a.postbit_pm span {
	font-size: 0;
}

.author_information a.postbit_pm span::before {
	content: "\f0e0";
	font: normal 13px/1 FontAwesome;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Der Brief steht damit für PNs (wie im Header); der Email-Button bekommt ein @, damit beide unterscheidbar bleiben */
.postbit_buttons a.postbit_email span:before {
	content: "\f1fa";
}

/* Like-Button (Plugin Post Likes) statt "Rate": Daumen-Icon, daneben die Zahl der Likes; gelikt = blau */
.postbit_buttons a.postbit_like span:before {
	content: "\f087";
}

.postbit_buttons a.postbit_like.postbit_liked span:before {
	content: "\f164";
}

.postbit_buttons > a.postbit_like.postbit_liked {
	background: #1f6fcc;
	border-color: #17569f;
}

.postbit_buttons > a.postbit_like.postbit_liked:hover {
	background: #17569f;
}

.postbit_buttons > a.postbit_like_busy {
	opacity: .6;
	cursor: progress;
}

.postlikes_count {
	font-style: normal;
}

.postlikes_count:empty {
	display: none;
}

.postbit_like .postlikes_count {
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .2);
}

/* Eigene Beiträge und Gäste: nur die Zahl, ohne Button */
.postlikes_static {
	display: inline-block;
	padding: 5px 4px;
	color: #6b7c8a;
	font-size: 12px;
	font-weight: bold;
	vertical-align: middle;
	cursor: default;
}

.postlikes_static > span {
	font-size: 0;
}

.postlikes_static > span::before {
	content: "\f164";
	font: normal 14px/1 FontAwesome;
	margin-right: 5px;
}

/* Quick Edit: "Save Changes" / "Cancel Edit" (von MyBBs jeditable ohne Klassen erzeugt) im Stil der Beitrags-Buttons */
.post_body > form > button {
	display: inline-block;
	margin: 4px 4px 0 0;
	padding: 5px 10px;
	border: 1px solid #2D4763;
	border-radius: 2px;
	background: #53748D url(../../../images/audentio/dazzle/thead.png) center center;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
	font: bold 10px/14px Arial, sans-serif;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.post_body > form > button:hover {
	opacity: .9;
	background: #29353F;
	border-color: #1A2129;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, .13);
}

.post_body > form > button::before {
	display: inline-block;
	position: relative;
	top: 1px;
	margin-right: 5px;
	font: normal 13px/1.4 FontAwesome;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.post_body > form > button[type="submit"]::before {
	content: "\f00c";
}

.post_body > form > button[type="cancel"]::before {
	content: "\f0e2";
}

/* Header: Brief (Private Messages) und Glocke (Plugin Post Likes: Likes und Antworten) als Icons,
   ungelesene Anzahl als Kreis oben rechts am Icon. Die PN-Zahl zeigt Dazzles Script erst an, wenn sie nicht 0 ist
   (Klasse .unread); die Glocke hat eine eigene Klasse, weil das Script alle .pms-unread zusammenzählt. */
#panel .em-header-icon,
#panel .postlikes-bell {
	position: relative;
	display: inline-block;
	padding: 4px 5px;
	font-size: 17px;
	line-height: 1;
	vertical-align: middle;
}

#panel .em-header-icon:hover,
#panel .postlikes-bell:hover,
#panel .postlikes-bell[aria-expanded="true"] {
	color: #d7e1ea;
}

.em-header-icon .pms-unread,
.postlikes-unread {
	position: absolute;
	top: -4px;
	right: -5px;
	min-width: 16px;
	height: 16px;
	margin: 0;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 8px;
	box-shadow: 0 0 0 2px #4d5f6e;
	font: bold 10px/16px Arial, sans-serif;
	font-style: normal;
	text-align: center;
	text-shadow: none;
	color: #fff;
}

.em-header-icon .pms-unread:not(.unread) {
	display: none;
}

/* Benutzer-Menü: eigener Avatar (22px, leicht abgerundete Ecken) statt Dazzles Zahnrad, ohne die Trennpunkte daneben */
#panel .user-dropdown {
	width: auto;
	height: auto;
	top: 0;
	margin: 0 10px 0 5px;
	background: none;
	line-height: 0;
	vertical-align: middle;
}

/* Dazzles Script gibt allen hochgeladenen Avataren die Klasse user-avatar (Rahmen und Innenabstand) */
#panel .em-header-avatar {
	display: block;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

#panel .user-dropdown:hover .em-header-avatar {
	box-shadow: 0 0 0 1px #d7e1ea;
}

#panel .user-dropdown .user-dropdown-box {
	top: 30px;
	line-height: normal;
}

.postlikes-unread {
	background: #1f6fcc;
}

/* Popup der Glocke: Likes und Antworten, Rahmen wie Dazzles Benutzer-Dropdown (80 % Schwarz),
   öffnet nach links wie die anderen Dropdowns im Panel */
.postlikes-menu {
	position: relative;
	display: inline-block;
}

.postlikes-popup {
	position: absolute;
	top: calc(100% - 6px);
	right: -5px;
	z-index: 89;
	width: 340px;
	padding: 5px;
	background: rgba(0, 0, 0, .8);
	border-radius: 4px 0 4px 4px;
	font: 13px/1.35 Arial, sans-serif;
	text-align: left;
	text-shadow: none;
}

.postlikes-popup[hidden] {
	display: none;
}

.postlikes-popup::before {
	content: "";
	position: absolute;
	top: -5px;
	right: 10px;
	border: 5px solid transparent;
	border-top: 0;
	border-bottom-color: rgba(0, 0, 0, .8);
}

.postlikes-popup-inner {
	background: #fff;
	color: #555;
}

.postlikes-popup-head {
	padding: 9px 10px;
	border-bottom: 1px solid #ddd;
	color: #333;
	font-weight: bold;
}

.postlikes-popup-list {
	max-height: min(420px, 60vh);
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.postlikes-popup-list li + li {
	border-top: 1px solid #ddd;
}

#panel .postlikes-popup-list a {
	display: block;
	padding: 9px 10px;
	color: #555;
	text-decoration: none;
}

#panel .postlikes-popup-list a:hover,
#panel .postlikes-popup-list a:focus {
	background: #f5f5f5;
}

.postlikes-popup-thread {
	display: block;
	color: #1f4f7a;
	font-weight: bold;
}

.postlikes-popup-excerpt {
	display: block;
	margin-top: 2px;
	color: #777;
}

.postlikes-popup-excerpt:empty {
	display: none;
}

.postlikes-popup-meta {
	display: block;
	margin-top: 4px;
	color: #888;
	font-size: 12px;
}

.postlikes-popup-meta::before {
	content: "\f164";
	font: normal 12px/1 FontAwesome;
	margin-right: 5px;
	color: #1f6fcc;
}

.postlikes-popup-reply .postlikes-popup-meta::before {
	content: "\f112";
}

/* noch nicht gesehen */
#panel .postlikes-popup-new a {
	background: #eef5fc;
	box-shadow: inset 3px 0 #1f6fcc;
}

#panel .postlikes-popup-new a:hover,
#panel .postlikes-popup-new a:focus {
	background: #e3eefa;
}

.postlikes-popup-meta strong {
	color: #555;
}

.postlikes-popup-none,
.postlikes-popup-status {
	padding: 12px 10px;
	color: #777;
}

.postlikes-popup-foot {
	display: flex;
	border-top: 1px solid #ddd;
}

#panel .postlikes-popup-foot a {
	flex: 1;
	padding: 9px 10px;
	color: #555;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

#panel .postlikes-popup-foot a + a {
	flex: none;
	border-left: 1px solid #ddd;
}

#panel .postlikes-popup-foot a:hover,
#panel .postlikes-popup-foot a:focus {
	background: #f5f5f5;
}

/* Seite "All notifications" (misc.php?action=notifications, Plugin Post Likes): pro Like oder Antwort eine Zeile
   mit Avatar, "X liked your post in Thema" / "X replied in Thema", Anfang des Beitrags und Datum;
   noch nicht gesehene mit Badge "New" */
.postlikes-page-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.postlikes-page-avatar {
	flex: none;
	line-height: 0;
}

.postlikes-page-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	object-fit: cover;
}

.postlikes-page-main {
	flex: 1;
	min-width: 0;
}

.postlikes-page-who {
	font-size: 14px;
}

.postlikes-page-who a {
	font-weight: bold;
}

.postlikes-page-who::before {
	content: "\f164";
	font: normal 13px/1 FontAwesome;
	margin-right: 6px;
	color: #1f6fcc;
}

.postlikes-page-reply .postlikes-page-who::before {
	content: "\f112";
}

.postlikes-page-excerpt {
	display: block;
	margin-top: 3px;
	overflow-wrap: anywhere;
}

.postlikes-page-excerpt:link,
.postlikes-page-excerpt:visited {
	color: #6b7c8a;
}

.postlikes-page-excerpt:empty {
	display: none;
}

.postlikes-page-date {
	flex: none;
	color: #888;
	font-size: 12px;
	text-align: right;
	white-space: nowrap;
}

.postlikes-page-newbadge {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 6px;
	border-radius: 8px;
	background: #1f6fcc;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
}

/* Beiträge: Autor in eigener Spalte links (Einstellung "Post Layout" = Classic), Beitrag und Buttons rechts.
   Grid statt Dazzles Floats (15 % / 79 %): feste Spaltenbreite, Hintergrund reicht bis zum Beitragsende. */
.post.classic {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	padding-top: 0;
	border-bottom: 1px solid #dde3e8;
}

.post.classic .post_author {
	grid-row: 1 / span 2;
	float: none;
	width: auto;
	margin: 0;
	padding: 20px 15px;
	border: 0;
	border-right: 1px solid #e3e8ec;
	background: #f5f7f9;
	text-align: center;
}

.post.classic .post_author div.author_avatar {
	margin: 0 0 12px;
}

.post.classic .post_author div.author_avatar img {
	max-width: 100%;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
}

.post.classic .post_author .largetext {
	font-size: 15px;
}

/* Avatare werden bis 400px hochgeladen: im Profil höchstens 200px */
td.avatar img {
	max-width: 200px;
	height: auto;
}

/* Statistik: oben die Registrierung (Icon links, Datum rechts), darunter Beiträge, Threads und Reputation
   nebeneinander mit Icon über der Zahl. Tooltip und Screenreader-Text nennen jeweils, was gezählt wird. */
.post.classic .post_author div.author_statistics {
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid #e3e8ec;
	text-align: left;
	font-size: 12px;
	color: #6f8494;
}

.author-stat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	line-height: 24px;
}

.author-stat .fa {
	width: 16px;
	font-size: 14px;
	text-align: center;
	color: #9aa8b3;
}

.author-stat a {
	font-weight: bold;
}

/* Verwarnungsstufe erst ab dem ersten Warnpunkt zeigen, 0% sagt nichts aus */
.em-warninglevel[data-warnpoints="0"] {
	display: none;
}

.author-counts {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	margin: 10px 0 4px;
	text-align: center;
}

.author-count {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	line-height: 1.2;
}

.author-count + .author-count {
	border-left: 1px solid #e3e8ec;
}

.author-count .fa {
	font-size: 15px;
	color: #9aa8b3;
}

.author-count a {
	font-size: 13px;
	font-weight: bold;
}

.post.classic .post_content {
	float: none;
	width: auto;
	padding: 14px 20px 6px;
}

.post.classic .post_controls {
	padding: 6px 20px 14px;
	border: 0;
	background: none;
}

/* User-CP-Option "Display posts in classic mode" entfällt: das Plugin setzt das Layout für alle */
tr:has(> td > #classicpostbit) {
	display: none;
}

/* Registrierung: Registration Agreement und Forenregeln als Popup statt als eigene Seite vor dem Formular.
   Die Checkbox unter "Account Details" öffnet es, erst "I Agree" setzt den Haken (Template elektronmods_register_agreement) */
.em-agreement-row label {
	cursor: pointer;
}

.modal.em-agreement-modal {
	width: 760px;
	max-width: 100%;
	border-radius: 4px;
	outline: 0;
}

.em-agreement-modal .tborder {
	border-radius: 4px;
}

.em-agreement-text {
	max-height: 60vh;
	overflow-y: auto;
	padding: 0 8px;
	font-size: 13px;
	line-height: 1.5;
}

.em-agreement-text h3 {
	margin: 22px 0 8px;
	padding-top: 18px;
	border-top: 1px solid #ddd;
	font-size: 15px;
}

.em-agreement-text h4 {
	margin: 16px 0 4px;
	font-size: 13px;
}

.em-agreement-text h4 + p {
	margin-top: 0;
}

.em-agreement-text .em-agreement-final {
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px solid #ddd;
}

.em-agreement-buttons {
	text-align: center;
}

/* Registrierung: Human Verification mittig unter beiden Spalten statt links unter "Account Details" (Template member_register).
   Feste Breite, weil das Captcha-Widget (99 %, max. 330px) in einer schrumpfenden Box zusammenfallen würde */
.em-register-captcha:empty {
	display: none;
}

.em-register-captcha > br:first-child {
	display: none;
}

.em-register-captcha fieldset {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* "Account Details" und "Account Preferences" oben bündig: Dazzles .trow1 (vertical-align: middle) schlägt valign="top" */
#registration_form td.trow1[valign="top"] {
	vertical-align: top;
}

/* Handy: die Tabellen in den Kästen bleiben Tabellen (Checkbox links neben dem Text, Email | Confirm Email nebeneinander).
   Die Regel für die User-CP-Layouttabelle (td valign=top + td valign=top, column-reverse) würde ihre Zeilen sonst umdrehen */
#content #registration_form fieldset table {
	display: table;
	width: 100%;
}

#content #registration_form fieldset table > tbody {
	display: table-row-group;
}

#content #registration_form fieldset table > tbody > tr {
	display: table-row;
}

#content #registration_form fieldset table > tbody > tr > td {
	display: table-cell;
}

/* Editor-Toolbar (SCEditor, Editor-Theme mybb.css): eigene SVG-Linien-Icons statt famfamfam.png (16px-Bitmap, auf
   Retina-Displays verpixelt), flache Gruppen mit Trennstrichen statt grauer Kästen. mybb.css wird nach dieser Datei
   geladen, daher steht überall .sceditor-container davor (höhere Spezifität). Welche Buttons es gibt und in welcher
   Reihenfolge, legt das Template codebuttons fest */
.sceditor-container div.sceditor-toolbar {
	overflow: hidden;
	padding: 4px 6px 4px 0;
	background: #f5f6f7;
	border-bottom: 1px solid #dcdfe2;
}

/* Trennstrich links an jeder Gruppe; bei der ersten Gruppe einer Zeile liegt er durch margin-left -1px außerhalb der
   Toolbar (links ohne padding) und wird abgeschnitten, auch wenn die Toolbar in schmalen Fenstern umbricht */
.sceditor-container div.sceditor-group {
	margin: 1px 5px 1px -1px;
	padding: 0 0 0 5px;
	background: none;
	border: 0;
	border-left: 1px solid #dcdfe2;
	border-radius: 0;
}

.sceditor-container .sceditor-button {
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 4px;
	border: 0;
	border-radius: 5px;
	transition: background-color .15s;
}

.sceditor-container .sceditor-button:hover {
	background: #e3e7ea;
	border: 0;
}

/* aktiv = Format an der Cursorposition eingeschaltet (z. B. fett) bzw. Quelltext-/Vollbildmodus an */
.sceditor-container .sceditor-button.active {
	background: #d8dee3;
	border: 0;
}

.sceditor-container .sceditor-button:active {
	background: #cfd6dc;
	box-shadow: none;
}

.sceditor-container .sceditor-button.disabled:hover {
	background: none;
}

.sceditor-container .sceditor-button div {
	width: 18px;
	height: 18px;
	margin: 0;
	background-position: center;
	background-size: 18px 18px;
}

.sceditor-container .sceditor-button-bold div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M7 5h5.5a3.5 3.5 0 0 1 0 7H7zM7 12h6.5a3.5 3.5 0 0 1 0 7H7z'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-italic div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 5h8M6 19h8M14 5l-4 14'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-underline div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 4v7a5 5 0 0 0 10 0V4M5 20h14'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-strike div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M16.2 6.6C15.4 5.3 13.9 4.6 12 4.6c-2.6 0-4.4 1.4-4.4 3.4 0 1.4.8 2.4 2.4 3M4 12h16M15.6 14c.6.6.9 1.3.9 2.1 0 2.1-1.9 3.4-4.5 3.4-2.1 0-3.7-.8-4.5-2.2'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-left div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M4 10h10M4 14h16M4 18h10'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-center div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M7 10h10M4 14h16M7 18h10'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-right div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M10 10h10M4 14h16M10 18h10'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-justify div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M4 10h16M4 14h16M4 18h16'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-font div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 19l6-14h2l6 14M7.6 13.5h8.8'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-size div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7V5h11v2M8.5 5v14M6.5 19h4M15 12.5V11h6v1.5M18 11v8M16.8 19h2.4'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-color div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 3.5a8.5 8.5 0 0 0 0 17c1 0 1.6-.7 1.6-1.6 0-.5-.2-.8-.5-1.2-.3-.3-.5-.7-.5-1.1 0-.9.7-1.6 1.6-1.6h1.9a4.4 4.4 0 0 0 4.4-4.4c0-3.9-3.8-7.1-8.5-7.1z'/%3E%3Ccircle cx='7.8' cy='11.2' r='1.3' fill='%23e0533d'/%3E%3Ccircle cx='10' cy='7.4' r='1.3' fill='%23e8a33d'/%3E%3Ccircle cx='14.4' cy='7.4' r='1.3' fill='%233fa35b'/%3E%3Ccircle cx='16.6' cy='11.2' r='1.3' fill='%231f6fcc'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-removeformat div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 7V5h11v2M9.5 5v14M7.5 19h4M15 14l5 5M20 14l-5 5'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-image div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.7' fill='%2346535c'/%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M21 15.5l-4.8-4.8L6 20'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-video div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' x='2.5' y='6' width='13' height='12' rx='2.5'/%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M15.5 10.5l6-3.5v10l-6-3.5'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-link div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 13.5a4.5 4.5 0 0 0 6.8.5l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.6 1.6M14 10.5a4.5 4.5 0 0 0-6.8-.5l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.6-1.6'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-unlink div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M16.5 13.5l2.1-2.1a4 4 0 0 0-5.7-5.7l-2.1 2.1M7.5 10.5l-2.1 2.1a4 4 0 0 0 5.7 5.7l2.1-2.1M8 2.5v3M2.5 8h3M16 21.5v-3M21.5 16h-3'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-emoticon div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='9'/%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8.2 14.2c.9 1.3 2.2 2 3.8 2s2.9-.7 3.8-2'/%3E%3Ccircle cx='9' cy='9.8' r='1.3' fill='%2346535c'/%3E%3Ccircle cx='15' cy='9.8' r='1.3' fill='%2346535c'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-bulletlist div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9.5 6H20M9.5 12H20M9.5 18H20'/%3E%3Ccircle cx='4.8' cy='6' r='1.5' fill='%2346535c'/%3E%3Ccircle cx='4.8' cy='12' r='1.5' fill='%2346535c'/%3E%3Ccircle cx='4.8' cy='18' r='1.5' fill='%2346535c'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-orderedlist div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 6h10M10 12h10M10 18h10'/%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 4.6l1.6-1v5.2M3.9 8.8h3.4M4 14.6c.2-.7.8-1.1 1.6-1.1.9 0 1.6.6 1.6 1.4 0 1.5-3.2 2.3-3.2 4.1h3.3'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-horizontalrule div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 12h18'/%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='.45' d='M6 6h12M6 18h12'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-code div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 7l-5 5 5 5M16 7l5 5-5 5M13.5 5l-3 14'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-quote div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2346535c' d='M4 7.5A1.5 1.5 0 0 1 5.5 6h3A1.5 1.5 0 0 1 10 7.5v3.8c0 3.4-1.8 5.9-5 6.9l-.7-1.6c1.8-.8 2.8-2.1 3-3.6H5.5A1.5 1.5 0 0 1 4 11.5zM14 7.5A1.5 1.5 0 0 1 15.5 6h3A1.5 1.5 0 0 1 20 7.5v3.8c0 3.4-1.8 5.9-5 6.9l-.7-1.6c1.8-.8 2.8-2.1 3-3.6h-1.8A1.5 1.5 0 0 1 14 11.5z'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-maximize div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E");
}

.sceditor-container .sceditor-button-source div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2346535c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 4H5v16h3M16 4h3v16h-3M13.5 8l-3 8'/%3E%3C/svg%3E");
}

/* Anfasser zum Vergrößern unten rechts */
.sceditor-container div.sceditor-grip {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='%239aa3aa' stroke-width='1.2' stroke-linecap='round' d='M9 3L3 9M9 6.5L6.5 9'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
}

/* Smilie-Box neben dem Editor (Thema, Antwort, Bearbeiten, PN, Signatur …) entfällt: alle Smilies stehen im
   Smiley-Button des Editors */
#content div:has(> table.tborder #clickable_smilies) {
	display: none;
}

/* Smiley-Button: Dropdown mit den Tabs "Smilies" (alle Forum-Smilies) und "Emojis" (System-Emojis mit Suche,
   Kategorien und zuletzt verwendeten), gebaut von jscripts/elektronmods/emoji.js. mybb.css wird später geladen und
   setzt padding/margin von div und input in Dropdowns auf 0, daher steht div.sceditor-dropdown davor */
div.sceditor-dropdown .em-picker {
	width: 332px;
	font-size: 13px;
	line-height: normal;
}

div.sceditor-dropdown .em-picker [hidden] {
	display: none !important;
}

div.sceditor-dropdown .em-picker button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

div.sceditor-dropdown .em-picker button:focus {
	outline: 0;
}

div.sceditor-dropdown .em-picker button:focus-visible {
	outline: 2px solid #1f6fcc;
	outline-offset: -2px;
}

div.sceditor-dropdown div.em-picker-tabs {
	display: flex;
	gap: 2px;
	padding: 6px 8px 0;
	border-bottom: 1px solid #dcdfe2;
}

div.sceditor-dropdown .em-picker .em-picker-tab {
	position: relative;
	padding: 7px 12px 9px;
	border-radius: 6px 6px 0 0;
	color: #687480;
	font-weight: bold;
	transition: color .15s, background-color .15s;
}

div.sceditor-dropdown .em-picker .em-picker-tab:hover {
	background: #f5f6f7;
	color: #383838;
}

div.sceditor-dropdown .em-picker .em-picker-tab[aria-selected="true"] {
	color: #383838;
}

div.sceditor-dropdown .em-picker .em-picker-tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	right: 8px;
	bottom: -1px;
	left: 8px;
	height: 2px;
	border-radius: 2px;
	background: #1f6fcc;
}

div.sceditor-dropdown .em-picker-no-smilies .em-picker-tab[data-tab="smilies"] {
	display: none;
}

div.sceditor-dropdown div.em-picker-smilies {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
	max-height: 286px;
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

div.sceditor-dropdown .em-picker .em-picker-smilie {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
}

div.sceditor-dropdown .em-picker .em-picker-smilie img {
	display: block;
	max-width: 28px;
	max-height: 28px;
	margin: 0;
}

div.sceditor-dropdown .em-picker .em-picker-smilie:hover,
div.sceditor-dropdown .em-picker .em-picker-emoji:hover {
	background: #eef1f4;
}

div.sceditor-dropdown div.em-picker-search {
	padding: 8px 8px 6px;
}

div.sceditor-dropdown div.em-picker-search input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 6px 9px;
	border: 1px solid #dcdfe2;
	border-radius: 6px;
	background: #fff;
	box-shadow: none;
	font: 13px Arial, sans-serif;
}

div.sceditor-dropdown div.em-picker-search input:focus {
	border-color: #1f6fcc;
	box-shadow: 0 0 0 1px #1f6fcc;
}

div.sceditor-dropdown div.em-picker-nav {
	display: flex;
	padding: 0 6px 4px;
	border-bottom: 1px solid #edf0f2;
}

/* Kategorie-Symbole grau, die aktuelle Kategorie farbig mit Strich darunter */
div.sceditor-dropdown .em-picker .em-picker-nav button {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 30px;
	font: 17px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
	filter: grayscale(1);
	opacity: .55;
	transition: opacity .15s, filter .15s, background-color .15s;
}

div.sceditor-dropdown .em-picker .em-picker-nav button:hover,
div.sceditor-dropdown .em-picker .em-picker-nav button.em-picker-current {
	filter: none;
	opacity: 1;
}

div.sceditor-dropdown .em-picker .em-picker-nav button:hover {
	background: #f5f6f7;
}

div.sceditor-dropdown .em-picker .em-picker-nav button.em-picker-current::after {
	content: "";
	position: absolute;
	right: 25%;
	bottom: -5px;
	left: 25%;
	height: 2px;
	border-radius: 2px;
	background: #1f6fcc;
}

div.sceditor-dropdown div.em-picker-scroll {
	position: relative;
	height: 236px;
	padding: 0 6px 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

div.sceditor-dropdown div.em-picker-heading {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 8px 4px 4px;
	background: #fff;
	color: #687480;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: .04em;
	text-transform: uppercase;
}

div.sceditor-dropdown div.em-picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
}

div.sceditor-dropdown div.em-picker-results div.em-picker-grid {
	padding-top: 6px;
}

div.sceditor-dropdown .em-picker .em-picker-emoji {
	height: 34px;
	font: 22px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}

div.sceditor-dropdown div.em-picker-status {
	padding: 28px 8px;
	color: #687480;
	text-align: center;
}

/* Post-Icon-Auswahl (Thema, Antwort, Bearbeiten, PN): Icons als Kacheln statt Radio-Buttons davor, gewählt = blauer
   Rahmen. Das Radio bleibt unsichtbar im Formular (Tastatur, Screenreader); die Kachel ist das Bild direkt dahinter,
   daher geht die Markierung auch ohne :has(). Die Icons selbst sind SVGs in images/elektronmods/posticons/ */
.posticons_label {
	position: relative;
	display: inline-block;
	margin: 0 4px 4px 0;
	cursor: pointer;
	vertical-align: middle;
}

/* Reihenfolge: MyBB sortiert Post-Icons fest (absteigend) nach Namen und hat kein Sortierfeld, daher per CSS in der
   Flexbox .posticons_list (Template posticons): Question, Exclamation, Information, Bug, danach der Rest in MyBBs
   Reihenfolge */
.posticons_list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.posticons_list > .posticons_label {
	order: 5;
}

.posticons_list > .posticons_label.posticons_none {
	order: 0;
}

.posticons_list > .posticons_label:has(img[src$="/question.svg"]) {
	order: 1;
}

.posticons_list > .posticons_label:has(img[src$="/exclamation.svg"]) {
	order: 2;
}

.posticons_list > .posticons_label:has(img[src$="/information.svg"]) {
	order: 3;
}

.posticons_list > .posticons_label:has(img[src$="/bug.svg"]) {
	order: 4;
}

.posticons_label input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.posticons_label img {
	display: block;
	width: 18px;
	height: 18px;
	padding: 5px;
	border: 1px solid #dcdfe2;
	border-radius: 6px;
	background: #fff;
	transition: border-color .15s, background-color .15s;
}

.posticons_label:hover img {
	border-color: #b8c0c7;
	background: #f5f6f7;
}

.posticons_label input:checked + img {
	border-color: #1f6fcc;
	background: #e9f1fb;
	box-shadow: 0 0 0 1px #1f6fcc;
}

.posticons_label input:focus-visible + img {
	outline: 2px solid #1f6fcc;
	outline-offset: 2px;
}

/* "none" (kein Post-Icon) als Chip im selben Stil, vorne in der Icon-Reihe (Template posticons) */
.posticons_list > .posticons_none {
	padding: 6px 10px;
	border: 1px solid #dcdfe2;
	border-radius: 6px;
	background: #fff;
	color: #555;
	font-size: 12px;
	line-height: 16px;
}

.posticons_list > .posticons_none:hover {
	border-color: #b8c0c7;
	background: #f5f6f7;
}

.posticons_list > .posticons_none:has(input:checked) {
	border-color: #1f6fcc;
	background: #e9f1fb;
	box-shadow: 0 0 0 1px #1f6fcc;
	color: #1f6fcc;
}

.posticons_list > .posticons_none:has(input:focus-visible) {
	outline: 2px solid #1f6fcc;
	outline-offset: 2px;
}

/* Neues Thema, Antwort, Bearbeiten: Zeilen "Post Options" (Signature, Disable Smilies) und "Thread Subscription" ausgeblendet.
   Die Felder bleiben im Formular und senden ihre Vorgabe: Signatur, wenn im User-CP eine hinterlegt ist, Abo-Art aus den
   User-CP-Optionen. Quick Reply (gleicher Zeilenaufbau, daher form[name=input]): nur die zwei Checkboxen samt
   Zeilenumbruch dahinter; Close/Stick Thread bleiben */
form[name="input"] tr:has(> td > .smalltext > label > input[name="postoptions[signature]"]),
form[name="input"] tr:has(> td > .smalltext > label > input[name="postoptions[disablesmilies]"]),
form[name="input"] tr:has(> td > label > input[name="postoptions[subscriptionmethod]"]),
#quick_reply_form label:has(> input[name^="postoptions["]),
#quick_reply_form label:has(> input[name^="postoptions["]) + br {
	display: none;
}

/* =====================================================================
   Nachträge aus MyBB 1.8.41, die im älteren Dazzle-CSS (1.8.17) fehlen
   ===================================================================== */

/* Code wird mit echten Zeilenumbrüchen ausgegeben */
.codeblock code {
	white-space: pre;
	tab-size: 4;
}

.thread_start_datetime {
	color: #999;
}

/* Formular-Validierung, z. B. bei der Registrierung */
input.error, textarea.error, select.error {
	border: 1px solid #f30;
	color: #f30;
}

input.valid, textarea.valid, select.valid {
	border: 1px solid #0c0;
}

label.error {
	color: #f30;
	margin: 5px;
	padding: 0;
	display: block;
	font-weight: bold;
	font-size: 11px;
}

blockquote cite > span {
	float: right;
	font-weight: normal;
	font-size: 12px;
	color: #666;
}

/* Sperrstufen im ModCP */
.imminent_banned { color: #880000; }
.high_banned { color: #FF0000; }
.moderate_banned { color: #FF6600; }
.low_banned { color: #008000; }

/* Gelöschte Beiträge (für Moderatoren sichtbar) */
.deleted_post_hidden {
	border-top: 2px solid #ccc;
	padding: 15px;
}

.deleted_post_collapsed {
	border-top: 3px solid #333;
	padding: 15px;
}

.deleted_post_collapsed .show_deleted_post {
	margin-top: -15px;
}

/* "Restore" nur bei gelöschten Beiträgen, dort dafür kein Edit/Delete/Quote */
.post:not(.deleted_post) .postbit_qrestore,
.post:not(.deleted_post) .status_type,
.post.deleted_post .postbit_mirage {
	display: none;
}

/* "Delete permanently" (Plugin Purge Posts): Mülleimer-Icon, rot beim Hover; im eingeklappten
   "gelöscht"-Hinweis rechts neben "Show Post" */
.postbit_buttons a.postbit_purge span:before {
	content: "\f1f8";
}

.postbit_buttons > a.postbit_purge:hover {
	background: #b3261e;
	border-color: #8c1d17;
}

.deleted_post_collapsed .purgeposts_deleted {
	margin-top: -15px;
	margin-left: 6px;
}

/* Mod-CP-Menü "Deleted Posts" (Plugin Purge Posts): Mülleimer-Icon statt Bild aus modcp_sprite.png */
.modcp_nav_item.modcp_nav_purgeposts {
	position: relative;
	background-image: none;
}

.modcp_nav_item.modcp_nav_purgeposts::before {
	content: "\f1f8";
	position: absolute;
	top: 50%;
	left: 2px;
	transform: translateY(-50%);
	font-family: FontAwesome;
	font-size: 15px;
	line-height: 1;
	color: #6b7c8a;
}

/* =====================================================================
   Responsive
   ===================================================================== */

/* Bilder und Videos in Beiträgen nie breiter als der Beitrag */
.post_body img,
.post_body iframe,
.post_body video {
	max-width: 100%;
	height: auto;
}

/* Unter 980px: volle Breite mit 10px Rand */
@media (max-width: 979px) {
	.main_width {
		width: auto;
		max-width: none;
		margin-left: 10px;
		margin-right: 10px;
	}

	/* Forenliste: mehr Platz für die Unterforen-Karten, der letzte Beitrag wird früher mit "…" gekürzt */
	table.tborder td.col-lastpost {
		width: 28%;
	}

	form #message {
		width: 100%;
		box-sizing: border-box;
	}

	.modal {
		max-width: 90%;
		box-sizing: border-box;
	}

	/* Benutzer-Auswahlfelder (select2, z. B. Empfänger bei privaten Nachrichten) */
	#content .select2-container {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	#content .select2-search-field input {
		max-width: 100%;
	}
}

/* Handy */
@media (max-width: 767px) {
	input.textbox,
	textarea,
	select {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Header: Logo und Login bei Platzmangel untereinander; der Verlauf endet nach 149px in der Grundfarbe */
	#header {
		height: auto;
	}

	.header-top {
		height: auto;
		flex-wrap: wrap;
		gap: 6px 12px;
		padding: 14px 0;
	}

	/* 32px hoch: Logo und Login/Register passen auf 375px nebeneinander */
	.header-top .logo img {
		max-height: 32px;
		width: auto;
		height: auto;
	}

	/* bricht die Leiste unter das Logo um, bleibt sie rechtsbündig */
	#panel {
		margin-left: auto;
	}

	/* Likes-Popup an der rechten Kante der Leiste statt unter dem Link, sonst ragt es links aus dem Bild */
	#panel {
		position: relative;
	}

	.postlikes-menu {
		position: static;
	}

	.postlikes-popup {
		right: 0;
		width: min(340px, calc(100vw - 40px));
		border-radius: 4px;
	}

	.postlikes-popup::before {
		display: none;
	}

	/* Likes-Seite: Datum unter den Text statt daneben */
	.postlikes-page-row {
		flex-wrap: wrap;
	}

	.postlikes-page-date {
		flex-basis: 100%;
		padding-left: 52px;
		text-align: left;
	}

	/* Menü: Suche in eigener Zeile über die volle Breite */
	.menu {
		height: auto;
	}

	.menu ul {
		overflow: hidden;
	}

	.menu li,
	.menu li:first-child {
		padding-left: 0;
		margin-left: 0;
	}

	.menu ul a:link,
	.menu ul a:visited {
		margin: 14px 0;
		padding: 0 14px;
	}

	.menu .search-box {
		float: none;
		margin: 0 10px 10px;
	}

	.menu .search-box form {
		display: flex;
	}

	.menu .search-box .textbox {
		flex: 1;
		min-width: 0;
	}

	/* Eingabefelder in Formular-Tabellen: volle Zellenbreite statt fester Zeichenbreite (size/cols),
	   sonst kann die Tabelle nicht schmaler werden als das Feld */
	#content table input.textbox,
	#content table textarea {
		width: 100%;
	}

	/* Lange Wörter und URLs umbrechen, statt Tabellen zu verbreitern */
	#content td {
		overflow-wrap: anywhere;
	}

	/* Beiträge: Autor als kompakte Zeile über dem Beitrag (Avatar klein links, daneben Name und Statistik) */
	.post.classic {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
	}

	.post.classic .post_author {
		grid-row: auto;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 12px;
		align-items: center;
		padding: 12px;
		border-right: 0;
		border-bottom: 1px solid #e3e8ec;
		text-align: left;
	}

	/* Dazzles Clearfix-Pseudo-Elemente würden sonst Rasterzellen belegen */
	.post.classic .post_author::before,
	.post.classic .post_author::after {
		content: none;
	}

	.post.classic .post_author div.author_avatar {
		grid-row: 1 / span 2;
		margin: 0;
	}

	.post.classic .post_author div.author_avatar img {
		width: 56px;
		border-radius: 6px;
	}

	.post.classic .post_author div.author_information {
		text-align: left;
	}

	.post.classic .post_author div.author_statistics {
		display: flex;
		flex-wrap: wrap;
		gap: 0 14px;
		margin: 4px 0 0;
		padding: 0;
		border-top: 0;
	}

	/* Datum und Zähler hintereinander in einer Zeile, Icon jeweils vor dem Wert */
	.author-counts {
		display: contents;
	}

	.author-stat,
	.author-count {
		flex-direction: row;
		gap: 5px;
		line-height: 20px;
	}

	.author-count + .author-count {
		border-left: 0;
	}

	.author-count .fa {
		font-size: 14px;
	}

	.author-count a {
		font-size: inherit;
	}

	.post.classic .post_content,
	.post.classic .post_controls {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Beitrags-Buttons nur mit Icon. Die Beschriftung bleibt als Tooltip (title) und für Screenreader erhalten.
	   Nur Buttons mit Dazzle-Icon, damit Buttons von Plugins ohne Icon nicht leer werden. */
	.postbit_buttons > a:is(.postbit_find, .postbit_reputation_add, .postbit_like, .postbit_email, .postbit_website, .postbit_pm, .postbit_quote, .postbit_multiquote, .postbit_edit, .postbit_qdelete, .postbit_qrestore, .postbit_purge, .postbit_report, .postbit_warn, .postbit_purgespammer, .postbit_reply_pm, .postbit_reply_all, .postbit_forward_pm, .postbit_delete_pm) span {
		font-size: 0;
	}

	.postbit_buttons > a:is(.postbit_find, .postbit_reputation_add, .postbit_like, .postbit_email, .postbit_website, .postbit_pm, .postbit_quote, .postbit_multiquote, .postbit_edit, .postbit_qdelete, .postbit_qrestore, .postbit_purge, .postbit_report, .postbit_warn, .postbit_purgespammer, .postbit_reply_pm, .postbit_reply_all, .postbit_forward_pm, .postbit_delete_pm) span::before {
		margin-right: 0;
		font-size: 15px;
	}

	.postbit_buttons > a:is(:link, :visited, :hover, :active) {
		padding: 7px 11px;
	}

	/* Zweispaltige Formulare (Beschriftung | Feld): Beschriftung über dem Feld.
	   Tabellen mit mehr Spalten (z. B. Nachrichtenlisten) bleiben unberührt. */
	:where(#content form table.tborder:not(:has(> tbody > tr > td:nth-child(3), select[name="forums[]"]))),
	:where(#content form table.tborder:not(:has(> tbody > tr > td:nth-child(3), select[name="forums[]"]))) > :is(thead, tbody),
	:where(#content form table.tborder:not(:has(> tbody > tr > td:nth-child(3), select[name="forums[]"]))) > :is(thead, tbody) > tr,
	:where(#content form table.tborder:not(:has(> tbody > tr > td:nth-child(3), select[name="forums[]"]))) > :is(thead, tbody) > tr > td {
		display: block;
		width: auto;
	}

	#content form table.tborder:not(:has(> tbody > tr > td:nth-child(3), select[name="forums[]"])) > tbody > tr > td:first-child:not(:last-child) {
		border-bottom: 0;
		padding-bottom: 4px;
	}

	#captcha_trow table {
		width: auto !important;
	}

	/* User-CP, private Nachrichten, Mod-CP: Layout-Tabelle (Navigation | Inhalt) wird zu Inhalt, darunter Navigation */
	:where(#content table[width="100%"]:not(.tborder):has(> tbody > tr > td[valign="top"] + td[valign="top"])),
	:where(#content table[width="100%"]:not(.tborder):has(> tbody > tr > td[valign="top"] + td[valign="top"])) > tbody,
	:where(#content table[width="100%"]:not(.tborder):has(> tbody > tr > td[valign="top"] + td[valign="top"])) > tbody > tr > td {
		display: block;
		width: auto;
	}

	#content table[width="100%"]:not(.tborder):has(> tbody > tr > td[valign="top"] + td[valign="top"]) > tbody > tr {
		display: flex;
		flex-direction: column-reverse;
		gap: 15px;
	}

	/* Fallback: ist eine Tabelle darin trotzdem zu breit, scrollt nur die Inhaltsspalte seitlich */
	#content table[width="100%"]:not(.tborder):has(> tbody > tr > td[valign="top"] + td[valign="top"]) > tbody > tr > td:last-child {
		overflow-x: auto;
		min-width: 0;
	}

	/* Suche und Mitgliedersuche: Spalten fest aufteilen, Inhalte schrumpfen mit */
	table.tborder:has(select[name="forums[]"]),
	form[action="memberlist.php"] table.tborder {
		table-layout: fixed;
	}

	table.tborder:has(select[name="forums[]"]) select,
	form[action="memberlist.php"] table.tborder select {
		width: 100%;
	}

	/* Tabellen mit Foren- bzw. Threadlisten werden zu Blöcken, jede Zeile zu einer Flex-Zeile.
	   :where() hält die Spezifität niedrig, damit die Spaltenregeln darunter greifen. */
	:where(table.tborder:has(td.col-forumdetails)),
	:where(table.tborder:has(td.col-forumdetails)) > thead,
	:where(table.tborder:has(td.col-forumdetails)) > tbody,
	:where(table.tborder:has(td.col-forumdetails)) tr,
	:where(table.tborder:has(td.col-forumdetails)) td,
	:where(table.tborder:has(> tbody > tr > td > .thread_status)),
	:where(table.tborder:has(> tbody > tr > td > .thread_status)) > tbody,
	:where(table.tborder:has(> tbody > tr > td > .thread_status)) tr,
	:where(table.tborder:has(> tbody > tr > td > .thread_status)) td {
		display: block;
	}

	tr:has(> td.col-forumdetails),
	table.tborder tr:has(> td > .thread_status) {
		display: flex;
		flex-wrap: wrap;
	}

	/* Forenliste: Status | Forum, darunter der letzte Beitrag; Themen-/Beitragszahl und Spaltenköpfe entfallen.
	   "table.tborder" hebt die Spezifität über Dazzles ".index_table .trow1" (Status-Zelle dort sogar !important). */
	table.tborder:has(td.col-forumdetails) tr:has(> td.tcat),
	table.tborder td.col-postcount {
		display: none;
	}

	table.tborder td.col-indicator {
		flex: 0 0 auto;
		width: auto;
		padding-bottom: 8px !important;
	}

	table.tborder td.col-indicator,
	table.tborder td.col-forumdetails {
		border-bottom: 0;
		padding-bottom: 8px;
	}

	table.tborder td.col-forumdetails {
		flex: 1;
		min-width: 0;
	}

	table.tborder td.col-lastpost {
		flex: 0 0 100%;
		box-sizing: border-box;
		width: auto;
		min-width: 0;
		padding-top: 0;
		padding-left: 82px;
		white-space: normal !important;
		text-align: left;
	}

	/* Neueste Themen der Geräte: "in Digitakt II › Software by … vor 38 Minuten" passt nicht in eine Zeile;
	   umbrechen nur zwischen Unterforum, Autor und Zeit statt die Zeit mit "…" abzuschneiden */
	.em-recent .lastpost-meta {
		white-space: normal;
	}

	.em-recent .lastpost-meta > span {
		white-space: nowrap;
	}

	/* Threadlisten (Forum, User-CP, Abonnements, Suche) erkennt man am Status-Icon in der ersten Zelle.
	   Thema, darunter der letzte Beitrag.
	   Entfallen: Status (1, auch am Desktop), Icon (2), Antworten bzw. Forum (4), Aufrufe bzw. Antworten (5),
	   Aufrufe nach der Antworten-Zelle, Bewertung. */
	table.tborder:has(> tbody > tr > td > .thread_status) tr:has(> td.tcat),
	tr:has(> td > .thread_status) > td:first-child,
	tr:has(> td > .thread_status) > td:nth-child(2),
	tr:has(> td > .thread_status) > td:nth-child(4),
	tr:has(> td > .thread_status) > td:nth-child(5),
	tr:has(> td > .thread_status) > td:has(> a[href*="whoposted"]) + td,
	tr:has(> td > .thread_status) > td[id^="rating_table_"] {
		display: none;
	}

	/* Kopfzeile: Forenname oben, "Mark this forum read | Subscribe" darunter statt rechts daneben */
	table.tborder:has(> tbody > tr > td > .thread_status) td.thead:has(> .float_right) {
		display: flex;
		flex-direction: column-reverse;
		gap: 4px;
	}

	table.tborder:has(> tbody > tr > td > .thread_status) td.thead > .float_right {
		float: none;
	}

	tr:has(> td > .thread_status) > td:nth-child(3),
	tr:has(> td > .thread_status) > td:has(> input.checkbox) {
		border-bottom: 0;
		padding-bottom: 6px;
	}

	tr:has(> td > .thread_status) > td:nth-child(3) {
		flex: 1;
		min-width: 0;
		padding-left: 15px;
	}

	tr:has(> td > .thread_status) > td:has(a[href*="lastpost"]) {
		order: 10;
		flex: 0 0 100%;
		box-sizing: border-box;
		padding-top: 0;
		padding-left: 15px;
		white-space: normal !important;
		text-align: left !important;
	}

	tr:has(> td > .thread_status) > td:has(a[href*="lastpost"]) br {
		display: none;
	}

	/* Mitgliederliste: Letzter Besuch, Threads und Empfehlungen entfallen */
	table.tborder:has(a[href*="sort=lastvisit"]) tr > td:nth-child(4),
	table.tborder:has(a[href*="sort=lastvisit"]) tr > td:nth-child(6),
	table.tborder:has(a[href*="sort=lastvisit"]) tr > td:nth-child(7) {
		display: none;
	}

	/* Unterforen-Karten: eine pro Zeile */
	.subforumbox {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Button-Paar ohne Karte (Syntakt, Tonverk) so breit wie die Karten */
	.subforumbox:not(:has(.subforum-children)),
	.subforumbox:not(:has(.subforum-children)):has(> .subforum-image) {
		width: auto;
	}

	.subforumbox:not(:has(.subforum-children)) .subforum-row {
		flex: 1;
	}

	/* Legende unter der Forenliste: ein Eintrag pro Zeile */
	.forum_legend {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 6px 10px;
		align-items: center;
	}

	.forum_legend dt,
	.forum_legend dd {
		float: none;
		margin: 0;
	}

	/* Footer: Links und Copyright dürfen umbrechen */
	.bottommenu {
		height: auto;
		line-height: normal;
		overflow: hidden;
	}

	.bottommenu a,
	.bottommenu a:first-child {
		height: auto;
		line-height: 1.4;
		padding: 10px;
		margin: 0;
		border: 0;
	}

	.bottommenu .theme {
		float: none;
		clear: both;
		padding: 0 10px 10px;
	}

	#copyright {
		height: auto;
		line-height: 1.4;
		padding: 12px 15px;
		overflow: hidden;
	}

	#back-top {
		height: auto;
		line-height: normal;
		padding: 0 0 0 10px;
		border: 0;
	}

	#back-top i {
		top: 0;
	}
}