/**
 * Verwaltung: Farbwerte, Dunkelmodus und das Anruflisten-Modul.
 *
 * Die Farben stehen hier als benannte Werte, nicht mehr fest in style.css.
 * Deshalb genügt zum Umschalten ein Attribut am Dokument — jede Regel des
 * Grund-Stylesheets folgt automatisch, statt einzeln überschrieben zu werden.
 *
 * Der helle Modus bildet exakt die bisherigen Werte ab. Wer nichts umstellt,
 * sieht nichts Neues.
 */

:root {
	--emp-grund:         #ffffff;
	--emp-flaeche:       #f5f5f5;
	--emp-flaeche-hoch:  #ffffff;
	--emp-rahmen:        #dddddd;
	--emp-rahmen-leise:  #eeeeee;
	--emp-rahmen-stark:  #cccccc;
	--emp-text:          #333333;
	--emp-text-leise:    #666666;
	--emp-text-still:    #999999;
	--emp-akzent:        #0073aa;
	--emp-akzent-dunkel: #005a87;
	--emp-akzent-grund:  #f0f7fc;
	/* Ein zweites, helleres Blau — es stand seit jeher an vielen Stellen neben
	   dem dunkleren (Wizard, Ranking, Tabellenkoepfe). Zusammenlegen haette die
	   Ansicht sichtbar veraendert, also bleibt es ein eigener Wert. */
	--emp-akzent-hell:        #48a2ea;
	--emp-akzent-hell-dunkel: #357abd;
	/* Orange als Hinweis — nicht dasselbe wie das Warngelb. */
	--emp-hinweis:       #ff9800;
	/* Messen tritt seit jeher in einem eigenen, weicheren Blau auf. Das ist
	   Absicht und bleibt so — es unterscheidet das Modul auf einen Blick. */
	--emp-messen:        #6593cd;
	--emp-messen-dunkel: #4f7bb5;
	--emp-neutral:       #6c757d;
	--emp-neutral-dunkel:#5a6268;
	/* Für Zustände, die weder gut noch schlecht sind, sondern schlicht
	   vorbei — etwa eine Anmeldung, die aus der Übersicht entfernt wurde. */
	--emp-neutral-grund: #e2e3e5;
	--emp-neutral-text:  #383d41;
	--emp-erfolg:        #28a745;
	--emp-erfolg-dunkel: #218838;
	--emp-erfolg-grund:  #d4edda;
	--emp-erfolg-text:   #155724;
	--emp-erfolg-rahmen: #c3e6cb;
	--emp-warnung:       #ffc107;
	--emp-warnung-grund: #fff3cd;
	--emp-warnung-text:  #856404;
	--emp-warnung-rahmen:#ffeeba;
	--emp-gefahr:        #dc3545;
	--emp-gefahr-dunkel: #c82333;
	--emp-gefahr-grund:  #f8d7da;
	--emp-gefahr-text:   #721c24;
	--emp-gefahr-rahmen: #f5c6cb;
	/* Schrift auf gesättigter Fläche — auf Knöpfen, Abzeichen, Kopfzeilen. */
	--emp-auf-farbe:     #ffffff;
	/* Belegungsstände der Gebetskette — die Bedeutung steckt in der Farbe,
	   nicht in einer Beschriftung, deshalb bleiben sie unterscheidbar. */
	--emp-status-frei:   #e8f5e9;
	--emp-status-teil:   #fff3e0;
	--emp-status-knapp:  #ffcdd2;
	--emp-dunkelflaeche: #000000;
	--emp-schatten:      0 2px 6px rgba(0, 0, 0, 0.1);
	/* Dünner Schleier über einer gefärbten Fläche — der Kreis um die
	   Schrittzahl im Assistenten. Hell aufhellen, dunkel abdunkeln: ein
	   weißer Schleier auf dunklem Grund rückte der Schrift so nahe, dass
	   die Zahl verschwand. */
	--emp-schleier:      rgba(255, 255, 255, 0.3);
	/* Schrift auf den Belegungskacheln. Deren Grund ist gesättigt und in
	   beiden Modi derselbe — deshalb stehen diese beiden Werte nur hier und
	   werden im Dunkelmodus bewusst NICHT überschrieben. Täte man es, stünde
	   dunkle Schrift auf sattem Rot. */
	--emp-auf-kachel:      #ffffff;
	--emp-auf-kachel-hell: #333333;
}

/*
 * Dunkelmodus. Nicht invertiert: Reines Weiß auf reinem Schwarz ermüdet,
 * deshalb ein angehobenes Grau als Grund und gedämpftes Weiß als Schrift.
 * Der Akzent wird aufgehellt, weil #0073aa auf dunklem Grund zu wenig
 * Kontrast hätte; die Schrift darauf wird dunkel statt weiß.
 * Die Signalfarben behalten ihre Bedeutung, verlieren aber an Leuchtkraft.
 */
:root[data-emp-theme="dark"] {
	--emp-grund:         #1c1f24;
	--emp-flaeche:       #24282f;
	--emp-flaeche-hoch:  #2b3038;
	--emp-rahmen:        #3a4048;
	--emp-rahmen-leise:  #2f353d;
	--emp-rahmen-stark:  #4a515b;
	--emp-text:          #e6e8ea;
	--emp-text-leise:    #a8aeb6;
	--emp-text-still:    #7d848d;
	--emp-akzent:        #4da3d4;
	--emp-akzent-dunkel: #6cb6e0;
	--emp-akzent-grund:  #1b2a35;
	--emp-akzent-hell:        #6cb6e0;
	--emp-akzent-hell-dunkel: #8ac7ea;
	--emp-hinweis:       #e8933a;
	--emp-messen:        #7fa8db;
	--emp-messen-dunkel: #96b9e4;
	--emp-neutral:       #7c848f;
	--emp-neutral-dunkel:#8d959f;
	--emp-neutral-grund: #2a2e35;
	--emp-neutral-text:  #b9c0c9;
	--emp-erfolg:        #3fb95d;
	--emp-erfolg-dunkel: #58c473;
	--emp-erfolg-grund:  #1e3a25;
	--emp-erfolg-text:   #a3e0b4;
	--emp-erfolg-rahmen: #2c5136;
	--emp-warnung:       #e0a800;
	--emp-warnung-grund: #3a2f14;
	--emp-warnung-text:  #f0d68a;
	--emp-warnung-rahmen:#52431d;
	--emp-gefahr:        #e4606d;
	--emp-gefahr-dunkel: #ef7b86;
	--emp-gefahr-grund:  #3d1f23;
	--emp-gefahr-text:   #f5b7bd;
	--emp-gefahr-rahmen: #5a2c33;
	--emp-auf-farbe:     #10131a;
	/* Gedämpft, sonst leuchten sie im Dunkeln wie Warnlampen. Der
	   Farbton bleibt, damit frei/teilweise/knapp unterscheidbar sind. */
	--emp-status-frei:   #1f2a23;
	--emp-status-teil:   #2c2a1f;
	--emp-status-knapp:  #33242a;
	--emp-dunkelflaeche: #000000;
	--emp-schatten:      0 2px 10px rgba(0, 0, 0, 0.45);
	--emp-schleier:      rgba(0, 0, 0, 0.28);
}

/* Der öffentliche Teil bringt keinen eigenen Grund mit, sondern lässt den
   Abschnitt durchscheinen, in dem er steht. Vorher stand hier der
   Seitengrund, und weil das Statusraster mitten im blauen Band der
   Startseite sitzt, lag hinter den Statusfeldern ein grauer Kasten.
   Die Schriftfarbe bleibt gesetzt — die erbte sonst das Theme. */
:root[data-emp-theme="dark"] .emp-public-wrapper,
:root[data-emp-theme="dark"] .emp-registration-standalone {
	background: transparent;
	color: var(--emp-text);
}

/* Flächen, die im Grund-Stylesheet gar keine Farbe hatten: Sie erbten die
   des Themes. Im Dunkelmodus bliebe sonst der helle Grund des Themes stehen. */
:root[data-emp-theme="dark"] .emp-dashboard,
:root[data-emp-theme="dark"] .anr-dashboard,
/* Dieselbe Lage bei den Anmeldefenstern, nur aus einem anderen Grund: Sie
   werden beim Öffnen an den Seitenkörper gehängt, damit sie über der
   Kopfleiste liegen können (empFensterFreistellen in script.js). Damit
   stehen sie außerhalb jedes Bereichs, den die Regeln sonst ansprechen —
   die Überschrift erbte die Schriftfarbe des Themes und stand mit 1,3:1
   fast unsichtbar auf dem dunklen Fenster. */
:root[data-emp-theme="dark"] .emp-modal-content,
:root[data-emp-theme="dark"] .m40-modal-content {
	color: var(--emp-text);
}
:root[data-emp-theme="dark"] .emp-modal-content h1,
:root[data-emp-theme="dark"] .emp-modal-content h2,
:root[data-emp-theme="dark"] .emp-modal-content h3,
:root[data-emp-theme="dark"] .emp-modal-content h4,
:root[data-emp-theme="dark"] .emp-modal-content label,
:root[data-emp-theme="dark"] .emp-modal-content p,
:root[data-emp-theme="dark"] .emp-modal-content strong,
:root[data-emp-theme="dark"] .m40-modal-content h1,
:root[data-emp-theme="dark"] .m40-modal-content h2,
:root[data-emp-theme="dark"] .m40-modal-content h3,
:root[data-emp-theme="dark"] .m40-modal-content h4,
:root[data-emp-theme="dark"] .m40-modal-content label,
:root[data-emp-theme="dark"] .m40-modal-content p,
:root[data-emp-theme="dark"] .m40-modal-content strong {
	color: var(--emp-text);
}

/* Der Einrichtungs-Assistent und der Startbildschirm werden VOR
   .emp-dashboard ausgegeben und stehen daher nicht darin — ohne diese
   beiden Namen bliebe dort die Schriftfarbe des Themes stehen. */
:root[data-emp-theme="dark"] .emp-wizard,
:root[data-emp-theme="dark"] .emp-fresh-start {
	background: var(--emp-grund);
	color: var(--emp-text);
}
:root[data-emp-theme="dark"] .emp-dashboard h1,
:root[data-emp-theme="dark"] .emp-dashboard h2,
:root[data-emp-theme="dark"] .emp-dashboard h3,
:root[data-emp-theme="dark"] .emp-dashboard h4,
:root[data-emp-theme="dark"] .emp-dashboard p,
:root[data-emp-theme="dark"] .emp-dashboard li,
:root[data-emp-theme="dark"] .emp-dashboard label,
:root[data-emp-theme="dark"] .emp-dashboard strong,
:root[data-emp-theme="dark"] .emp-public-wrapper h1,
:root[data-emp-theme="dark"] .emp-public-wrapper h2,
:root[data-emp-theme="dark"] .emp-public-wrapper h3,
:root[data-emp-theme="dark"] .emp-public-wrapper p,
:root[data-emp-theme="dark"] .emp-wizard h2,
:root[data-emp-theme="dark"] .emp-wizard h3,
:root[data-emp-theme="dark"] .emp-wizard p,
:root[data-emp-theme="dark"] .emp-wizard label,
:root[data-emp-theme="dark"] .emp-wizard strong,
:root[data-emp-theme="dark"] .emp-fresh-start h2,
:root[data-emp-theme="dark"] .emp-fresh-start h3,
:root[data-emp-theme="dark"] .emp-fresh-start p,
:root[data-emp-theme="dark"] .emp-fresh-start div {
	color: var(--emp-text);
}
:root[data-emp-theme="dark"] .emp-dashboard input,
:root[data-emp-theme="dark"] .emp-dashboard select,
:root[data-emp-theme="dark"] .emp-dashboard textarea {
	background: var(--emp-flaeche-hoch);
	color: var(--emp-text);
	border-color: var(--emp-rahmen-stark);
}
/* Das Kalendersymbol in Datumsfeldern ist schwarz gezeichnet und
   verschwände sonst auf dunklem Grund. */
:root[data-emp-theme="dark"] .emp-dashboard input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) opacity(0.7);
}

/* Der Umschalter Hell/Dunkel stand bis 4.7.23 auch in der Modulleiste und
   brachte hier sein Aussehen mit. Er ist entfernt, weil er neben dem Knopf in
   der Kopfleiste doppelt dastand; das Aussehen des verbliebenen Knopfes steht
   in oeffentlich.css. Nur .emp-icon bleibt — die Klasse tragen auch andere
   Zeichen im Dashboard. */

.emp-icon { width: 18px; height: 18px; display: block; }

/* ------------------------------------------------------ Anrufliste: Ansicht */

.anr-dashboard { color: var(--emp-text); }

.anr-stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.anr-stat-box {
	background: var(--emp-flaeche);
	border: 1px solid var(--emp-rahmen);
	border-radius: 6px;
	padding: 12px 18px;
	min-width: 130px;
}
.anr-stat-value { display: block; font-size: 24px; font-weight: 700; color: var(--emp-text); }
.anr-stat-label { display: block; font-size: 12px; color: var(--emp-text-leise); text-transform: uppercase; letter-spacing: 0.04em; }
.anr-stat-due .anr-stat-value { color: var(--emp-gefahr); }

/* Karten: nächste Anrufe und neuer Eintrag stehen nebeneinander, solange
   Platz ist — auf schmalen Fenstern untereinander. */
.anr-next-calls-card,
.anr-add-card {
	background: var(--emp-flaeche);
	border: 1px solid var(--emp-rahmen);
	border-radius: 6px;
	padding: 16px 18px;
	margin-bottom: 20px;
}
.anr-next-calls-card h3,
.anr-add-card h3 { margin: 0 0 12px; font-size: 16px; color: var(--emp-text); }

.anr-next-calls-list { display: grid; gap: 8px; }
.anr-next-call-item {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
	padding: 8px 10px;
	background: var(--emp-flaeche-hoch);
	border: 1px solid var(--emp-rahmen);
	border-left: 3px solid var(--emp-warnung);
	border-radius: 4px;
}
.anr-next-call-name { font-weight: 600; }
.anr-next-call-phone { color: var(--emp-text-leise); font-variant-numeric: tabular-nums; }
.anr-next-call-date { color: var(--emp-text-leise); font-size: 13px; margin-left: auto; }
.anr-next-call-item.anr-overdue { border-left-color: var(--emp-gefahr); }
.anr-next-call-item.anr-overdue .anr-next-call-date { color: var(--emp-gefahr); font-weight: 600; }

/* Formular: Beschriftung über dem Feld, mehrere Felder pro Zeile. Die alte
   Anordnung stellte jedes Feld einzeln untereinander — das erzwang viel
   Scrollen für acht Angaben. */
.anr-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; }
.anr-form-field { display: flex; flex-direction: column; gap: 4px; }
.anr-form-field-full { grid-column: 1 / -1; }
.anr-form-field label { font-size: 12px; font-weight: 600; color: var(--emp-text-leise); }
.anr-form-field input,
.anr-form-field textarea {
	padding: 8px 10px;
	border: 1px solid var(--emp-rahmen-stark);
	border-radius: 4px;
	background: var(--emp-flaeche-hoch);
	color: var(--emp-text);
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}
.anr-form-field input:focus,
.anr-form-field textarea:focus { outline: 2px solid var(--emp-akzent); outline-offset: 1px; border-color: var(--emp-akzent); }
.anr-form-actions { margin-top: 14px; }

.anr-table-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.anr-table-controls-left,
.anr-table-controls-right { display: flex; gap: 8px; align-items: center; }
.anr-search-form { display: flex; gap: 6px; }
.anr-search-input {
	padding: 8px 10px; border: 1px solid var(--emp-rahmen-stark); border-radius: 4px;
	background: var(--emp-flaeche-hoch); color: var(--emp-text); min-width: 200px;
}

.anr-table-wrapper {
	overflow: auto;
	border: 1px solid var(--emp-rahmen-stark);
	border-radius: 6px;
	background: var(--emp-grund);
}
.anr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.anr-table th, .anr-table td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--emp-rahmen);
	text-align: left;
	vertical-align: top;
}
.anr-table th {
	background: var(--emp-flaeche);
	position: sticky; top: 0; z-index: 2;
	font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
	color: var(--emp-text-leise); white-space: nowrap;
}
.anr-table tbody tr:hover { background: var(--emp-flaeche); }
.anr-table td.anr-col-tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.anr-col-cb, .anr-col-actions { width: 1%; white-space: nowrap; }
.anr-col-ratio { text-align: center; font-variant-numeric: tabular-nums; }

/* Fällige Zeilen: ein Streifen am Rand statt einer eingefärbten Fläche.
   Bei 95 von 125 fälligen Zeilen wäre die gesamte Tabelle sonst rot. */
.anr-table tr.anr-row-due td:first-child { box-shadow: inset 3px 0 0 var(--emp-gefahr); }
.anr-date-overdue { color: var(--emp-gefahr); font-weight: 600; }
.anr-date-none { color: var(--emp-text-still); }

/* Bearbeitbare Zellen zeigen erst beim Überfahren, dass sie anklickbar sind —
   eine dauerhafte Markierung auf jeder Zelle würde die Tabelle unruhig machen. */
.anr-editable { cursor: text; border-radius: 3px; }
.anr-editable:hover { background: var(--emp-flaeche); box-shadow: inset 0 0 0 1px var(--emp-rahmen-stark); }
.anr-inline-input {
	width: 100%; box-sizing: border-box; padding: 5px 7px; font-size: 14px;
	border: 1px solid var(--emp-akzent); border-radius: 3px;
	background: var(--emp-flaeche-hoch); color: var(--emp-text);
}

.anr-notizen-cell { max-width: 260px; }
.anr-notizen-preview {
	cursor: pointer; display: block; color: var(--emp-text-leise);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anr-notizen-preview:hover { color: var(--emp-akzent); }
.anr-notizen-add {
	cursor: pointer; display: inline-block; width: 22px; height: 22px; line-height: 20px;
	text-align: center; border: 1px dashed var(--emp-rahmen-stark); border-radius: 4px;
	color: var(--emp-text-still);
}
.anr-notizen-add:hover { border-color: var(--emp-akzent); color: var(--emp-akzent); }
.anr-notiz-modal-content { max-width: 560px; width: 100%; }

.anr-auto-badge { font-size: 12px; color: var(--emp-text-still); margin-left: 4px; }
.anr-reset-auto-btn, .anr-delete-btn {
	/* color gehoert dazu: ein <button> erbt die Schriftfarbe nicht, er nimmt
	   ohne Angabe die dunkle Vorgabe des Browsers. */
	background: none; border: none; color: var(--emp-text); cursor: pointer; font-size: 15px; padding: 2px 4px; opacity: 0.55;
}
.anr-reset-auto-btn:hover, .anr-delete-btn:hover { opacity: 1; }

.anr-message { padding: 10px 14px; border-radius: 4px; margin: 12px 0; display: none; }
.anr-message.emp-success { background: var(--emp-erfolg-grund); color: var(--emp-erfolg-text); border: 1px solid var(--emp-erfolg); }
.anr-message.emp-error   { background: var(--emp-gefahr-grund); color: var(--emp-gefahr-text); border: 1px solid var(--emp-gefahr); }

.anr-pagination { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.anr-page-link, .anr-page-current {
	padding: 6px 11px; border-radius: 4px; border: 1px solid var(--emp-rahmen-stark);
	text-decoration: none; color: var(--emp-text);
}
.anr-page-current { background: var(--emp-akzent); color: var(--emp-auf-farbe); border-color: var(--emp-akzent); }
.anr-page-info { color: var(--emp-text-leise); font-size: 13px; }
.anr-empty { padding: 30px; text-align: center; color: var(--emp-text-leise); }

@media (max-width: 640px) {
	.anr-table-controls { flex-direction: column; align-items: stretch; }
	.anr-search-input { min-width: 0; width: 100%; }
	.anr-table { font-size: 13px; }
}

/* ------------------------------------------------------ Anrufliste: Spalten */

.anr-col-nachname, .anr-col-vorname { font-weight: 500; }
.anr-col-date, .anr-date-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.anr-col-notizen { max-width: 260px; }
.anr-entry-cb { cursor: pointer; width: 16px; height: 16px; }
.anr-bulk-delete-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.anr-tab-active { font-weight: 600; }
.anr-form { margin: 0; }
.anr-next-call-info { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; width: 100%; }

/* --------------------------------------------------- Anrufliste: CSV-Import */

.anr-import-section { max-width: 760px; }
.anr-import-card {
	background: var(--emp-flaeche);
	border: 1px solid var(--emp-rahmen);
	border-radius: 6px;
	padding: 18px 20px;
	margin-bottom: 18px;
}
.anr-import-card h3 { margin: 0 0 10px; font-size: 16px; color: var(--emp-text); }
.anr-import-card p { color: var(--emp-text-leise); font-size: 14px; margin: 0 0 12px; }

/* Die Auswahlfläche als gestrichelter Rahmen: sie soll erkennbar etwas
   aufnehmen, nicht wie ein weiterer Knopf aussehen. */
.anr-import-upload {
	border: 2px dashed var(--emp-rahmen-stark);
	border-radius: 6px;
	padding: 22px;
	text-align: center;
	background: var(--emp-flaeche-hoch);
}
.anr-import-upload:hover { border-color: var(--emp-akzent); }
.anr-file-input { color: var(--emp-text); max-width: 100%; }

.anr-import-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.anr-csv-preview { margin-top: 16px; overflow: auto; max-height: 340px; border: 1px solid var(--emp-rahmen); border-radius: 4px; }
.anr-preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.anr-preview-table th, .anr-preview-table td {
	padding: 6px 9px; border-bottom: 1px solid var(--emp-rahmen); text-align: left; white-space: nowrap;
}
.anr-preview-table th {
	background: var(--emp-flaeche); position: sticky; top: 0;
	font-size: 11px; text-transform: uppercase; color: var(--emp-text-leise);
}

.anr-import-result { margin-top: 14px; padding: 12px 14px; border-radius: 4px; font-size: 14px; }
.anr-import-result.emp-success { background: var(--emp-erfolg-grund); color: var(--emp-erfolg-text); border: 1px solid var(--emp-erfolg); }
.anr-import-result.emp-error   { background: var(--emp-gefahr-grund); color: var(--emp-gefahr-text); border: 1px solid var(--emp-gefahr); }


/* ------------------------------------- Nachbesserungen nach Sichtprüfung */

/*
 * Der Seitengrund des Themes blieb hell, sodass die Verwaltung als dunkler
 * Kasten auf weißem Papier stand. Nur im Dunkelmodus und nur auf Seiten mit
 * Verwaltung — die öffentliche Website bleibt unberührt.
 *
 * Der Zusatz :has(...) ist es, der „nur auf Seiten mit Verwaltung" wahr
 * macht. Ohne ihn galt die Regel überall, wo dieses Stylesheet geladen wird
 * — und das ist auch die öffentliche Website, weil deren Bausteine dieselben
 * Farbvariablen brauchen. Solange die öffentliche Seite keinen Dunkelmodus
 * hatte, fiel das nicht auf; seit sie einen hat, plättete das !important
 * dort jedes Band, jede Karte und die Fußzeile auf den Seitengrund.
 * Erkannt wird die Verwaltung an ihrem eigenen Markup und nicht am
 * Kurzbefehl im Seiteninhalt: Divi legt Kurzbefehle in Code-Bausteinen
 * verschlüsselt ab, has_shortcode() findet sie dort nicht.
 */
:root[data-emp-theme="dark"] body:has( .emp-dashboard, .anr-dashboard ),
:root[data-emp-theme="dark"] body:has( .emp-dashboard, .anr-dashboard ) #page-container,
:root[data-emp-theme="dark"] body:has( .emp-dashboard, .anr-dashboard ) #main-content,
:root[data-emp-theme="dark"] body:has( .emp-dashboard, .anr-dashboard ) .et_pb_section,
:root[data-emp-theme="dark"] body:has( .emp-dashboard, .anr-dashboard ) .et_pb_row,
:root[data-emp-theme="dark"] body:has( .emp-dashboard, .anr-dashboard ) .et_pb_module {
	background-color: var(--emp-grund) !important;
}
:root[data-emp-theme="dark"] .emp-module-toggle-wrap,
:root[data-emp-theme="dark"] .emp-module-toggle {
	background: var(--emp-flaeche);
	border-radius: 6px;
}
/* Die Knöpfe des Umschalters bringen ihre Farben inzwischen selbst über
   Variablen mit — hier ist nichts mehr nachzubessern. */

/*
 * Die Kacheln der freien Messen-Tage tragen ihr Markenblau fest im
 * Stylesheet und blieben deshalb im Dunkelmodus als zwei leuchtende Karten
 * stehen. Sie werden abgedunkelt wie die Bänder der Startseite — der
 * Farbverlauf bleibt, damit die Kachel eine Kachel bleibt.
 */
:root[data-emp-theme="dark"] .m40-tile-free {
	background: linear-gradient( 135deg, #27374f, #30456a );
}

/*
 * Der Knopf darauf war fast weiß. Auf der abgedunkelten Kachel wäre er der
 * hellste Fleck der ganzen Seite gewesen. Stattdessen ein aufgehellter
 * Ausschnitt der Kachel selbst: hell genug, um als Knopf zu gelten, und
 * dunkel genug, um nicht zu blenden.
 */
:root[data-emp-theme="dark"] .m40-tile-btn {
	background: rgba( 255, 255, 255, 0.14 );
	color: var(--emp-text);
	border: 1px solid rgba( 255, 255, 255, 0.28 );
}
:root[data-emp-theme="dark"] .m40-tile-btn:hover {
	background: rgba( 255, 255, 255, 0.24 );
}

/*
 * Kopfzeilen von Tabellen: Im hellen Modus tragen sie ein kräftiges Blau,
 * das im Dunkeln grell wirkt. Gedämpft, aber weiterhin abgesetzt.
 */
:root[data-emp-theme="dark"] .m40-table th,
:root[data-emp-theme="dark"] .emp-table th,
:root[data-emp-theme="dark"] table th {
	background: var(--emp-flaeche) !important;
	color: var(--emp-text) !important;
	border-color: var(--emp-rahmen) !important;
}

/*
 * Schrift auf getönten Statusflächen: Der gedämpfte Grauton hatte darauf zu
 * wenig Kontrast. Auf Flächen mit eigener Färbung gilt die volle Textfarbe.
 */
:root[data-emp-theme="dark"] td,
:root[data-emp-theme="dark"] .m40-table td,
:root[data-emp-theme="dark"] .emp-excel-table td {
	color: var(--emp-text);
}
/*
 * Links im Dunkelmodus in der Akzentfarbe — aber nur echte Links.
 * Ausgenommen sind Anker, die als Knopf oder Reiter auftreten: die tragen
 * ihre eigene Fläche und Schrift. Die Pauschalregel ist genauer als deren
 * Klassenregeln und hatte sie überschrieben — der Knopf „Einstellungen"
 * stand dadurch blau auf blau, und alle Reiter sahen aus wie der aktive.
 */
:root[data-emp-theme="dark"] a:not([class*="button"]):not([class*="btn"]):not(.emp-settings-toggle):not(.emp-dash-tab) {
	color: var(--emp-akzent);
}


/*
 * Der Messen-Bereich trägt ein eigenes Präfix (m40-), das Anruflisten-Modul
 * ein drittes (anr-). Die Regeln oben zielten nur auf emp- und ließen die
 * Überschrift von Messen dunkelgrau auf dunklem Grund stehen.
 */
:root[data-emp-theme="dark"] .m40-dashboard,
:root[data-emp-theme="dark"] .anr-dashboard {
	background: var(--emp-grund);
	color: var(--emp-text);
}
:root[data-emp-theme="dark"] .m40-dashboard h1,
:root[data-emp-theme="dark"] .m40-dashboard h2,
:root[data-emp-theme="dark"] .m40-dashboard h3,
:root[data-emp-theme="dark"] .m40-dashboard h4,
:root[data-emp-theme="dark"] .m40-dashboard p,
:root[data-emp-theme="dark"] .m40-dashboard label,
:root[data-emp-theme="dark"] .m40-dashboard li,
:root[data-emp-theme="dark"] .anr-dashboard h1,
:root[data-emp-theme="dark"] .anr-dashboard h2,
:root[data-emp-theme="dark"] .anr-dashboard h3,
:root[data-emp-theme="dark"] .anr-dashboard p,
:root[data-emp-theme="dark"] .anr-dashboard label {
	color: var(--emp-text);
}
:root[data-emp-theme="dark"] .m40-stat-box,
:root[data-emp-theme="dark"] .m40-stat-value { color: var(--emp-text); }
:root[data-emp-theme="dark"] .m40-stat-label { color: var(--emp-text-leise); }
:root[data-emp-theme="dark"] .m40-dashboard input,
:root[data-emp-theme="dark"] .m40-dashboard select,
:root[data-emp-theme="dark"] .m40-dashboard textarea {
	background: var(--emp-flaeche-hoch);
	color: var(--emp-text);
	border-color: var(--emp-rahmen-stark);
}


/* ------------------------------------------- Kopfleiste der Website */

/*
 * Die Navigation des Themes blieb weiß, sodass über der dunklen Verwaltung
 * ein heller Balken stand. Greift nur, wo der Umschalter vorhanden ist —
 * also auf den Verwaltungsseiten, nicht auf der öffentlichen Website.
 */
:root[data-emp-theme="dark"] #main-header,
:root[data-emp-theme="dark"] #top-header,
:root[data-emp-theme="dark"] .et-fixed-header,
:root[data-emp-theme="dark"] #main-header.et-fixed-header,
:root[data-emp-theme="dark"] .et_pb_menu,
:root[data-emp-theme="dark"] .et_pb_menu__wrap,
:root[data-emp-theme="dark"] .et_pb_row--with-menu {
	background-color: var(--emp-flaeche) !important;
	box-shadow: none !important;
}
:root[data-emp-theme="dark"] #top-menu li a,
:root[data-emp-theme="dark"] #et-top-navigation a,
:root[data-emp-theme="dark"] .et_pb_menu a,
:root[data-emp-theme="dark"] #main-header .et-search-form input,
:root[data-emp-theme="dark"] #main-header .et_search_form_container input {
	color: var(--emp-text) !important;
}
:root[data-emp-theme="dark"] #top-menu li.current-menu-item > a,
:root[data-emp-theme="dark"] .et_pb_menu li.current-menu-item > a {
	color: var(--emp-akzent) !important;
}
:root[data-emp-theme="dark"] #et_top_search .et-search-field,
:root[data-emp-theme="dark"] #et_search_icon:before,
:root[data-emp-theme="dark"] .et_pb_menu .et_pb_menu__search-button:before {
	color: var(--emp-text) !important;
}
/* Untermenüs erben den hellen Grund sonst vom Theme. */
:root[data-emp-theme="dark"] #top-menu li ul.sub-menu,
:root[data-emp-theme="dark"] .et_pb_menu .sub-menu {
	background-color: var(--emp-flaeche-hoch) !important;
	border-color: var(--emp-rahmen) !important;
}

/*
 * Das Logo ist dunkle Schrift ohne eigenen Grund und verschwände auf dunkler
 * Fläche. Es kommt aus einem Theme-Builder-Kopfbereich und trägt weder Klasse
 * noch Kennung — deshalb über den Kopfbereich selbst angesprochen.
 *
 * Helligkeit umkehren, Farbton zurückdrehen: Aus Schwarz wird Weiß, aus
 * Dunkelblau ein helles Blau — das Zeichen bleibt blau, statt zur weißen
 * Silhouette zu werden. (Nur die Umkehrung allein machte aus Blau ein
 * Orange; die halbe Drehung des Farbkreises nimmt das zurück.)
 */
:root[data-emp-theme="dark"] .et-l--header img,
:root[data-emp-theme="dark"] #main-header #logo,
:root[data-emp-theme="dark"] .et_pb_menu__logo img {
	filter: invert(1) hue-rotate(180deg);
}

/*
 * Gleiches Vorgehen überall dort, wo dunkel gezeichnete Grafiken auf dunklem
 * Grund stehen: Farben erhalten, nicht auslöschen.
 */
:root[data-emp-theme="dark"] .emp-dashboard img:not([src*=".jpg"]):not([src*=".jpeg"]),
:root[data-emp-theme="dark"] .m40-dashboard img:not([src*=".jpg"]):not([src*=".jpeg"]),
:root[data-emp-theme="dark"] .anr-dashboard img:not([src*=".jpg"]):not([src*=".jpeg"]) {
	filter: invert(1) hue-rotate(180deg);
}


/*
 * Die Report-Vorschau zeigt das fertige Mail-HTML mit dessen eigenen, festen
 * Farben. Die Regeln oben faerben p, strong und td im Dunkelmodus hell — in
 * diesem Kasten stuende die Schrift damit hell auf Weiss. Deshalb hier
 * zurueck auf dunkel; die Mail bringt ihre eigenen Farben als Inline-Stil
 * mit und behaelt sie.
 */
:root[data-emp-theme="dark"] #emp-report-preview,
:root[data-emp-theme="dark"] #emp-report-preview *,
:root[data-emp-theme="dark"] #m40-report-preview,
:root[data-emp-theme="dark"] #m40-report-preview * {
	color: #333333;
}


/* ------------------------------------------------- Konten (Dateneintrag) */

/*
 * Der Bildschirm unter Verwaltung → Konten. Die Farben kommen durchweg aus den
 * Variablen oben, damit der Dunkelmodus ohne eigene Regeln mitkommt.
 */
.emp-button-klein {
	padding: 6px 12px;
	font-size: 13px;
}

.emp-konten-form {
	background: var(--emp-flaeche);
	border: 1px solid var(--emp-rahmen);
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 24px;
}

.emp-konten-rechte {
	border: 1px solid var(--emp-rahmen-leise);
	border-radius: 6px;
	padding: 12px 16px;
	margin: 8px 0 16px;
}
.emp-konten-rechte legend {
	padding: 0 6px;
	font-size: 13px;
	color: var(--emp-text-leise);
}

.emp-konten-hake {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	cursor: pointer;
}
.emp-konten-hake:last-child { margin-bottom: 0; }
.emp-konten-hake input { margin-top: 3px; flex: none; }
.emp-konten-hake .emp-hint { display: block; }
/* In der Zeile eines vorhandenen Kontos stehen die Haken nebeneinander. */
.emp-konten-hake.klein {
	display: inline-flex;
	align-items: center;
	margin: 0 14px 0 0;
	font-size: 14px;
}
.emp-konten-hake.klein input { margin-top: 0; }

.emp-konto-karte {
	border: 1px solid var(--emp-rahmen);
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 12px;
	background: var(--emp-flaeche-hoch);
}
/* Gesperrt: erkennbar, aber nicht unlesbar — die Angaben muss man noch lesen
   können, um das Konto wieder freizugeben. */
.emp-konto-karte.gesperrt {
	border-color: var(--emp-rahmen-stark);
	background: var(--emp-flaeche);
}

.emp-konto-kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 12px;
}
.emp-konto-kopf .emp-hint { margin-left: 8px; }

.emp-konto-stand {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.emp-konto-marke {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
}
.emp-konto-marke.aktiv {
	background: var(--emp-erfolg-grund);
	color: var(--emp-erfolg-text);
	border: 1px solid var(--emp-erfolg-rahmen);
}
.emp-konto-marke.gesperrt {
	background: var(--emp-gefahr-grund);
	color: var(--emp-gefahr-text);
	border: 1px solid var(--emp-gefahr);
}

.emp-konto-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}
.emp-konto-zeile:last-child { margin-bottom: 0; }
/* Die drei Formulare einer Kontozeile tragen dieselbe Klasse, damit sie selbst
   nebeneinander stehen — der Abstand nach unten gehört aber nur der Zeile.
   Sonst behielten die ersten beiden ihre 8px, das letzte nicht, und „Löschen"
   stand in der Mitte ausgerichtet 4px tiefer als der Rest. */
.emp-konto-zeile > .emp-konto-zeile { margin: 0; }
.emp-konto-zeile input[type=text] {
	padding: 6px 10px;
	font-size: 14px;
	color: var(--emp-text);
	background: var(--emp-grund);
	border: 1px solid var(--emp-rahmen);
	border-radius: 4px;
}

/* Abmelden im Umschalter — eigene Konten haben keine WordPress-Leiste, über
   die sie sonst herauskämen. */
.emp-abmelden-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-size: 14px;
	color: var(--emp-text-leise);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--emp-rahmen);
	border-radius: 4px;
}
.emp-abmelden-btn:hover {
	color: var(--emp-text);
	border-color: var(--emp-rahmen-stark);
}


/* ------------------------------------------------------------ Am Handy */

/*
 * Gearbeitet wird meist am Telefon. Zwei Regelblöcke, absichtlich getrennt:
 *
 *   (pointer: coarse)   Größe der Berührflächen. Hängt am Eingabegerät, nicht
 *                       an der Fensterbreite — ein schmales Browserfenster am
 *                       Rechner soll nicht plötzlich anders aussehen.
 *   (max-width: 782px)  Aufteilung. Hängt am Platz.
 *
 * Alle Regeln sind auf die Behälter des Dateneintrags beschränkt. Die
 * öffentliche Website gehört dem Theme und bleibt unberührt.
 */

/* Ein Rollbereich für Tabellen, die breiter sind als das Gerät. Bewusst ohne
   Rahmen und Abstand: Die Historientabelle wird zeitweise ausgeblendet, und
   ein leerer umrandeter Kasten wäre schlimmer als keiner. */
.emp-rollbereich {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (pointer: coarse) {
	/*
	 * 44 Punkte in beide Richtungen — das Maß, das Apple und Google für eine
	 * Fingerspitze nennen. Vorher waren die Knöpfe der Leiste 32 Punkte hoch;
	 * daneben zu tippen war die Regel, nicht die Ausnahme.
	 */
	:is(.emp-module-toggle, .emp-dashboard, .anr-dashboard, .emp-public-wrapper,
	    .emp-registration-standalone, .emp-wizard, .emp-fresh-start)
	:is(button, .emp-button, .emp-dash-tab, .emp-tab-btn, .emp-accordion-header,
	    .emp-settings-toggle, .emp-abmelden-btn) {
		min-height: 44px;
	}

	.emp-module-toggle .emp-module-btn,
	.emp-module-toggle .emp-abmelden-btn {
		min-height: 44px;
		min-width: 44px;
	}

	/* Etiketten und Links, die als Knopf gedacht sind, tragen von sich aus
	   keine Höhe — ohne inline-flex bliebe min-height wirkungslos. */
	:is(.emp-dashboard, .anr-dashboard, .emp-module-toggle)
	:is(a.emp-button, a.emp-dash-tab, a.emp-settings-toggle, .emp-abmelden-btn) {
		display: inline-flex;
		align-items: center;
	}

	/*
	 * Eingabefelder: 44 Punkte hoch, und mindestens 16px Schrift.
	 *
	 * Die Schriftgröße ist kein Schönheitsfehler: Unter 16px zoomt iOS beim
	 * Antippen eines Feldes selbsttätig in die Seite hinein, und danach steht
	 * die halbe Ansicht außerhalb des Bildschirms.
	 */
	:is(.emp-dashboard, .anr-dashboard, .emp-public-wrapper,
	    .emp-registration-standalone, .emp-wizard, .emp-konten)
	:is(input[type="text"], input[type="search"], input[type="email"],
	    input[type="tel"], input[type="url"], input[type="number"],
	    input[type="password"], input[type="date"], input[type="time"],
	    select, textarea) {
		min-height: 44px;
		font-size: 16px;
	}

	/* Dateiauswahl bringt ihre Höhe vom System mit. Innenabstand allein kam
	   auf 41 Punkte — drei zu wenig, gemessen am Gerät. */
	.anr-file-input,
	input[type="file"] {
		padding: 10px 0;
		min-height: 44px;
	}

	/* Kleinere Nebenknöpfe dürfen kleiner aussehen, aber nicht kleiner zu
	   treffen sein. */
	.emp-button-secondary,
	.emp-button-klein {
		min-height: 44px;
	}

	/* Kontrollkästchen werden über ihr Etikett bedient — dem Etikett Luft
	   geben, nicht dem Kästchen. */
	.emp-konten-hake {
		padding: 6px 0;
	}
}

@media (max-width: 782px) {
	/* Jede Tabelle des Dateneintrags rollt für sich, statt die Seite seitwärts
	   hinauszuschieben. */
	.emp-dashboard .emp-rollbereich,
	.anr-dashboard .emp-rollbereich {
		margin-bottom: 20px;
	}

	/* Die Leiste über allem: Am Telefon bricht sie um und steht mittig, damit
	   kein Knopf abgeschnitten wird. */
	.emp-module-toggle-wrap { justify-content: stretch; }
	.emp-module-toggle {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		gap: 6px;
	}
	.emp-module-toggle .emp-module-btn { flex: 1 1 auto; }

	/* Der Trennstrich zwischen Modulen und Verwaltung ergibt in einer
	   umgebrochenen Leiste keinen Sinn mehr. */
	.emp-module-separator { display: none; }

	/* Die Kontenliste: Was am Rechner in einer Zeile steht, gehört am Telefon
	   untereinander — sonst quetschen sich Haken, Feld und drei Knöpfe auf
	   390 Punkte. */
	.emp-konto-zeile { flex-direction: column; align-items: stretch; }
	.emp-konto-zeile > * { width: 100%; }
	.emp-konto-zeile input[type="text"] { width: 100%; }
	.emp-konten-hake.klein { margin-right: 0; }
	.emp-konto-kopf { flex-direction: column; align-items: flex-start; }
	.emp-form-row { flex-direction: column; }
}

/*
 * Als App auf dem Startbildschirm (siehe includes/webapp.php).
 *
 * Dort fehlt die Werkzeugleiste des Browsers unten. Auf Geräten mit
 * abgerundeter Anzeige liegt der untere Rand sonst im Bereich der
 * Wischleiste — env(safe-area-inset-*) hält ihn frei. Ohne App-Kennzeichen
 * greift nichts davon, im Browser bleibt alles wie es war.
 */
:root[data-emp-app="1"] body {
	padding-bottom: env(safe-area-inset-bottom, 0);
}
:root[data-emp-app="1"] .emp-dashboard,
:root[data-emp-app="1"] .anr-dashboard {
	padding-left: max(12px, env(safe-area-inset-left, 0));
	padding-right: max(12px, env(safe-area-inset-right, 0));
}

@media (pointer: coarse) {
	/*
	 * Nachbesserung nach der Messung am Gerät. Alles hier hat 44 Punkte in
	 * BEIDE Richtungen verfehlt — die Höhe stimmte schon, die Breite nicht.
	 */
	.anr-search-form .emp-button-secondary,
	.emp-button-icon {
		min-width: 44px;
	}

	/*
	 * Die Spaltenköpfe der Anrufliste sind Sortierlinks. Als reiner Text waren
	 * sie 14 Punkte hoch. Der Link füllt jetzt die Zelle aus; der negative
	 * Außenabstand nimmt den zusätzlichen Innenabstand wieder zurück, damit
	 * die Tabelle genauso aussieht wie vorher und nur die Trefferfläche
	 * wächst.
	 */
	.anr-table th a {
		display: block;
		padding: 15px 10px;
		margin: -9px -10px;
	}

	/* Blätterlinks: 32×38 war knapp daneben. */
	.anr-page-link,
	.anr-page-current {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

/* Der Kasten mit der Anmeldeadresse auf dem Kontenbildschirm. */
.emp-konten-adresse {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	background: var(--emp-akzent-grund);
	border: 1px solid var(--emp-rahmen);
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 24px;
}
.emp-konten-adresse .emp-hint { display: block; }
.emp-konten-adresse code {
	font-size: 15px;
	color: var(--emp-text);
	background: none;
	padding: 0;
	word-break: break-all;
}

/* Aufklapper mit den belegten Anmeldenamen. */
.emp-konten-belegt {
	border: 1px solid var(--emp-rahmen-leise);
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 24px;
}
.emp-konten-belegt summary {
	cursor: pointer;
	font-size: 14px;
	color: var(--emp-text-leise);
}
.emp-konten-belegt p { margin: 10px 0 0; }
.emp-konten-belegt p:last-child { color: var(--emp-text); word-break: break-word; }
@media (pointer: coarse) {
	.emp-konten-belegt summary { padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
}

/* ------------------------------------------- Vorschau der Report-E-Mail */

/*
 * Im Dunkelmodus stand hier ein großer weißer Kasten mitten in dunkler
 * Umgebung, und das sah nach Fehler aus. Er ist aber Absicht: Darin steht das
 * fertige Mail-HTML mit seinen eigenen, festen Farben. Würde er mitdunkeln,
 * stünde dunkle Schrift auf dunklem Grund — und man sähe nicht mehr, was der
 * Empfänger bekommt.
 *
 * Also bleibt er hell und sagt es jetzt auch: eine Zeile darüber, die mit dem
 * Dunkelmodus geht, und darunter das helle Blatt mit sichtbarer Kante. Damit
 * liest es sich als Vorschau und nicht als Panne.
 */
.emp-mailvorschau {
	border: 1px solid var(--emp-rahmen);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 10px;
}
.emp-mailvorschau-kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	padding: 9px 14px;
	background: var(--emp-flaeche);
	border-bottom: 1px solid var(--emp-rahmen);
	font-size: 13px;
}
.emp-mailvorschau-kopf strong { color: var(--emp-text); }
.emp-mailvorschau-kopf .emp-hint { margin: 0; }

/* Das Blatt. Feste Farben, denn es ist eine E-Mail. */
.emp-mailvorschau-blatt {
	padding: 20px;
	background: #ffffff;
	color: #333333;
}
/* Im Dunkelmodus einen Rand, damit das Blatt als Blatt liest und nicht als
   Loch in der Seite. */
:root[data-emp-theme="dark"] .emp-mailvorschau-blatt {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

/* --------------------------------------------- Netzzustand der Anrufliste */

/*
 * Telefoniert wird unterwegs, und unterwegs bricht das Netz weg. Erfasste
 * Anrufe wandern dann in eine Warteschlange (assets/js/anrufliste.js). Diese
 * Leiste ist der einzige Grund, warum man der Schlange trauen kann: Sie sagt,
 * ob etwas noch aussteht. Ohne sie sähe „gespeichert" aus wie „wartet noch".
 */
.anr-netz-anzeige {
	padding: 10px 14px;
	margin-bottom: 14px;
	border-radius: 6px;
	font-size: 14px;
	border: 1px solid transparent;
}
.anr-netz-anzeige.ohne-netz {
	background: var(--emp-warnung-grund);
	color: var(--emp-warnung-text);
	border-color: var(--emp-warnung);
}
.anr-netz-anzeige.traegt-nach {
	background: var(--emp-akzent-grund);
	color: var(--emp-text);
	border-color: var(--emp-akzent);
}

/* ── Zugang: wer darf was ───────────────────────────────────────────────────
   Eine Zeile je Person, eine Spalte je Bereich. Die Tabelle wird mit fünf
   Bereichen breiter als ein Telefon — sie scrollt deshalb in ihrem eigenen
   Rahmen, damit nicht die ganze Seite seitwärts läuft. */
.emp-zugang-tabelle-rahmen {
	overflow-x: auto;
	border: 1px solid var(--emp-rahmen);
	border-radius: 6px;
	margin: 16px 0;
}

.emp-zugang-tabelle {
	width: 100%;
	border-collapse: collapse;
	background: var(--emp-flaeche-hoch);
}

.emp-zugang-tabelle th,
.emp-zugang-tabelle td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--emp-rahmen-leise);
	text-align: left;
	vertical-align: middle;
}

.emp-zugang-tabelle thead th {
	background: var(--emp-flaeche);
	color: var(--emp-text-leise);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}

.emp-zugang-tabelle tbody tr:last-child td { border-bottom: none; }

.emp-zugang-spalte { text-align: center; width: 1%; white-space: nowrap; }

.emp-zugang-person strong { display: block; }
.emp-zugang-person .emp-hint { display: inline; margin-right: 8px; }

/* Woher der Zugang kommt — WordPress oder eigenes Konto. Steht klein unter
   dem Namen, weil es beim Vergeben selten, beim Suchen aber sofort zählt. */
.emp-zugang-art {
	display: inline-block;
	font-size: 11px;
	color: var(--emp-text-still);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.emp-zugang-admin td { background: var(--emp-akzent-grund); }
.emp-zugang-gesperrt td { opacity: .7; }

.emp-zugang-immer { color: var(--emp-erfolg); font-weight: 600; }

.emp-zugang-hake { display: inline-flex; cursor: pointer; padding: 4px; }
.emp-zugang-hake input { width: 18px; height: 18px; margin: 0; cursor: pointer; }

/* Beschriftung nur für Vorleseprogramme: In einer Kreuztabelle steht die
   Bedeutung eines Kästchens in Zeile UND Spalte — wer nur das Kästchen
   vorgelesen bekommt, weiß sonst nicht, wofür er gerade einen Haken setzt. */
.emp-zugang-nurvorleser {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.emp-zugang h3 { margin-top: 28px; }
.emp-zugang h4 { margin-top: 20px; }

@media (max-width: 600px) {
	.emp-zugang-tabelle th,
	.emp-zugang-tabelle td { padding: 8px; }
	.emp-zugang-tabelle thead th { font-size: 11px; }
}

/* ── Gekürzte Anmeldungen im Verlauf ────────────────────────────────────────
   Eine genehmigte Anmeldung kann Stunden verloren haben, ohne gelöscht zu
   sein. Die gestrichene Stunde bleibt sichtbar — sie stand einmal da, und wer
   den Verlauf liest, will genau das wissen —, aber sie darf nicht mehr wie
   eine gültige Zusage aussehen. */
.emp-stunde-weg {
	color: var(--emp-text-still);
	text-decoration-thickness: 1px;
}

.emp-gekuerzt {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 10px;
	background: var(--emp-neutral-grund);
	color: var(--emp-neutral-text);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}

/* ── Umschalter Report ⇄ Einstellungen ──────────────────────────────────────
 *
 * Der Knopf war nicht zu lesen — aus zwei verschiedenen Gründen, je nach
 * Darstellung:
 *
 * 1. HELL: Seine Fläche war die HELLE Akzentfarbe, die Schrift weiß. Das sind
 *    2,8:1 — unterhalb jeder Lesbarkeitsschwelle, unabhängig vom Theme. Die
 *    Fläche ist jetzt die kräftige Akzentfarbe: 5,2:1, überfahren 7,5:1.
 * 2. DUNKEL: Dort hätte die Farbstellung 8,3:1 ergeben. Dass es trotzdem
 *    hellblau auf hellblau stand, heißt: Die Schriftfarbe wird überschrieben.
 *    Er ist ein <a> und wird von den Link-Regeln des Themes eingefangen, die
 *    mit höherer Spezifität und teils mit !important kommen — Divi lässt sich
 *    hier nicht mit Spezifität allein schlagen. Deshalb steht die Schriftfarbe
 *    fest, ausdrücklich auch für :visited und :hover, und für das <span>
 *    darin, das sonst die Themefarbe erbt.
 */
.emp-settings-toggle,
.emp-settings-toggle:link,
.emp-settings-toggle:visited,
.emp-settings-toggle:focus,
#page-container .emp-settings-toggle,
#page-container .emp-settings-toggle:link,
#page-container .emp-settings-toggle:visited,
#page-container .emp-settings-toggle:focus {
	background: var(--emp-akzent);
	color: var(--emp-auf-farbe) !important;
}

.emp-settings-toggle:hover,
#page-container .emp-settings-toggle:hover {
	background: var(--emp-akzent-dunkel);
	color: var(--emp-auf-farbe) !important;
}

/* Das <span> im Knopf erbt sonst die Themefarbe statt der des Knopfes. */
.emp-settings-toggle span,
#page-container .emp-settings-toggle span { color: inherit !important; }

/* Trägt die Regel des Themes selbst ein !important, entscheidet unter den
   !important-Regeln wieder die Spezifität — und eine ID schlägt jede Klasse.
   Deshalb steht dieselbe Farbstellung einmal mit #page-container daneben.
   Das ist hinter dem Login nicht nachmessbar, und ein zweiter Anlauf wäre
   ein weiteres Ausrollen. */