/*
 * WinFuture Admin-Design: gemeinsame Bausteine der ueberarbeiteten Admin-Seiten (Doku "WinFuture Admin-Design", Abschnitte 3, 4, 6 und 6a).
 *
 * Laden: $pagedata->append_css_files( '/css/admin/admin_design.css' ); in der Seiten-PHP (nicht in Vorlagen).
 * templates/baseframe.tpl.php macht daraus live https://j.wfcdn.de/c/admin/admin_design_org,<n>.css, sonst diese Datei mit ?time().
 * Die Versionsnummer <n> steht dort und fuer den mobilen Rahmen in mobile/includes/comments.php (Kommentar-Moderation).
 * Nach jeder Aenderung dieser Datei: <n> an beiden Stellen erhoehen (das CDN haelt jede Nummer dauerhaft).
 *
 * Kaskade: style.css -> diese Datei (im Kopf) -> <style> der Seite (im Body). Bei gleicher Spezifitaet gewinnt die Seite.
 * Regeln:
 * - Nur ASCII in dieser Datei (Umlaute als ae, oe, ue), damit die Kodierung der Seite keine Rolle spielt.
 * - Alles wirkt nur innerhalb von .admin_design (Wrapper der Seite; die rechte Box der Galerie-Seite traegt die Klasse selbst).
 *   Bausteine heissen admin_*; nicht .admin_link und .admin_notes_box verwenden, die gehoeren zu style.css.
 *   Ausnahmen: Rueckfrage am Knopf (Abschnitt 12), Handy-Rahmen (Abschnitt 11) und die Ecken der Code-Editoren und des
 *   Teaser-Bild-Fensters (Abschnitt 7a); diese Datei laedt nur auf den ueberarbeiteten Seiten.
 * - Seitenregeln an gemeinsamen Klassen immer mit Seitenklasse schreiben (z. B. .wgl .admin_card_head, 0,2,0),
 *   sonst verlieren sie gegen diese Datei (.admin_design .admin_card_head, ebenfalls 0,2,0, aber frueher im Dokument).
 * - Handy-Regeln nur mit .admin_design_phone am Wrapper: auf dem Handy gilt max-width 760px fuer jede Seite,
 *   auch fuer Seiten ohne Handy-Layout (Galerie-Seite, Hochladen, Artikel erstellen).
 * - Eingabefelder nur mit der Klasse admin_input (kein Element-Selektor): fremde Widgets (tagit, jQuery UI, Ace) bleiben unberuehrt.
 *   Einzige Ausnahme: die Ecken (Abschnitt 7a), damit jedes Feld der Seite 5 px hat wie admin_input.
 * - Felder mit admin_input tragen kein inputbox, Knoepfe mit admin_btn kein css_button: style.css setzt dort Hoehe, Farben und Dunkelwerte.
 * - Skript-Teile (Rueckfrage am Knopf, Meldung in der Karte, Fehler am Feld): javascript/admin_design_org.js, Gestaltung in Abschnitt 7, 8 und 12.
 *
 * @version 4 12.10.2026
 * @version 5 12.10.2026 Dunkel-Tokens und Schatten der Rueckfrage auch fuer html[data-theme="dark"] (mobiler Rahmen)
 * @version 6 12.10.2026 Abschnitt 13: Hinweis (Tooltip) an data-admin-tip und (?)-Knopf .admin_q fuer alle Admin-Seiten
 * @version 7 12.10.2026 Abschnitt 6b: getoente Knoepfe nach Bedeutung (admin_tone_*)
 * @version 8 13.10.2026 Hinweis (Tooltip) ueber allen Ebenen, auch ueber dem Fenster am Push
 * @version 16 13.10.2026 Farben leuchtender, Mittelweg zwischen Pastell und neutral (Sebastian: "leuchtender ... seitenweit einen
 *  mittelweg aus pastel und aktueller farbe", "nur admin bereich. dort aber konsequent und auch in Boxen, Tooltips, Modal windows,
 *  infos, fehlern"): Knoepfe, Flaechen, Chips und Meldungen leicht getoent, Raender und Schrift kraeftiger
 * @version 17 13.10.2026 Handy: Seitenfuss 10 px vom Rand wie der Inhalt (style.css ruckt ihn 10 px nach links, am Desktop
 *  auf die Kante von #mainWrap; im schmalen Rahmen klebte er am Bildschirmrand)
 * @version 18 13.10.2026 Eingabefelder wieder leicht hellblau in Ruhe, beim Tippen weiss (Sebastian: "Wir hatten doch Eingabefelder Blau gemacht")
 */

/* ---- 1. Tokens: hell; dunkel darunter ---- */
.admin_design {
	/* --muted 7:1 auf weiss (Kasbah 12.10.2026: "grau auf weiss oder grau auf bunt sind schlecht lesbar"; vorher #707070, 4,95:1) */
	--ink: #000; --head: #1e1e1e; --ink2: #505050; --muted: #595959;
	/* Flaechen seit 13.10.2026 (Runde 16) leicht blau getoent: Mittelweg zwischen dem Pastell bis 12.10. und dem Grau der Runde 14 */
	--line: #cdddf2; --line2: #e8f2fc; --card: #fff; --tint: #f0f5fc; --summary: #f5f8fd; --pill: #e3edfb;
	/* Zeilen mit farbigem Text: neutral grau beim Ueberfahren (hellblau auf orange sah schlecht aus) */
	--hover: #f3f4f6;
	--accent: #016cad; --link: #00438e; --strong: #18438a; --focus: #006db2;
	/* Farben des CMS-Standardknopfs .css_button */
	--btn: #2578bb; --btn_hover: #225790;
	/* gruener Speichern-Knopf der Editoren und "Jetzt live stellen" (Beschluss 11.10.2026: Speichern gruen wie "News speichern";
	   Gruen = speichern/live, Doku 1): weisse Schrift 4,6:1, Hover 7,2:1 */
	--save: #080; --save_hover: #060;
	/* Nebenknoepfe .admin_btn (Sebastian 12.10.2026: "Weiss auf weiss hebt sich kaum ab"; 13.10.2026 frueh: "weniger pastell overall ... serioesen
	   Look & Feel", 13.10.2026 Runde 16: "leuchtender", Mittelweg): leicht hellblau gefuellt, kraeftiger blauer Rand 3,7:1 gegen die Karte,
	   Schrift 8,5:1 */
	--btn_bg: #edf3fd; --btn_line: #4a86dc; --btn_bg_hover: #d9e7fb;
	/* Eingabefelder (Beschluss 10.10.2026, Variante B; Sebastian 13.10.2026 nachmittags: "Wir hatten doch Eingabefelder Blau gemacht", damit man sie besser sieht):
	   in Ruhe leicht hellblau, Rand blaugrau 3,1:1 gegen die Karte, beim Tippen weiss mit blauem Rand und Ring */
	--field: #f2f7fd; --field_line: #7894bd; --field_line_hover: #4a76b5; --field_focus: #fff; --field_focus_line: #2578bb; --field_ring: rgba( 37, 120, 187, .18 );
	--field_off: #f3f4f6; --field_off_line: #dcdfe4; --field_off_text: #8a8f96;
	/* Meldungen: Text, Flaeche, Linie, Streifen; --warn_strong ist das kraeftige Orange (Symbol eines Hinweises am Feld). Seit Runde 16
	   (13.10.2026) leicht getoente Flaeche, farbiger Rand und Streifen links; Text 5,5 bis 7,2:1 auf der Flaeche */
	--ok: #12723a; --ok_bg: #ebf7ef; --ok_line: #a9dcbc; --ok_strong: #2f9b5b;
	--err: #b3261e; --err_bg: #fdefee; --err_line: #f2bdb8; --err_strong: #e0544c;
	--warn: #7f4c00; --warn_bg: #fef4e0; --warn_line: #f0d08f; --warn_strong: #e09422;
	--info_bg: #edf3fd; --info_line: #bcd3f2;
	/* zerstoerende Aktionen: neutral, beim Ueberfahren rot (Muster "Abmelden" der Geraete-Seite); gefuellt fuer "Ja, loeschen" (5,0:1) */
	--danger: #b8231c; --danger_bg: #fdefee; --danger_line: #eaa19b; --danger_solid: #d0342c; --danger_solid_hover: #a8241f;
	--mono: Menlo, Consolas, "DejaVu Sans Mono", monospace;
	font-family: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif; color: var( --ink ); line-height: 1.4;
}
/* Dunkel: Werte der Website (Grund #121212, Text #dfe0e0, Hairline #3c4043); Flaechen leicht blau, Meldungen getoent mit farbigem Rand und Streifen */
body[data-darkmode="on"] .admin_design,
html[data-theme="dark"] .admin_design {
	--ink: #dfe0e0; --head: #eeeeee; --ink2: #b0b3b8; --muted: #adb1b7;
	--line: #3c4043; --line2: #2e3033; --card: #1e1f22; --tint: #242a32; --summary: #22272e; --pill: #2c3542; --hover: #26282b;
	--link: #dfe0e0; --strong: #dfe0e0; --focus: #6cb4ff;
	--btn_bg: #232c38; --btn_line: #4f85d0; --btn_bg_hover: #2b3646;
	/* weisse Schrift 5,0:1, Hover 6,0:1 */
	--save: #188038; --save_hover: #137333;
	--field: #232a33; --field_line: #4d6079; --field_line_hover: #6a83a3; --field_focus: #1e1f22; --field_focus_line: #5aa0dc; --field_ring: rgba( 90, 160, 220, .22 );
	--field_off: #1a1b1e; --field_off_line: #34373b; --field_off_text: #6f747a;
	--ok: #7fd69a; --ok_bg: #1c3428; --ok_line: #2f5a40; --ok_strong: #3f9f64;
	--err: #ff9a92; --err_bg: #3a2325; --err_line: #6a3431; --err_strong: #d05a52;
	--warn: #ffc766; --warn_bg: #382d1a; --warn_line: #6b5326; --warn_strong: #bf8a2a;
	--info_bg: #1d2a3a; --info_line: #34507a;
	--danger: #ff9a92; --danger_bg: #3a2325; --danger_line: #6a3431;
}

/* ---- 2. Grundregeln und Fokus ---- */
.admin_design a, .admin_design a:hover { text-decoration: none; }
.admin_design svg { display: block; flex: none; }
/* ein Fokus-Ring fuer alles, was man mit der Tastatur erreicht; Felder mit admin_input zeigen statt dessen Rand und Ring (Abschnitt 7) */
.admin_design :is( a, button, summary, input, select, textarea ):focus-visible { outline: 2px solid var( --focus ); outline-offset: 2px; }
.admin_design input[type="checkbox"], .admin_design input[type="radio"] { accent-color: var( --btn ); }

/* ---- 3. Abstand unten = Abstand links und rechts (15 px, Doku 3) ----
   Der letzte sichtbare Baustein einer Ebene bringt seine 20 px nicht mit (sonst 20 + 15 = 35 px).
   Skripte, Styles, versteckte Felder und leere Elemente dahinter zaehlen nicht (die Bilderverwaltung gibt z. B. eine leere Bildtabelle aus);
   Formulare werden eine Ebene tiefer geprueft. Ohne :has() (aeltere Browser) bleibt es bei 35 px. */
.admin_design.content_wrap { margin-bottom: 15px; }
.admin_design > :not( script, style ):not( :has( ~ :not( script, style, input[type="hidden"], :empty ) ) ),
.admin_design > form:not( :has( ~ :not( script, style, input[type="hidden"], :empty ) ) ) > :not( script, style ):not( :has( ~ :not( script, style, input[type="hidden"], :empty ) ) ) { margin-bottom: 0; }

/* ---- 4. Kopfzeile einer Arbeitsseite: Titel links, Angaben darunter, Aktion rechts ----
   Aktion oben buendig mit dem Titel: bei zweizeiligem Titel rutscht der Knopf sonst in die Mitte des Blocks */
.admin_design .admin_top { display: flex; align-items: flex-start; gap: 20px; min-height: 28px; margin: 0 0 20px 0; }
.admin_design .admin_top_t { flex: 1; min-width: 0; }
.admin_design .admin_top h1 { margin: 0; padding: 0; border: 0; background: none; color: var( --head ); font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; text-wrap: pretty; }
.admin_design .admin_top_meta { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 4px; color: var( --muted ); font-size: 13px; overflow-wrap: anywhere; }
.admin_design .admin_top_meta a { --link-color-blue: var( --link ); color: var( --link ); }
.admin_design .admin_top_meta a:hover { text-decoration: underline; }

/* ---- 5. Karte (Standard seit 10.10.2026: Kopf 11/20 px, 45 px hoch, Titel 14 px, blaue Linie, leichter Verlauf) ---- */
.admin_design .admin_card { margin: 0 0 20px 0; border: 1px solid var( --line ); border-radius: 5px; background: var( --card ); }
/* Zeilenhoehe fest, damit der Kopf auch ohne .content_wrap (Adminmenue, Zeilenhoehe 1.4) 45 px hoch ist */
.admin_design .admin_card_head { display: flex; align-items: center; gap: 10px; padding: 11px 20px; border-bottom: 1px solid rgba( 1, 108, 173, .28 ); border-radius: 5px 5px 0 0; background: var( --summary ); line-height: 1.6; white-space: nowrap; }
body[data-darkmode="on"] .admin_design .admin_card_head { background: var( --summary ); border-bottom-color: var( --line ); }
.admin_design .admin_card_title { color: var( --head ); font-size: 14px; font-weight: 700; }
.admin_design .admin_card_meta { flex: 1; min-width: 0; color: var( --muted ); font-size: 12px; text-align: right; }
.admin_design .admin_card_body { padding: 16px 20px; }
.admin_design .admin_card_foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var( --line2 ); }
/* Knopfreihe im Karteninhalt mit Hairline darueber; .admin_gap schiebt die folgenden Knoepfe nach rechts */
.admin_design .admin_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var( --line2 ); }
.admin_design .admin_gap { flex: 1; }

/* ---- 6. Knoepfe: mit Rahmen; gefuellt nur die Hauptaktion (blau, Speichern gruen); zerstoerend erst beim Ueberfahren rot ----
   Groessen (Beschluss 10.10.2026): Hauptknopf _lg 40 px / 14 px; Knoepfe in Zeilen und Werkzeugleisten _sm 32 px;
   Standard 34 px (neben einem Feld admin_input_sm); _xl 46 px nur neben dem Suchfeld. Text --strong 13 px fett.
   style_org.css faerbt Links im Dunkelmodus per !important mit var( --link-color-blue ); darum die Variable am Knopf. */
.admin_design .admin_btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; height: 34px; margin: 0; padding: 0 14px; border: 1px solid var( --btn_line ); border-radius: 5px; background: var( --btn_bg ); color: var( --strong ); font: 700 13px Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif; white-space: nowrap; text-shadow: none; box-shadow: none; cursor: pointer; --link-color-blue: var( --strong ); }
.admin_design .admin_btn:hover { border-color: var( --btn ); background: var( --btn_bg_hover ); color: var( --strong ); }
.admin_design .admin_btn_primary, .admin_design .admin_btn_primary:hover { border-color: var( --btn ); background: var( --btn ); color: #fff; --link-color-blue: #fff; }
.admin_design .admin_btn_primary:hover { border-color: var( --btn_hover ); background: var( --btn_hover ); }
/* gruen gefuellt: Speichern in Editoren (News, Video) und "Jetzt live stellen"; Groesse und Schrift wie der Hauptknopf */
.admin_design .admin_btn_save, .admin_design .admin_btn_save:hover { border-color: var( --save ); background: var( --save ); color: #fff; --link-color-blue: #fff; }
.admin_design .admin_btn_save:hover { border-color: var( --save_hover ); background: var( --save_hover ); }
.admin_design .admin_btn_danger:hover { border-color: var( --danger_line ); background: var( --danger_bg ); color: var( --danger ); --link-color-blue: var( --danger ); }
/* rot gefuellt: "Ja, loeschen" einer Rueckfrage */
.admin_design .admin_btn_solid_danger, .admin_design .admin_btn_solid_danger:hover { border-color: var( --danger_solid ); background: var( --danger_solid ); color: #fff; --link-color-blue: #fff; }
.admin_design .admin_btn_solid_danger:hover { border-color: var( --danger_solid_hover ); background: var( --danger_solid_hover ); }
.admin_design .admin_btn_sm { height: 32px; padding: 0 12px; }
.admin_design .admin_btn_lg { height: 40px; padding: 0 18px; font-size: 14px; }
.admin_design .admin_btn_xl { height: 46px; padding: 0 22px; font-size: 14px; }
.admin_design .admin_btn:disabled, .admin_design .admin_btn:disabled:hover { border-color: var( --line ); background: var( --card ); color: var( --muted ); cursor: default; --link-color-blue: var( --muted ); }

/* ---- 6b. Getoente Knoepfe nach Bedeutung (seit 12.10.2026; Sebastian: "Gleiche Farbe = gleiche Aktion. Blau bearbeiten, gruen
   weiter/speichern, rot loeschen/deaktivieren/runterstufen, usw." und "Jedes Icon sollte seine eigene, feste Farbe haben") ----
   admin_btn plus admin_tone_<farbe>: leicht getoente Flaeche, kraeftiger Rand und Text in der Farbe (Runde 16, 13.10.2026: "leuchtender",
   Mittelweg zwischen Pastell und neutral); Ueberfahren: Rand in Textfarbe, Flaeche staerker getoent. Gefuellt bleibt nur die Hauptaktion
   (admin_btn_save, admin_btn_primary).
   red: offline, loeschen, deaktivieren, auf Wartend stellen, aufheben | green: speichern, aktivieren, weiter | blue: bearbeiten
   violet: Startseiten-Push | teal: Republish | amber: Rubrik | olive: Kommentare | magenta: Vorschau | sky: kopieren.
   Text auf der Flaeche (fett 13 px) gemessen 5,5 bis 7,2:1 hell und 7,1 bis 9,0:1 dunkel, beim Ueberfahren mindestens 4,9:1; Rand mindestens
   3,3:1 gegen die Karte (WCAG 1.4.11). Die Variablen (--t_fg usw.) nutzen auch
   Symbol-Kacheln. */
.admin_design .admin_tone_red { --t_fg: #b8231c; --t_bg: #fdefee; --t_line: #e0544c; --t_bg_h: #fbdcd9; }
.admin_design .admin_tone_green { --t_fg: #12723a; --t_bg: #ebf7ef; --t_line: #2f9b5b; --t_bg_h: #d3efdd; }
.admin_design .admin_tone_blue { --t_fg: #1553b0; --t_bg: #edf3fd; --t_line: #4a86dc; --t_bg_h: #d9e7fb; }
.admin_design .admin_tone_violet { --t_fg: #5530c0; --t_bg: #f3effe; --t_line: #8a68e6; --t_bg_h: #e4dbfc; }
.admin_design .admin_tone_teal { --t_fg: #006e63; --t_bg: #e7f6f3; --t_line: #1f9a8b; --t_bg_h: #cdede7; }
.admin_design .admin_tone_amber { --t_fg: #7f4c00; --t_bg: #fef4e0; --t_line: #c27c06; --t_bg_h: #fbe5bb; }
.admin_design .admin_tone_olive { --t_fg: #566300; --t_bg: #f4f7df; --t_line: #869612; --t_bg_h: #e6edc0; }
.admin_design .admin_tone_magenta { --t_fg: #a51f70; --t_bg: #fdeff6; --t_line: #d9529e; --t_bg_h: #f9d9ea; }
.admin_design .admin_tone_sky { --t_fg: #05679a; --t_bg: #e8f5fc; --t_line: #2b93c8; --t_bg_h: #cfe9f7; }
body[data-darkmode="on"] .admin_design .admin_tone_red, html[data-theme="dark"] .admin_design .admin_tone_red { --t_fg: #ff9a92; --t_bg: #3a2325; --t_line: #d05a52; --t_bg_h: #4d2728; }
body[data-darkmode="on"] .admin_design .admin_tone_green, html[data-theme="dark"] .admin_design .admin_tone_green { --t_fg: #7fd69a; --t_bg: #1c3428; --t_line: #3f9f64; --t_bg_h: #21432f; }
body[data-darkmode="on"] .admin_design .admin_tone_blue, html[data-theme="dark"] .admin_design .admin_tone_blue { --t_fg: #9cc6ff; --t_bg: #1d3047; --t_line: #4f85d0; --t_bg_h: #223a58; }
body[data-darkmode="on"] .admin_design .admin_tone_violet, html[data-theme="dark"] .admin_design .admin_tone_violet { --t_fg: #c9b5ff; --t_bg: #2e2849; --t_line: #8366da; --t_bg_h: #3a315c; }
body[data-darkmode="on"] .admin_design .admin_tone_teal, html[data-theme="dark"] .admin_design .admin_tone_teal { --t_fg: #78dccb; --t_bg: #163533; --t_line: #2f9a8b; --t_bg_h: #1a4340; }
body[data-darkmode="on"] .admin_design .admin_tone_amber, html[data-theme="dark"] .admin_design .admin_tone_amber { --t_fg: #ffc766; --t_bg: #382d1a; --t_line: #bf8a2a; --t_bg_h: #4a3a1d; }
body[data-darkmode="on"] .admin_design .admin_tone_olive, html[data-theme="dark"] .admin_design .admin_tone_olive { --t_fg: #d2dd85; --t_bg: #2f331b; --t_line: #8a9a30; --t_bg_h: #3c4220; }
body[data-darkmode="on"] .admin_design .admin_tone_magenta, html[data-theme="dark"] .admin_design .admin_tone_magenta { --t_fg: #ffa6d6; --t_bg: #3a2232; --t_line: #c75896; --t_bg_h: #4b283e; }
body[data-darkmode="on"] .admin_design .admin_tone_sky, html[data-theme="dark"] .admin_design .admin_tone_sky { --t_fg: #88d4f5; --t_bg: #18323f; --t_line: #3b92ba; --t_bg_h: #1c3e4f; }
.admin_design .admin_btn[class*="admin_tone_"]:not( :disabled ) { border-color: var( --t_line ); background: var( --t_bg ); color: var( --t_fg ); --link-color-blue: var( --t_fg ); }
.admin_design .admin_btn[class*="admin_tone_"]:not( :disabled ):hover { border-color: var( --t_fg ); background: var( --t_bg_h ); color: var( --t_fg ); }

/* ---- 7. Eingabefelder: in Ruhe leicht hellblau, beim Tippen weiss mit blauem Rand und Ring ----
   Nur mit Klasse admin_input. Groessen: Standard 40 px, _sm 34 px (neben einem Standard-Knopf), _xl 46 px (Suche).
   Seiten setzen Breite und Sonderfaelle (Symbol im Feld) selbst; Hintergrundbilder nur mit background-image, nicht mit background.
   :where() haelt die Spezifitaet bei 0,2,0, damit Seitenregeln wie .wgd_view .admin_input (spaeter im Dokument) gewinnen. */
.admin_design .admin_input { box-sizing: border-box; height: 40px; margin: 0; padding: 0 12px; border: 1px solid var( --field_line ); border-radius: 5px; background-color: var( --field ); color: var( --head ); font: 14px Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif; box-shadow: none; outline: none; transition: border-color .15s, box-shadow .15s; }
.admin_design .admin_input_sm { height: 34px; padding: 0 10px; }
.admin_design .admin_input_xl { height: 46px; padding: 0 14px; font-size: 16px; }
.admin_design :where( textarea ).admin_input { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.admin_design :where( select ).admin_input { padding: 0 8px; }
.admin_design :where( select[size], select[multiple] ).admin_input { height: auto; padding: 4px; }
/* Listen (size/multiple): gewaehlter Eintrag weiss auf Akzent, auch mit Fokus. Chrome setzt dann die Schriftfarbe per !important im
   Browser-Stil (schwarz auf Dunkelblau, 11.10.2026); -webkit-text-fill-color malt den Text trotzdem weiss. Hintergrund als Verlauf,
   weil die Hintergrundfarbe dort ebenfalls festgelegt ist */
.admin_design :where( select[size], select[multiple] ).admin_input option:checked { background: #016cad linear-gradient( #016cad, #016cad ); color: #fff; -webkit-text-fill-color: #fff; }
body[data-darkmode="on"] .admin_design :where( select[size], select[multiple] ).admin_input option:checked { background: #2b6cb0 linear-gradient( #2b6cb0, #2b6cb0 ); color: #fff; -webkit-text-fill-color: #fff; }
.admin_design .admin_input::placeholder { color: var( --muted ); opacity: 1; }
.admin_design .admin_input:hover { border-color: var( --field_line_hover ); }
.admin_design .admin_input:focus { border-color: var( --field_focus_line ); background-color: var( --field_focus ); box-shadow: 0 0 0 3px var( --field_ring ); outline: none; }
.admin_design .admin_input:disabled { border-color: var( --field_off_line ); background-color: var( --field_off ); color: var( --field_off_text ); cursor: not-allowed; }
/* rote Raender nur bei falscher Eingabe (Doku 1, Punkt 5): die Seite oder das Skript setzt aria-invalid="true" */
.admin_design .admin_input[aria-invalid="true"] { border-color: var( --danger_solid ); }
.admin_design .admin_input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba( 201, 48, 44, .18 ); }
/* Dunkel: style.css setzt [data-darkmode="on"] input[type="text"] und textarea (Rand #dfe0e0, Flaeche #2f3136, beim Fokus hell #dfe0e0,
   transition all .3s); diese Regeln sind spezifischer */
/* ohne Transition auf background-color: Safari ( WebKit ) folgt ihr nicht, wenn nur --field wechselt ( Dunkelmodus nach dem Laden ), die Felder blieben weiss ( K-558, Test 29.10.2026 ) */
body[data-darkmode="on"] .admin_design .admin_input { border-color: var( --field_line ); background-color: var( --field ); color: var( --head ); transition: border-color .15s, box-shadow .15s; }
body[data-darkmode="on"] .admin_design .admin_input:hover { border-color: var( --field_line_hover ); }
body[data-darkmode="on"] .admin_design .admin_input:focus { border-color: var( --field_focus_line ); background-color: var( --field_focus ); color: var( --head ); box-shadow: 0 0 0 3px var( --field_ring ); }
body[data-darkmode="on"] .admin_design .admin_input:disabled { border-color: var( --field_off_line ); background-color: var( --field_off ); color: var( --field_off_text ); }
body[data-darkmode="on"] .admin_design .admin_input[aria-invalid="true"] { border-color: var( --danger ); }
body[data-darkmode="on"] .admin_design .admin_input[aria-invalid="true"]:focus { border-color: var( --danger ); box-shadow: 0 0 0 3px rgba( 242, 139, 130, .22 ); }
/* wfv4_single_input (winfuture.js, genutzt von wfv4_ajax_search mit title) setzt die Schrift inline auf #aaa (Hinweis) und #000 (Tippen);
   im Dunkelmodus war Getipptes danach schwarz auf dunkel. Diese Regeln holen die Farben zurueck */
.admin_design .admin_input[style*="color: rgb(170, 170, 170)"] { color: var( --muted ) !important; }
.admin_design .admin_input[style*="color: rgb(0, 0, 0)"] { color: var( --head ) !important; }
@media ( prefers-reduced-motion: reduce ) {
	.admin_design .admin_input, body[data-darkmode="on"] .admin_design .admin_input { transition: none; }
}
/* Beschriftung ueber einem Feld */
.admin_design .admin_label { display: block; margin: 0 0 6px 0; color: var( --head ); font-size: 13px; font-weight: 700; }

/* ---- 7a. Ecken 5 px auch an Feldern ohne admin_input (Wunsch 11.10.2026: alle Eingaben wie admin_input) ----
   Nur die Ecken: Farben, Groessen und Fokus bleiben, wie style.css, Seite oder Widget sie setzen. Checkboxen und Radios bleiben, wie sie sind.
   Dunkel gibt style.css .inputbox schon 5 px; hell waren es 2 px. Felder ausserhalb von .admin_design (News bearbeiten, Boxen rechts,
   Rubrik-Dialog) setzt die Seite selbst. */
.admin_design .inputbox { border-radius: 5px; }
/* Code-Editoren von redax.js (Titel, Teaser, Text, Beschreibung): Rahmen #FELD_ace mit Rand inline um Editor, Statuszeile und Ziehgriff.
   Rundung aussen am gemeinsamen Rahmen; overflow: clip schneidet die eckigen Flaechen innen an der Rundung ab (kein Scrollbalken, der
   Ziehgriff von jQuery UI liegt innen, Menues und Hinweise haengen an body). Gilt auch auf News bearbeiten (ohne .admin_design-Rahmen). */
div[id$="_ace"]:has( > .ace_editor ) { border-radius: 5px; overflow: clip; }
/* Teaser-Bild-Fenster (javascript/wfv4_teaser_picture_edit_org.js, haengt an body): Quelle, Link, Adresse, Suche und Sortierung.
   Seiten ohne diese Datei (FAQ, Downloads) behalten ihr Fenster unveraendert */
#wfv4_teaser_picture_edit :is( .inputbox, select ) { border-radius: 5px; }
/* Meldung direkt unter einem Feld: _warn = Hinweis (Absenden geht), _error = Fehler (Absenden geht nicht). Leer = unsichtbar.
   Das Feld verweist mit aria-describedby auf die Meldung */
.admin_design .admin_field_msg { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0 0; color: var( --ink2 ); font-size: 12px; line-height: 16px; text-wrap: pretty; }
.admin_design .admin_field_msg:empty { display: none; }
.admin_design .admin_field_msg_warn::before, .admin_design .admin_field_msg_error::before { content: '!'; flex: none; width: 16px; height: 16px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.admin_design .admin_field_msg_warn { color: var( --warn ); }
.admin_design .admin_field_msg_warn::before { background: var( --warn_strong ); }
.admin_design .admin_field_msg_error { color: var( --err ); font-weight: 700; }
.admin_design .admin_field_msg_error::before { background: var( --danger_solid ); }
body[data-darkmode="on"] .admin_design .admin_field_msg_warn::before, body[data-darkmode="on"] .admin_design .admin_field_msg_error::before { color: #121212; }
body[data-darkmode="on"] .admin_design .admin_field_msg_error::before { background: var( --danger ); }

/* ---- 8. Meldungen und Chips ----
   Ein Baustein fuer Meldungen vom Server und aus dem Skript (admin_design.message in javascript/admin_design_org.js):
   admin_msg: Hinweis ueber oder zwischen Karten (Rahmen rundum, 20 px Abstand unten).
   admin_msg admin_msg_row: eigene Zeile direkt unter dem Kartenkopf (Doku 4), nur Linie unten.
   admin_msg admin_msg_boxed: Kasten im Karteninhalt oder in einer Box (z. B. unter einem Knopf), 10 px Abstand oben, erster Satz fett.
   Farbe: _ok, _err, _warn, _info. Fehler mit role="alert", sonst role="status".
   Aufbau: Symbol vorn als svg, Text in einem div (admin_msg_text), jeder Satz ein eigenes div (Doku 1a) */
.admin_design .admin_msg { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px 0; padding: 12px 20px; border: 1px solid var( --line ); border-radius: 5px; background: var( --summary ); color: var( --ink2 ); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.admin_design .admin_msg svg { margin-top: 1px; }
.admin_design .admin_msg > :not( svg ) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.admin_design .admin_msg_text > div + div { margin-top: 2px; }
/* Satz als Einheit (Doku 1a): Saetze stehen nebeneinander, solange Platz ist; sonst beginnt jeder Satz in einer eigenen Zeile */
.admin_design .admin_sent { display: inline-block; }
/* Symbol oben buendig mit der ersten Zeile, auch wenn die Meldung mehrzeilig ist */
.admin_design .admin_msg_row { margin: 0; padding: 10px 20px; border-width: 0 0 1px 0; border-radius: 0; }
.admin_design .admin_msg_row svg { margin-top: 2px; }
.admin_design .admin_msg_boxed { gap: 8px; margin: 10px 0 0 0; padding: 8px 10px; font-size: 12px; }
.admin_design .admin_msg_boxed svg { margin-top: 2px; }
.admin_design .admin_msg_boxed .admin_msg_text > div:first-child { font-weight: 700; }
/* schmale Kaesten: kurze Saetze gleichmaessig umbrechen, kein einzelnes Wort in der letzten Zeile (Doku 1a) */
.admin_design .admin_msg_boxed .admin_msg_text > div { text-wrap: balance; }
/* seit Runde 16 (13.10.2026, Sebastian: "leuchtender", Mittelweg zwischen Pastell und neutral): leicht getoente Flaeche, Rand in der
   Farbe, dazu der 3-px-Streifen links (Schatten innen, verschiebt nichts) in der kraeftigen Farbe und der Text */
.admin_design .admin_msg_ok { border-color: var( --ok_line ); background: var( --ok_bg ); color: var( --ok ); box-shadow: inset 3px 0 0 var( --ok_strong ); }
.admin_design .admin_msg_err { border-color: var( --err_line ); background: var( --err_bg ); color: var( --err ); box-shadow: inset 3px 0 0 var( --err_strong ); }
.admin_design .admin_msg_warn { border-color: var( --warn_line ); background: var( --warn_bg ); color: var( --warn ); box-shadow: inset 3px 0 0 var( --warn_strong ); }
.admin_design .admin_msg_info { border-color: var( --info_line ); background: var( --info_bg ); color: var( --ink2 ); box-shadow: inset 3px 0 0 var( --btn_line ); }
.admin_design .admin_chip { display: inline-block; padding: 1px 8px; border: 0; border-radius: 30px; background: var( --pill ); color: var( --strong ); font-size: 11px; font-weight: 700; line-height: 17px; white-space: nowrap; }
.admin_design .admin_chip_ok { background: var( --ok_bg ); color: var( --ok ); }

/* ---- 9. Umschalter (Segmente), z. B. rechts im Kartenkopf; aktiv mit aria-current="page" (Links) oder aria-pressed="true" (Knoepfe) ---- */
.admin_design .admin_switch { display: flex; flex: none; gap: 2px; margin: 0; padding: 2px; border: 1px solid var( --line ); border-radius: 5px; background: var( --card ); }
.admin_design .admin_card_head .admin_switch { margin: -3px 0 -3px 6px; }
.admin_design .admin_switch > a, .admin_design .admin_switch > button { margin: 0; padding: 1px 9px; border: 0; border-radius: 3px; background: transparent; color: var( --ink2 ); font: 700 12px/1.6 Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif; white-space: nowrap; cursor: pointer; --link-color-blue: var( --ink2 ); }
.admin_design .admin_switch > :not( [aria-current="page"], [aria-pressed="true"] ):hover { background: var( --hover ); color: var( --head ); --link-color-blue: var( --head ); }
.admin_design .admin_switch > [aria-current="page"], .admin_design .admin_switch > [aria-pressed="true"] { background: var( --pill ); color: var( --strong ); --link-color-blue: var( --strong ); }
body[data-darkmode="on"] .admin_design .admin_switch > a, body[data-darkmode="on"] .admin_design .admin_switch > button { color: var( --muted ); --link-color-blue: var( --muted ); }
body[data-darkmode="on"] .admin_design .admin_switch > :not( [aria-current="page"], [aria-pressed="true"] ):hover { color: var( --head ); --link-color-blue: var( --head ); }
body[data-darkmode="on"] .admin_design .admin_switch > [aria-current="page"], body[data-darkmode="on"] .admin_design .admin_switch > [aria-pressed="true"] { background: rgba( 1, 108, 173, .35 ); color: #fff; --link-color-blue: #fff; }

/* ---- 10. Tabelle in der Karte: Spaltenkoepfe in Mono, Zeilen mit Hairline; die Spalten (grid-template-columns) setzt die Seite ---- */
.admin_design .admin_cols { display: grid; column-gap: 20px; align-items: center; padding: 8px 20px; border-bottom: 1px solid var( --line2 ); color: var( --muted ); font-family: var( --mono ); font-size: 10px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.admin_design .admin_row { display: grid; column-gap: 20px; align-items: center; box-sizing: border-box; min-height: 40px; padding: 8px 20px; border-top: 1px solid var( --line2 ); color: var( --head ); --link-color-blue: var( --head ); }
.admin_design .admin_cols + .admin_row, .admin_design .admin_card_head + .admin_row { border-top: 0; }
.admin_design .admin_row:hover { background: var( --hover ); }
/* Mehr anzeigen: Fusszeile der Karte (Trennlinie, Pfeil, fetter Text, grauer Zusatz), linksbuendig auf der Achse des Kartentitels */
.admin_design .admin_more { display: flex; align-items: center; gap: 6px; box-sizing: border-box; width: 100%; min-height: 38px; margin: 0; padding: 0 20px; border: 0; border-top: 1px solid var( --line2 ); border-radius: 0 0 5px 5px; background: var( --card ); color: var( --strong ); font: 700 13px Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif; text-align: left; cursor: pointer; list-style: none; --link-color-blue: var( --strong ); }
.admin_design .admin_more::-webkit-details-marker { display: none; }
.admin_design .admin_more:hover b { text-decoration: underline; }
.admin_design .admin_more em { color: var( --muted ); font-style: normal; font-weight: 400; }
.admin_design details[open] > .admin_more svg { transform: rotate( 90deg ); }
/* Mono nur fuer technische Daten (ID, IP, Zeitstempel) */
.admin_design .admin_mono { color: var( --muted ); font-family: var( --mono ); font-size: 11px; }

/* ---- 11. Handy (Doku 6a), nur mit .admin_design_phone am Wrapper ----
   winfuture.de liefert auch dort die Desktop-Seite mit festem Rahmen (#container 1300 px, #mainWrap 990 px). Mit dieser Klasse wird er schmal,
   der Website-Kopf weicht der eigenen Leiste .admin_mnav (sonst Sackgasse). */
.admin_design .admin_mnav { display: none; }
@media ( max-width: 760px ) {
	html:has( .admin_design_phone ) #container, html:has( .admin_design_phone ) #mainWrap, html:has( .admin_design_phone ) #contents,
	html:has( .admin_design_phone ) #centerRightWrap, html:has( .admin_design_phone ) #centerWrap, html:has( .admin_design_phone ) #centerWrap .primary_content,
	html:has( .admin_design_phone ) #rightWrap { float: none; width: auto !important; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
	html:has( .admin_design_phone ) #mainWrap > #header { display: none; }
	html:has( .admin_design_phone ) #mainWrap > .clearfix.mt19 { margin-top: 0 !important; }
	.admin_design.admin_design_phone { padding: 0 10px; }
	.admin_design.admin_design_phone.content_wrap { margin-bottom: 10px; }
	.admin_design_phone .admin_mnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px 0; font-size: 14px; font-weight: 700; }
	.admin_design_phone .admin_mnav a { display: flex; align-items: center; gap: 6px; padding: 8px 2px; color: var( --link ); --link-color-blue: var( --link ); }
	/* Seitenfuss (Tag/Nacht-Schalter, Navigation, Themen): style.css setzt margin-left -10 px fuer die Kante am Desktop;
	   im schmalen Rahmen 10 px vom Rand wie der Inhalt */
	html:has( .admin_design_phone ) #footer { margin-left: 0; padding-right: 10px; }
	/* Kartenkopf darf umbrechen: der Zusatz steht unter dem Titel und bricht selbst um, so wird keiner von beiden gekuerzt */
	.admin_design_phone .admin_card_head { flex-wrap: wrap; row-gap: 2px; padding: 11px 16px; }
	.admin_design_phone .admin_card_meta { flex-basis: 100%; text-align: left; white-space: normal; }
	.admin_design_phone .admin_card_body, .admin_design_phone .admin_card_foot, .admin_design_phone .admin_cols, .admin_design_phone .admin_row,
	.admin_design_phone .admin_more, .admin_design_phone .admin_msg { padding-left: 16px; padding-right: 16px; }
}

/* ---- 12. Rueckfrage am Knopf (javascript/admin_design_org.js, Markup data-admin-confirm) ----
   Schwebt am Knopf und verschiebt nichts: Popover-Ebene (popover="manual", kein overflow: hidden schneidet sie ab), sonst position: fixed;
   left, top und die Lage des Pfeils (--admin-arrow-x) setzt das Skript. Das Skript gibt der Rueckfrage selbst die Klasse admin_design,
   damit Tokens und admin_btn ueberall gelten. Schatten: Ausnahme von "Flach" (Doku 3), eine schwebende Ebene braucht Abstand zum Inhalt.
   "Ja" rot gefuellt (admin_btn_solid_danger) nur bei Datenverlust (tone danger), sonst blau (admin_btn_primary). */
.admin_confirm { position: fixed; z-index: 10000; inset: auto; box-sizing: border-box; width: max-content; max-width: min( 360px, calc( 100vw - 20px ) ); height: auto; margin: 0; padding: 12px 14px; overflow: visible;
	border: 1px solid var( --line ); border-radius: 5px; background: var( --card ); color: var( --head ); box-shadow: 0 10px 28px rgba( 16, 40, 72, .16 ), 0 2px 6px rgba( 16, 40, 72, .1 );
	font: 400 13px/1.45 Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif; text-align: left; white-space: normal; }
/* Pfeil zum Knopf */
.admin_confirm::before { content: ''; position: absolute; top: -6px; left: var( --admin-arrow-x, 24px ); width: 10px; height: 10px; margin-left: -6px; border: solid var( --line ); border-width: 1px 0 0 1px; background: inherit; transform: rotate( 45deg ); }
.admin_confirm_up::before { top: auto; bottom: -6px; border-width: 0 1px 1px 0; }
.admin_confirm:focus { outline: none; }
.admin_confirm_q { font-weight: 700; text-wrap: pretty; }
.admin_confirm_hint { margin-top: 3px; color: var( --ink2 ); font-size: 12px; text-wrap: pretty; }
.admin_confirm_btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.admin_confirm_busy button { cursor: wait; opacity: .75; }
/* schmale Zeilen (Bild-Zeile): Frage und Knoepfe in einer Zeile, Hinweis darunter */
.admin_confirm_compact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 10px; }
.admin_confirm_compact .admin_confirm_btns { margin-top: 0; gap: 6px; }
.admin_confirm_compact .admin_confirm_hint { flex-basis: 100%; order: 3; margin-top: 0; }
body[data-darkmode="on"] .admin_confirm, html[data-theme="dark"] .admin_confirm { box-shadow: 0 10px 28px rgba( 0, 0, 0, .55 ), 0 2px 6px rgba( 0, 0, 0, .4 ); }
/* der Knopf, zu dem die offene Rueckfrage gehoert, bleibt markiert: blauer Ring, bei Loeschen rot wie beim Ueberfahren */
.admin_design [data-admin-confirm-open] { border-color: var( --btn ); box-shadow: 0 0 0 3px var( --field_ring ); }
.admin_design [data-admin-confirm-open="danger"] { border-color: var( --danger_line ); background-color: var( --danger_bg ); color: var( --danger ); box-shadow: none; --link-color-blue: var( --danger ); }
/* Handy und Touch: groessere Knoepfe (Doku 6a) */
@media ( max-width: 760px ) {
	.admin_confirm { padding: 14px 16px; }
	.admin_confirm_btns { gap: 10px; }
	.admin_confirm .admin_btn { height: 40px; padding: 0 16px; font-size: 14px; }
}
@media ( hover: none ) and ( pointer: coarse ) {
	.admin_confirm .admin_btn { height: 44px; }
}
@media ( prefers-reduced-motion: no-preference ) {
	.admin_confirm { animation: admin_confirm_in .12s ease-out; }
	.admin_confirm_up { animation-name: admin_confirm_in_up; }
}
@keyframes admin_confirm_in { from { opacity: 0; transform: translateY( -4px ); } to { opacity: 1; transform: none; } }
@keyframes admin_confirm_in_up { from { opacity: 0; transform: translateY( 4px ); } to { opacity: 1; transform: none; } }

/* ---- 13. Hinweis (Tooltip) an data-admin-tip und (?)-Knopf (javascript/admin_design_org.js, seit 12.10.2026) ----
   Sebastian 12.10.2026: "Ueberall nur die neuen Tooltips verwenden". Stil der Kachel-Hinweise auf /pending/ (.nbb_tip): weisse Karte,
   feiner Rand, sanfter Schatten, Pfeil zum Element; fett der Name (data-admin-tip), darunter die Wirkung (data-admin-tip-text).
   Liegt direkt im body, absolut in Seitenkoordinaten (kein overflow: hidden schneidet ab), ueber allem: auch ueber dem Fenster am Push
   (.wfv4_tq, z-index 2147483644; Sebastian 13.10.2026: "dafuer schaut ein Tooltip aus dem Hintergrund hervor").
   Lange Woerter ohne Leerzeichen (Adressen, Dateinamen) brechen um, statt ueber den Rand zu laufen (13.10.2026). */
.admin_tip { position: absolute; z-index: 2147483646; box-sizing: border-box; width: max-content; max-width: min( 320px, calc( 100vw - 16px ) ); margin: 0; padding: 7px 10px;
	border: 1px solid #b6cdee; border-radius: 5px; background: #fff; color: #1e1e1e; font: 400 12px/17px Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
	text-align: left; text-wrap: balance; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 10px 28px rgba( 16, 40, 72, .16 ), 0 2px 6px rgba( 16, 40, 72, .1 ); pointer-events: none; }
.admin_tip[hidden] { display: none; }
/* Name in Blau (Runde 16: Farbe auch in Tooltips; 8,9:1), die Wirkung grau darunter */
.admin_tip .admin_tip_name { display: block; color: #18438a; font-weight: 700; }
.admin_tip .admin_tip_text { display: block; margin-top: 2px; color: #505050; text-wrap: pretty; }
/* nur der Satz, wenn der Name gleich der Beschriftung ist; Einblenden 120 ms mit 2 px Weg, nicht direkt nach einem anderen Hinweis ( tooltips.md ) */
.admin_tip.admin_tip_satz .admin_tip_name { font-weight: 400; color: #303030; }
@media ( prefers-reduced-motion: no-preference ) {
	.admin_tip.admin_tip_ein { animation: admin_tip_ein .12s ease-out; }
	.admin_tip.admin_tip_ein.admin_tip_up { animation-name: admin_tip_ein_oben; }
}
@keyframes admin_tip_ein { from { opacity: 0; transform: translateY( -2px ); } to { opacity: 1; transform: none; } }
@keyframes admin_tip_ein_oben { from { opacity: 0; transform: translateY( 2px ); } to { opacity: 1; transform: none; } }
.admin_tip::before { content: ''; position: absolute; top: -6px; left: var( --admin-tip-arrow, 16px ); width: 10px; height: 10px; margin-left: -6px;
	border: solid #b6cdee; border-width: 1px 0 0 1px; background: #fff; transform: rotate( 45deg ); }
.admin_tip.admin_tip_up::before { top: auto; bottom: -6px; border-width: 0 1px 1px 0; }
/* Bestaetigung (z. B. "Kopiert"): gruen, eine Zeile normal */
.admin_tip.admin_tip_ok { border-color: #a9dcbc; background: #ebf7ef; color: #12723a; }
.admin_tip.admin_tip_ok::before { border-color: #a9dcbc; background: #ebf7ef; }
.admin_tip.admin_tip_ok .admin_tip_name { color: inherit; font-weight: 400; }
body[data-darkmode="on"] .admin_tip, html[data-theme="dark"] .admin_tip { border-color: #34507a; background: #1e1f22; color: #eeeeee;
	box-shadow: 0 10px 28px rgba( 0, 0, 0, .55 ), 0 2px 6px rgba( 0, 0, 0, .4 ); }
body[data-darkmode="on"] .admin_tip::before, html[data-theme="dark"] .admin_tip::before { border-color: #34507a; background: #1e1f22; }
body[data-darkmode="on"] .admin_tip .admin_tip_name, html[data-theme="dark"] .admin_tip .admin_tip_name { color: #9cc6ff; }
body[data-darkmode="on"] .admin_tip.admin_tip_satz .admin_tip_name, html[data-theme="dark"] .admin_tip.admin_tip_satz .admin_tip_name { color: #e3e4e6; }
body[data-darkmode="on"] .admin_tip .admin_tip_text, html[data-theme="dark"] .admin_tip .admin_tip_text { color: #c4c7cc; }
body[data-darkmode="on"] .admin_tip.admin_tip_ok, html[data-theme="dark"] .admin_tip.admin_tip_ok { border-color: #2f5a40; background: #1c3428; color: #7fd69a; }
body[data-darkmode="on"] .admin_tip.admin_tip_ok::before, html[data-theme="dark"] .admin_tip.admin_tip_ok::before { border-color: #2f5a40; background: #1c3428; }
@media ( prefers-reduced-motion: no-preference ) {
	.admin_tip { animation: admin_tip_in .12s ease-out; }
}
@keyframes admin_tip_in { from { opacity: 0; } to { opacity: 1; } }
/* (?) neben einer Beschriftung: 16 px Ring mit Fragezeichen in --muted, beim Ueberfahren und offen in Linkfarbe; Touch: 44 px Ziel */
.admin_design .admin_q { display: inline-flex; flex: none; align-items: center; justify-content: center; position: relative; box-sizing: border-box;
	width: 16px; height: 16px; margin: 0 0 0 5px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: none; color: var( --muted );
	font: 700 10px/1 Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif; vertical-align: -2px; cursor: help; }
.admin_design .admin_q::before { content: "?"; }
.admin_design .admin_q:hover, .admin_design .admin_q.admin_q_on { color: var( --link ); }
@media ( hover: none ) and ( pointer: coarse ) {
	.admin_design .admin_q::after { content: ''; position: absolute; inset: -14px; }
}