/**
 * WebinarIgnition – Live Console im cremig-flammigen Look (Tobias 2026-10-05)
 *
 * Die Live Console ist eine EIGENE Seite (eigener <!DOCTYPE html>, eigene
 * CSS-Kette stream.css/main.css). Deshalb greift dort css/wi-admin-wp-modern.css
 * NICHT — sie haengt an admin_enqueue_scripts. Diese Datei ist der passende Ort
 * fuer den Console-Look und wird in wi-frontend-functions.php direkt nach
 * stream.css geladen, damit sie dessen Werte ueberschreibt.
 *
 * Was war dunkel (gemessen 2026-10-05):
 *   .activeQuestionsHeadline  #1F1F1F + noise.png  ("Live Console Dashboard")
 *   .lc-btn                   #111111 !important   (Tab-Knoepfe)
 *   .statsTitleEvent          rgba(0,0,0,.3)       (Webinar-Titel-Chip)
 *
 * Grundsaetze wie im Admin:
 *   - Creme aus der Marke (--wi-color-bone-white / -off-white)
 *   - Feuer-Orange als Akzent
 *   - Aktive/gewaehlte Elemente in Orange, Text dort weiss
 *   - Statusfarben (gruen/rot/gelb) der Karten bleiben unberuehrt
 *
 * Letzte Aenderung: 2026-10-05
 */

body#webinarignition_console {
	/* Die Konsole erbte eine weisse Schriftfarbe und malte sie auf den cremefarbenen Grund.
	   Jedes Element ohne eigene Farbe war damit unsichtbar (gemessen 2026-11-08: Body
	   rgb(255,255,255) auf #f9f6ee, zum Beispiel "Send confirmation email" und die
	   Zeitzonen-Vorschlaege). Die Grundfarbe ist Tinte.

	   2026-11-12: text-fill stand hier auf Tinte und wurde damit an JEDES Kind vererbt. Weil
	   -webkit-text-fill-color beim Malen ueber color gewinnt (auch ueber color !important),
	   blieb auf jeder farbigen Flaeche das weisse color unsichtbar: "Create New CTA", "Save",
	   der aktive Reiter und der Stift unten rechts waren braun auf Flamme (gemessen 3,38:1).
	   Darum steht hier currentColor: jede Stelle nimmt ihre EIGENE color, weiss bleibt weiss. */
	color: var(--wi-ink);
	-webkit-text-fill-color: currentColor;
	/* Systemschrift wie auf der Einstellungen-Seite (wp-admin setzt denselben Stapel).
	   Vorher Helvetica aus stream.css, dadurch sah die Konsole wie ein eigenes Produkt aus. */
	--wi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-family: var(--wi-font);
	--wi-cream: #f9f6ee;
	--wi-cream-2: #fdfbf6;
	--wi-cream-3: #f3ede0;
	--wi-cream-line: rgba(230, 79, 29, 0.16);
	--wi-brand: #e64f1d;
	--wi-brand-10: #ba3f17;
	--wi-brand-20: #8d3011;
	/* Knopf-Orange, eine Spur tiefer als das Marken-Orange: weisse Schrift erreicht darauf
	   4,79:1 (WCAG AA) statt 3,82:1. Flaechen, Reiter und Linien bleiben bei --wi-brand. */
	--wi-brand-btn: #cc4318;
	--wi-ink: #3c2f26;
	--wi-ink-soft: #6b5c50;
}

/* Weisse Schrift auf farbigen Flaechen: die Fuellfarbe folgt der color des Elements.
 * Ohne diese Zeile uebermalte die von oben geerbte Fuellfarbe jedes color: #fff. */
body#webinarignition_console * {
	-webkit-text-fill-color: currentColor;
}

/* Kopf + Grundflaeche cremig */
body#webinarignition_console,
body#webinarignition_console .topArea {
	background-color: var(--wi-cream) !important;
}

body#webinarignition_console .topArea {
	background-image: none !important;
	border-bottom: 1px solid var(--wi-cream-line);
}

/* Kopf als zweispaltige Zeile: Wortmarke links, Webinar-Titel rechts.
 * Tobias 2026-10-07: damit man auf JEDEM Reiter sieht, in welchem Webinar
 * man ist (der Titel wanderte aus dem Dashboard-Chip hierher). */
body#webinarignition_console .topArea {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px;
	flex-wrap: wrap;
	min-height: 0 !important;
	padding: 10px 24px !important;
}

body#webinarignition_console .topArea .consoleLogo {
	margin: 0 !important;
	padding-top: 0 !important;
	max-width: none !important;
	height: auto !important;
	display: flex;
	align-items: center;
}

body#webinarignition_console .wi-console-topbar-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	/* Der Support-Chat-Knopf wird per JS oben rechts eingefuegt und lag genau
	 * ueber dem Titel. Darum sitzt der Titel links bei der Wortmarke statt am
	 * rechten Rand; margin-right:auto haelt ihn dort, egal wie breit der Kopf ist. */
	margin-right: auto !important;
	max-width: 60%;
	overflow: hidden;
	text-align: left;
	padding-left: 20px;
	border-left: 1px solid var(--wi-cream-line);
}

body#webinarignition_console .wi-console-topbar-label {
	color: var(--wi-ink-soft);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

body#webinarignition_console .wi-console-topbar-name {
	color: var(--wi-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Der dunkle Streifen "Live Console Dashboard" -> creme, Text dunkel */
body#webinarignition_console .statsDashbord {
	background-color: var(--wi-cream-2) !important;
	background-image: none !important;
	border-color: var(--wi-cream-line) !important;
}

body#webinarignition_console .statsTitle,
body#webinarignition_console .statsTitleCopy,
body#webinarignition_console .statsTitle-Dassh {
	color: var(--wi-ink) !important;
}

body#webinarignition_console .statsTitleIcon i,
body#webinarignition_console .statsTitleIcon .icon-cogs {
	color: var(--wi-brand) !important;
}

/* Der dunkle Streifen "Live Console Dashboard" -> creme, Text dunkel.
 * Tobias 2026-10-07: hier lagen DREI harte Linien uebereinander —
 *   stream.css .activeQuestionsHeadline  border-top:3px + border-bottom:3px,
 *   und darunter .mainWrapper/.innerOuterContainer mit eigener Kante.
 * Auf dem hellen Creme wurden daraus zwei kräftige orangerote Striche.
 * Regel: der Bereichs-Kopf ist RAHMENLOS. Die EINZIGE Trennung sitzt als
 * leichte Linie am mainWrapper (siehe unten) — wie der feine Strich oben. */
body#webinarignition_console .activeQuestionsHeadline {
	background-color: var(--wi-cream-2) !important;
	background-image: none !important;
	color: var(--wi-ink) !important;
	border: 0 !important;
	border-width: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* Der mainWrapper traegt genau EINE dezente Trennlinie unter dem Kopf. */
body#webinarignition_console .mainWrapper {
	border-top: 1px solid var(--wi-cream-line) !important;
}

/* .innerOuterContainer darf keine zweite Kante direkt darunter zeichnen. */
body#webinarignition_console .innerOuterContainer {
	border-top: 0 !important;
}

body#webinarignition_console .activeQuestionsHeadline i,
body#webinarignition_console .activeQuestionsHeadline .icon-cogs {
	color: var(--wi-brand) !important;
}

/* Die Tab-Knoepfe: heller Grund, dunkle Schrift, Flammen-Rand.
 * Der aktive Knopf (.success) bleibt Feuer-Orange mit weisser Schrift. */
body#webinarignition_console .lc-btn {
	background-color: var(--wi-cream-3) !important;
	border: 1px solid var(--wi-cream-line) !important;
	color: var(--wi-ink) !important;
	box-shadow: none !important;
}

body#webinarignition_console .lc-btn:hover {
	background-color: #ede4d3 !important;
	color: var(--wi-ink) !important;
}

body#webinarignition_console .lc-btn.success,
body#webinarignition_console a.success {
	background-color: var(--wi-brand) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
}

body#webinarignition_console .lc-btn.success:hover,
body#webinarignition_console a.success:hover {
	background-color: var(--wi-brand-10) !important;
	color: #fff !important;
}

/* Der Webinar-Titel-Chip (.statsTitleEvent) war schwarz-transparent ->
 * jetzt ein warmes Creme-Chip mit dunkler Schrift. */
body#webinarignition_console .statsTitleEvent {
	background-color: var(--wi-cream-3) !important;
	color: var(--wi-ink) !important;
	border: 1px solid var(--wi-cream-line) !important;
	box-shadow: none !important;
}

/* Die Status-Schalter (Countdown / Live / Replay / Closed) der Console.
 * Gemessen 2026-10-05: .webinarStatus #3a383c auf dunklem Streifen.
 * Tobias 2026-10-07: inaktive Schalter dunkel halten (Icon UND Text), damit
 * aktiv/inaktiv klar lesbar ist; der aktive Schalter bleibt Flamme + weiss. */
body#webinarignition_console .webinarStatus {
	background-color: var(--wi-cream-3) !important;
	color: var(--wi-ink) !important;
	text-shadow: none !important;
}

/* Die Icons in den Status-Schaltern erben sonst stream.css' Blass-Grau.
 * Inaktiv dunkel wie die Schrift, im aktiven Zustand weiss. */
body#webinarignition_console .webinarStatus i,
body#webinarignition_console .webinarStatus svg,
body#webinarignition_console .webinarStatus .icon {
	color: var(--wi-ink) !important;
	fill: var(--wi-ink) !important;
}

body#webinarignition_console .webinarStatus:hover,
body#webinarignition_console .webinarStatusSelected,
body#webinarignition_console .webinarStatusSelected:hover {
	background-color: var(--wi-brand) !important;
	color: #fff !important;
}

body#webinarignition_console .webinarStatus:hover i,
body#webinarignition_console .webinarStatus:hover svg,
body#webinarignition_console .webinarStatusSelected i,
body#webinarignition_console .webinarStatusSelected svg {
	color: #fff !important;
	fill: #fff !important;
}

body#webinarignition_console a.webinarStatus.wi-master-replay-disabled,
body#webinarignition_console a.webinarStatus.wi-master-replay-disabled:hover {
	background-color: #efe9dd !important;
	color: #9a9086 !important;
	opacity: 1 !important;
}

body#webinarignition_console a.webinarStatus.wi-master-replay-disabled i,
body#webinarignition_console a.webinarStatus.wi-master-replay-disabled svg {
	color: #9a9086 !important;
	fill: #9a9086 !important;
}

/* Die Innenkarte (Dashboard) bleibt weiss, damit die farbigen Status-Karten
 * (orange/blau/gruen/gelb) ihren Kontrast behalten. Nur der Rand wird warm. */
body#webinarignition_console .innerContainer {
	border: 1px solid var(--wi-cream-line);
}

/* Trennlinien in Flammen-Ton entfernt (Tobias 2026-10-07): .mainWrapper und
 * .innerOuterContainer zogen zusaetzliche Kanten. Der Bereichs-Kopf ist
 * rahmenlos; die einzige Trennung sitzt oben direkt am .mainWrapper. */

/* Die Wortmarke im cremigen Console-Kopf: Flamme + dunkler Text */
body#webinarignition_console .wi-console-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	overflow: hidden;
}

body#webinarignition_console .wi-console-flame {
	width: 46px;
	height: 46px;
	object-fit: contain;
	display: block;
	flex: 0 0 auto;
}

body#webinarignition_console .wi-console-word {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wi-ink);
	white-space: nowrap;
}

body#webinarignition_console .wi-console-word em {
	font-style: normal;
	color: var(--wi-brand);
}

/* Abstand zwischen Icon und Text in den externen Tabs (Settings / Webinar).
 * Gemessen 2026-10-05: wi_fa3_icon() rendert ein <svg>, das ohne margin
 * direkt an der Beschriftung klebt ("Settings", "Webinar"). Index.php bleibt
 * unangetastet - der Abstand kommt per CSS.
 *
 * Tobias 2026-10-07: EINHEITLICH fuer ALLE Tab-Knoepfe. Vorher stand der
 * Abstand mal als Leerzeichen im Markup (Live CTAs/Prompter/Settings/Webinar),
 * mal gar nicht (Manage Questions/Registrants) — daher der ungleiche,
 * teils fehlende Abstand. Hier zentral fuer .wi-console-main-nav UND
 * .wi-console-external-nav gesetzt; das Markup-Leerzeichen stoert nicht. */
body#webinarignition_console .wi-console-main-nav .lc-btn svg,
body#webinarignition_console .wi-console-main-nav .lc-btn i,
body#webinarignition_console .wi-console-external-nav .lc-btn svg,
body#webinarignition_console .wi-console-external-nav .lc-btn i,
body#webinarignition_console .wi-console-external-link svg,
body#webinarignition_console .wi-console-external-link i {
	margin-right: 7px;
}

/* Das Icon darf NICHT schrumpfen oder abgeschnitten werden. Vorher hat der
 * Flex-Knopf das 1em-SVG bei knappem Platz zusammengedrueckt ("Registrants",
 * "Webinar"). flex-shrink:0 haelt es in voller Groesse. */
body#webinarignition_console .wi-console-main-nav .lc-btn svg,
body#webinarignition_console .wi-console-external-nav .lc-btn svg {
	flex: 0 0 auto;
	overflow: visible;
}

/* Gleiche Innenabstaende auf allen Tab-Knoepfen, damit Icon+Text links wie
 * rechts dieselbe Luft haben — "Settings" wirkte vorher zu weit. */
body#webinarignition_console .wi-console-main-nav .lc-btn,
body#webinarignition_console .wi-console-external-nav .lc-btn {
	padding-left: 14px;
	padding-right: 14px;
	gap: 7px;
}

/* Das Markup-Leerzeichen (z.B. "<?php echo wi_fa3_icon(); ?> Settings") wuerde
 * sich zum CSS-Abstand addieren. Bei gesetztem gap/margin kollabiert es nicht
 * zuverlaessig — daher hier die Whitespace-Steuerung der Flex-Knoepfe. */
body#webinarignition_console .wi-console-main-nav .lc-btn,
body#webinarignition_console .wi-console-external-nav .lc-btn {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* Der Fuss ("Live Console For WebinarIgnition ...").
 * Gemessen 2026-10-05: .footerArea war #353437 (dunkler Balken ueber die
 * volle Breite). Jetzt cremig mit dunkler Schrift. */
body#webinarignition_console .footerArea {
	background-color: var(--wi-cream) !important;
	background-image: none !important;
	border-top: 1px solid var(--wi-cream-line);
}

body#webinarignition_console .footerArea,
body#webinarignition_console .footerArea a {
	color: var(--wi-ink) !important;
}

/* =====================================================================
 * Console-INHALTE im neuen Stil (Tobias 2026-10-06)
 *
 *    Der Console-Kopf war cremig, aber die INHALTE trugen noch die alte
 *    blaue Palette. Gemessen in stream.css:
 *      .dash-block-2      #2c7dcf  (blaue Status-Kachel)
 *      body...console .btn-primary  #337ab7
 *      .wi-console-innerTabs / .cta-Zeilen  blau-grau
 *    Alles auf die Marken-Creme/Orange-Palette, Statusfarben der
 *    KPI-Kacheln bleiben unterscheidbar (je Kachel ein eigener Ton).
 * ===================================================================== */

/* --- KPI-Kacheln (total leads / attended / purchased / questions) ---
 * Vorher: Orange, Blau, Dunkelgrau, Dunkelgrau. Jetzt ein warmes
 * Creme-Spektrum, damit die Leiste sich wie EIN Teil anfuehlt. */
body#webinarignition_console .dash-block-1 {
	background-color: #e64f1d !important;   /* Flamme — der wichtigste Wert */
}
body#webinarignition_console .dash-block-2 {
	background-color: #e8895c !important;   /* warmes Apricot */
}
body#webinarignition_console .dash-block-3 {
	background-color: #d9c3a5 !important;   /* Sand */
}
body#webinarignition_console .dash-block-4 {
	background-color: #a8a29b !important;   /* warmes Grau */
}
body#webinarignition_console .dash-block-1,
body#webinarignition_console .dash-block-2,
body#webinarignition_console .dash-block-3,
body#webinarignition_console .dash-block-4 {
	background-image: none !important;
	color: #fff !important;
}

/* --- Primaere Knoepfe (Send, Create New CTA, Save, Launch kit) ---
 * 2026-11-12: Knopf-Orange ist eine Spur tiefer (--wi-brand-btn), damit die weisse
 * Schrift 4,79:1 erreicht. Geometrie wie auf der Einstellungen-Seite: 3px Radius,
 * 30px hoch, 13px Schrift. */
body#webinarignition_console .btn-primary {
	background-color: var(--wi-brand-btn) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
	background-image: none !important;
	border-radius: 3px !important;
	font-size: 13px;
	font-weight: 600;
	min-height: 30px;
	padding: 0 12px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
body#webinarignition_console .btn-primary:hover,
body#webinarignition_console .btn-primary:focus {
	background-color: var(--wi-brand-10) !important;
	border-color: var(--wi-brand-20) !important;
	color: #fff !important;
}
body#webinarignition_console .btn-primary:active {
	background-color: var(--wi-brand-20) !important;
}

/* --- Sekundaere/info Knoepfe (copy, Export CSV, Zurueck/Weiter) ---
 * Vorher blau (#337ab7). Jetzt creme mit Flammen-Rand. */
body#webinarignition_console .btn-info,
body#webinarignition_console .btn-default,
body#webinarignition_console .btn {
	background-color: var(--wi-cream-2) !important;
	border: 1px solid var(--wi-cream-line) !important;
	color: var(--wi-ink) !important;
	background-image: none !important;
	text-shadow: none !important;
}
body#webinarignition_console .btn-info:hover,
body#webinarignition_console .btn-default:hover,
body#webinarignition_console .btn:not(.btn-primary):hover {
	background-color: var(--wi-cream-3) !important;
	border-color: var(--wi-brand) !important;
	color: var(--wi-ink) !important;
}

/* --- Tab-Zeilen (Console Dashboard / Live CTAs / ... ) ---
 * Tobias 2026-10-07: Vorher stand hier .lc-btn.success — der aktive Reiter
 * traegt aber "secondary success" und OHNE lc-btn (frontend.js setzt die
 * Klasse beim Klick um). Darum griff die Regel nie und man konnte nicht sehen,
 * welcher Reiter offen ist. Jetzt greift sie auf .dashTopBTN.success — das ist
 * genau das Element, das aktiv ist. Zusaetzlich unterer Balken + Versatz. */
body#webinarignition_console .wi-console-main-nav .dashTopBTN.success,
body#webinarignition_console .wi-console-external-nav .dashTopBTN.success,
body#webinarignition_console .dashTopBTN.success,
body#webinarignition_console .lc-btn.success,
body#webinarignition_console .lc-btn.active {
	background-color: var(--wi-brand) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
	font-weight: 700 !important;
	box-shadow: 0 2px 0 0 var(--wi-brand-20) !important;
}

/* Die Icon-Farbe muss mit dem weissen Text mitgehen (SVG erbt currentColor). */
body#webinarignition_console .dashTopBTN.success svg,
body#webinarignition_console .dashTopBTN.success i {
	color: #fff !important;
}

/* Der aktive Reiter darf beim Hover NICHT auf Creme/Dunkel zurueckfallen. */
body#webinarignition_console .dashTopBTN.success:hover,
body#webinarignition_console .dashTopBTN.success:focus {
	background-color: var(--wi-brand-10) !important;
	color: #fff !important;
}

/* --- CTA-Zeilen (Live-CTAs-Tab): gleiches Akkordeon wie der
 *     "WooCommerce, Shops und externe CTAs"-Block (Tobias 2026-10-08).
 *     Vorher: eckiger grauer Kopf (.auto_action_header #ebebeb) mit 10px
 *     Padding, Body ohne Luft. Jetzt: Creme-Kasten, Flammen-Rand, Radius 8px,
 *     Kopf im Summary-Look, Body mit Padding wie .wi-woo-cta-body. */
body#webinarignition_console .additional_auto_action_item {
	background-color: var(--wi-cream-2) !important;
	border: 1px solid var(--wi-cream-line) !important;
	border-radius: 8px !important;
	overflow: hidden;
	margin-bottom: 12px !important;
}

body#webinarignition_console .auto_action_header {
	background-color: var(--wi-cream-2) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wi-cream-line) !important;
	border-radius: 0 !important;
	padding: 12px 16px !important;
}

body#webinarignition_console .auto_action_header h4 {
	margin: 0 !important;
	padding-right: 200px;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--wi-ink) !important;
}

/* Der Titel im Kopf traegt dieselbe warme Grau-Note wie der Woo-CTA-Titel. */
body#webinarignition_console .auto_action_header h4 .index_holder,
body#webinarignition_console .auto_action_header h4 .cta_position_desc_holder {
	color: var(--wi-ink-soft);
}

body#webinarignition_console .auto_action_body {
	background-color: var(--wi-cream-2) !important;
	color: var(--wi-ink) !important;
	padding: 12px 16px 4px !important;
}

/* Die Pfeile zum Ein-/Ausklappen in Flammenfarbe statt Grau. */
body#webinarignition_console .auto_action_header .icon-arrow-up,
body#webinarignition_console .auto_action_header .icon-arrow-down {
	color: var(--wi-brand) !important;
}

/* --- Trigger/Prev/Next-Balken im Prompter --- */
body#webinarignition_console .wi-prompter-trigger,
body#webinarignition_console .wi-prompt-next,
body#webinarignition_console .wi-prompt-prev {
	background-color: var(--wi-cream-2) !important;
	border-color: var(--wi-cream-line) !important;
	color: var(--wi-ink) !important;
}

/* --- Innere Karten/Tabellen bleiben weiss, aber warm umrandet --- */
body#webinarignition_console .innerContainer,
body#webinarignition_console table {
	border-color: var(--wi-cream-line) !important;
}

/* =====================================================================
 * 7.10 Foundation-Buttons auf Marke (Tobias 2026-10-06)
 *
 *    Die Console laedt foundation.css — dessen Button-Palette faerbt
 *    alles Cyan (#2ba6cb) und Gruen (#5da423). Das war die Quelle der
 *    "blauen und gruenen" Knoepfe (Create New CTA, Save, Export CSV …).
 *    Hier EINMAL zentral auf die Marke gezogen, damit ich nicht jede
 *    der Dutzenden Foundation-Regeln einzeln anfassen muss (Auftrag D:
 *    eigenes Console-CSS statt Uebernahme).
 * ===================================================================== */

/* Primaere Aktion (Create New CTA, Send, Launch kit): Knopf-Orange (--wi-brand-btn,
 * 4,79:1 mit weisser Schrift). Weisse Schrift wird hier ausdruecklich als Fuellfarbe
 * gesetzt, damit keine geerbte Regel sie uebermalen kann. */
body#webinarignition_console .button,
body#webinarignition_console button,
body#webinarignition_console .button.primary,
body#webinarignition_console input[type="submit"] {
	background-color: var(--wi-brand-btn) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
	background-image: none !important;
	text-shadow: none !important;
}

body#webinarignition_console .button:hover,
body#webinarignition_console button:hover,
body#webinarignition_console .button:focus,
body#webinarignition_console button:focus {
	background-color: var(--wi-brand-10) !important;
	border-color: var(--wi-brand-20) !important;
	color: #fff !important;
}

/* "success"-Knoepfe (Save) waren gruen -> Flamme wie jeder Primaer-Knopf */
body#webinarignition_console .button.success,
body#webinarignition_console button.success {
	background-color: var(--wi-brand-btn) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
}

body#webinarignition_console .button.success:hover,
body#webinarignition_console button.success:hover {
	background-color: var(--wi-brand-10) !important;
	color: #fff !important;
}

/* Sekundaer-Knoepfe (Export CSV, Zurueck, Get Order Code): creme, dunkle Schrift */
body#webinarignition_console .button.secondary,
body#webinarignition_console button.secondary,
body#webinarignition_console .button.secondary:hover,
body#webinarignition_console button.secondary:hover {
	background-color: var(--wi-cream-2) !important;
	border: 1px solid var(--wi-cream-line) !important;
	color: var(--wi-ink) !important;
	background-image: none !important;
}

/* "alert" (Delete all) bleibt rot, aber im warmen Marken-Rot statt Foundation-Rot */
body#webinarignition_console .button.alert,
body#webinarignition_console button.alert {
	background-color: #b32d2e !important;
	border-color: #8f2325 !important;
	color: #fff !important;
}

/* Rundungen vereinheitlichen (Auftrag A4): gleicher Radius auf allen Knoepfen.
 * 2026-11-12: 3px wie auf der Einstellungen-Seite statt 6px, damit beide Seiten
 * wie ein Produkt wirken. */
body#webinarignition_console .button,
body#webinarignition_console button {
	border-radius: 3px !important;
}

/* =====================================================================
 * 7.11 Mobiles Console-Menue (Tobias 2026-10-06)
 *
 *    Problem: stream.css setzt die Tab-Leiste mobil auf display:block —
 *    daraus wurde ein ungleichmaessiges Treppen-Layout (mal breit, mal
 *    schmal, versetzt). Loesung: 2-schalige Reihen, gleiche Breite je
 *    Knopf, klare Abstaende. Lange Labels kuerzen wir per CSS nicht in der
 *    Breite, sondern brechen sie bewusst ab (siehe 7.12 Text-Strategie).
 * ===================================================================== */
@media screen and (max-width: 782px) {
	/* Kopf mobil: Wortmarke und Webinar-Titel untereinander, der Titel darf
	 * umbrechen statt abgeschnitten zu werden. */
	body#webinarignition_console .topArea {
		flex-direction: column;
		align-items: flex-start !important;
		padding: 12px 16px !important;
	}

	body#webinarignition_console .wi-console-topbar-title {
		max-width: 100%;
		width: 100%;
		text-align: left;
		flex-direction: column;
		gap: 2px;
	}

	body#webinarignition_console .wi-console-topbar-name {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		font-size: 16px;
	}

	body#webinarignition_console .wi-console-main-nav,
	body#webinarignition_console .wi-console-external-nav {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
		padding: 12px !important;
		margin: 0 0 12px !important;
		width: auto !important;
		box-sizing: border-box;
	}

	body#webinarignition_console .wi-console-main-nav .lc-btn,
	body#webinarignition_console .wi-console-external-nav .lc-btn {
		width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box;
		justify-content: center !important;
		text-align: center !important;
		padding: 10px 12px !important;
	}

	/* Der Bereichs-Kopf (aktiveQuestionsHeadline) bekommt Luft und
	 * zentrierten Text statt des gequetschten Layouts. */
	body#webinarignition_console .activeQuestionsHeadline {
		padding: 16px 14px !important;
		margin: 0 0 12px !important;
	}

	/* Der Bereichs-Titel ("Live CTAs") und seine Beschreibung: nicht
	 * anschneiden, sondern umbrechen lassen. */
	body#webinarignition_console .activeQuestionsHeadline h2,
	body#webinarignition_console .activeQuestionsHeadline p {
		white-space: normal !important;
		overflow: visible !important;
		word-break: normal;
	}

	/* Karten und KPI-Bloecke volle Breite, sauber untereinander */
	body#webinarignition_console .innerContainer,
	body#webinarignition_console .dash-stat-block {
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* --- 7.12 Mobil kurze, Desktop lange Tab-Beschriftung ---
 * Technik wie bei den Registrierungsarten: zwei Textvarianten im Markup,
 * per CSS umgeschaltet. Vermeidet gequetschte/abgeschnittene Labels. */
body#webinarignition_console .wi-lbl-short {
	display: none;
}

@media screen and (max-width: 782px) {
	body#webinarignition_console .wi-lbl-long {
		display: none !important;
	}
	body#webinarignition_console .wi-lbl-short {
		display: inline !important;
	}
}

/* --- 7.13 Registrant-KPI-Bloecke (Bild 3) ---
 * stream.css faerbt sie blau (#91BED3, #375D74, #19303E, #21272d).
 * Jetzt ein warmes, klar abgestuftes Spektrum: die wichtigste Zahl
 * (total leads) in Flamme, danach heller/waermer werdend. */
body#webinarignition_console .leadStat1 {
	background-color: #e64f1d !important;   /* Flamme — total leads */
}
body#webinarignition_console .leadStat2 {
	background-color: #e8895c !important;   /* Apricot — attended */
}
body#webinarignition_console .leadStat3 {
	background-color: #d9c3a5 !important;   /* Sand — purchased */
}
body#webinarignition_console .leadStat4 {
	background-color: #a8a29b !important;   /* warmes Grau — Reserve */
}

body#webinarignition_console .leadStatLabel {
	background-color: rgba(60, 47, 38, 0.22) !important;
	color: #fff !important;
}

/* --- 7.14 Registrant-Tabelle + Steuerknoepfe (Bild 3) ---
 * Tabellenkopf/-rahmen waren kaltgrau, Suche und Pagination neutral.
 * Jetzt warme Kanten und cremige Flaechen. */
body#webinarignition_console table,
body#webinarignition_console th,
body#webinarignition_console td {
	border-color: #e8dcc8 !important;
}

body#webinarignition_console th {
	background-color: var(--wi-cream-3) !important;
	color: var(--wi-ink) !important;
}

body#webinarignition_console td {
	background-color: var(--wi-cream-2) !important;
	color: var(--wi-ink) !important;
}

body#webinarignition_console input[type="text"],
body#webinarignition_console input[type="search"],
body#webinarignition_console select,
body#webinarignition_console textarea {
	background-color: #fffdf9 !important;
	border: 1px solid var(--wi-cream-line) !important;
	color: var(--wi-ink) !important;
	border-radius: 6px !important;
}

body#webinarignition_console input[type="text"]:focus,
body#webinarignition_console input[type="search"]:focus,
body#webinarignition_console select:focus,
body#webinarignition_console textarea:focus {
	border-color: var(--wi-brand) !important;
	outline: 2px solid rgba(230, 79, 29, 0.25) !important;
}

/* Pagination ("Zurueck"/"Weiter") als warme Sekundaer-Knoepfe */
body#webinarignition_console .wi-console-leads-controls .button,
body#webinarignition_console .leadPagination .button {
	background-color: var(--wi-cream-2) !important;
	border: 1px solid var(--wi-cream-line) !important;
	color: var(--wi-ink) !important;
}

/* --- 7.15 Bereichs-Kopf (Live CTAs / Registrants): Icon + Titel auf Linie ---
 * Tobias 2026-10-06: "Heading from Inhalt fehl". Ursache: .statsTitleIcon
 * hat padding-top:13px und .statsTitleCopy margin-left:7px — dadurch sass der
 * Titel versetzt und zu tief unter dem Icon. Hier sauber auf eine Linie. */
body#webinarignition_console .statsTitleIcon {
	padding-top: 0 !important;
	float: none !important;
	display: flex !important;
	align-items: center !important;
	color: var(--wi-brand) !important;
}

body#webinarignition_console .statsTitleCopy {
	float: none !important;
	margin-left: 0 !important;
}

body#webinarignition_console .statsTitle {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-height: 0 !important;
}

body#webinarignition_console .statsTitleCopy h2 {
	margin: 0 0 4px !important;
	font-size: 22px !important;
	line-height: 1.2 !important;
	color: var(--wi-ink) !important;
}

body#webinarignition_console .statsTitleCopy p {
	margin: 0 !important;
	line-height: 1.4 !important;
	color: var(--wi-ink-soft) !important;
}

body#webinarignition_console .statsTitle br {
	display: none !important;
}

/* =====================================================================
 * 7.20 Frage-Aktionen: Loeschen / Antworten sichtbar machen (Tobias 2026-10-08)
 *
 *    Gemessen auf Staging: .questionBlockIcons hatte color #373C44 auf
 *    background #F0F0F0 — Kontrast ~1,7:1. WCAG verlangt fuer grafische
 *    Elemente mindestens 3:1; im Screenshot war kaum zu erkennen, was
 *    "loeschen" und was "antworten" ist.
 *    Jetzt: je Aktion ein eigener, klar sichtbarer Knopf mit Flammen-Rand.
 *    Die Unterscheidung loeschen/antworten kommt ueber das Icon UND die
 *    Hover-Farbe (rot bzw. gruen) — Farbe allein traegt die Bedeutung nicht.
 * ===================================================================== */
body#webinarignition_console .questionActions {
	background-color: transparent !important;
}

body#webinarignition_console .questionBlockIcons {
	color: var(--wi-ink) !important;
	background-color: var(--wi-cream-3) !important;
	border: 1px solid var(--wi-cream-line) !important;
	border-radius: 6px;
	margin-left: 6px;
	padding: 8px 10px;
}

body#webinarignition_console .questionBlockIcons i,
body#webinarignition_console .questionBlockIcons svg {
	color: var(--wi-ink) !important;
	fill: var(--wi-ink) !important;
}

body#webinarignition_console .questionBlockIcons:hover {
	border-color: var(--wi-brand) !important;
}

body#webinarignition_console .questionBlockIcons.qbi-remove:hover {
	background-color: #b32d2e !important;
	color: #fff !important;
}

body#webinarignition_console .questionBlockIcons.qbi-remove:hover i,
body#webinarignition_console .questionBlockIcons.qbi-remove:hover svg {
	color: #fff !important;
	fill: #fff !important;
}

body#webinarignition_console .questionBlockIcons.qbi-reply:hover,
body#webinarignition_console .questionBlockIcons.qbi-answer:hover {
	background-color: #1e7a45 !important;
	color: #fff !important;
}

body#webinarignition_console .questionBlockIcons.qbi-reply:hover i,
body#webinarignition_console .questionBlockIcons.qbi-reply:hover svg,
body#webinarignition_console .questionBlockIcons.qbi-answer:hover i,
body#webinarignition_console .questionBlockIcons.qbi-answer:hover svg {
	color: #fff !important;
	fill: #fff !important;
}

/* --- #urabfrage (Tobias 2026-10-17): Frage 1 ist die ADRESSE.
 *     Die Frage stand vorher als Radioknopf-Trio oben; jetzt steht das Feld zuerst, der erkannte
 *     Satz (#wiwcc-site-kind) direkt darunter, und die drei Wege liegen eingeklappt darunter
 *     ("Erkannt anders? Selbst einstellen") — der Host muss nicht wählen, was WI ihm sagen kann.
 *     Erscheinung: dieselbe Creme/Flammen-Sprache wie die übrige Konsole, keine neue Palette. */
body#webinarignition_console .wi-woo-cta-step .wi-woo-cta-q {
	display: block;
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--wi-ink);
}
body#webinarignition_console #wiwcc-shopurl-wrap {
	margin: 0 0 10px;
}
body#webinarignition_console #wiwcc-shopurl-wrap input[type="text"] {
	width: 100%;
	max-width: 720px;
}
body#webinarignition_console #wiwcc-site-kind {
	display: block;
	margin: 6px 0 10px;
	padding: 8px 12px;
	border-left: 3px solid var(--wi-brand);
	border-radius: 6px;
	background: var(--wi-cream-2);
	color: var(--wi-ink);
	font-size: 13px;
	line-height: 1.45;
}
body#webinarignition_console #wiwcc-site-kind.is-own,
body#webinarignition_console #wiwcc-site-kind.is-other,
body#webinarignition_console #wiwcc-site-kind.is-external {
	border-left-color: var(--wi-brand);
}
body#webinarignition_console #wiwcc-site-kind.is-unknown {
	border-left-color: #b8860b;
}
body#webinarignition_console .wi-woo-cta-ways {
	margin: 0 0 12px;
	border: 1px solid var(--wi-cream-line);
	border-radius: 8px;
	background: var(--wi-cream-2);
}
body#webinarignition_console .wi-woo-cta-ways > summary {
	cursor: pointer;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wi-ink-soft);
	list-style: none;
}
body#webinarignition_console .wi-woo-cta-ways > summary::-webkit-details-marker {
	display: none;
}
body#webinarignition_console .wi-woo-cta-ways > summary::before {
	content: "\25B8";
	display: inline-block;
	margin-right: 7px;
	color: var(--wi-brand);
	transition: transform .15s ease;
}
body#webinarignition_console .wi-woo-cta-ways[open] > summary::before {
	transform: rotate(90deg);
}
body#webinarignition_console .wi-woo-cta-ways .wi-woo-cta-radio {
	display: block;
	padding: 4px 14px 4px 30px;
	font-size: 13px;
}
body#webinarignition_console .wi-woo-cta-ways .wi-woo-cta-radio:last-child {
	padding-bottom: 12px;
}

/* --- 7.20 Registranten-Konsole: warme Flaechen statt Grau (Tobias 2026-10-30) ---
 * Das Panel "Add registrants" und die KPI-Kacheln waren grau (#E9E9E9, #a8a29b).
 * Jetzt dieselbe cremige Flaeche wie der Registrantenkopf, mit warmem Rand statt
 * grauer Strichlinie. Die Kacheln laufen von hell nach kraeftig: Stufe 1 total,
 * Stufe 2 attended, Stufe 3 purchased am staerksten. */
body#webinarignition_console .importCSVArea {
	background-color: var(--wi-cream-2) !important;
	border: 1px solid #ead9bd !important;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(90, 60, 30, 0.05);
}
body#webinarignition_console .importCSVArea h2,
body#webinarignition_console .importCSVArea h4 {
	color: var(--wi-ink) !important;
}
body#webinarignition_console .wi-add-step,
body#webinarignition_console .wi-add-tabs {
	border-bottom-color: #eadfca !important;
}
body#webinarignition_console .wi-add-step-num {
	background-color: #e8895c !important;
	color: #fff !important;
}
body#webinarignition_console .wi-add-step-num.wi-add-step-num-off {
	background-color: #e3d5bd !important;
	color: #7a6a52 !important;
}

/* KPI-Kacheln: hell -> kraeftig, ohne Grau. */
body#webinarignition_console .leadStat1 {
	background-color: #f3c8a9 !important;   /* Stufe 1: helles Apricot */
	color: #5b2f16 !important;
}
body#webinarignition_console .leadStat2 {
	background-color: #e5895a !important;   /* Stufe 2: Apricot */
	color: #fff !important;
}
body#webinarignition_console .leadStat3 {
	background-color: #d9c3a5 !important;   /* Evergreen: awaiting playback */
	color: #4a3a26 !important;
}
body#webinarignition_console .leadStat4 {
	background-color: #c13f10 !important;   /* Stufe 3: purchased, am kraeftigsten */
	color: #fff !important;
}
body#webinarignition_console .leadStat1 .leadStatLabel,
body#webinarignition_console .leadStat3 .leadStatLabel {
	background-color: rgba(90, 60, 30, 0.12) !important;
	color: #5b2f16 !important;
}
body#webinarignition_console .leadStat2 .leadStatLabel,
body#webinarignition_console .leadStat4 .leadStatLabel {
	background-color: rgba(60, 47, 38, 0.22) !important;
	color: #fff !important;
}

/* Fusszeile der Reiter: Haekchen und Knopf auf einer Linie, mittig. */
body#webinarignition_console .wi-add-foot,
body#webinarignition_console .wi-lead-add-foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #eadfca;
}
body#webinarignition_console .wi-add-foot label,
body#webinarignition_console .wi-lead-add-foot label,
body#webinarignition_console .wi-import-sendmail-wrap,
body#webinarignition_console .wi-lead-add-sendmail-wrap {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	line-height: 1.2;
	cursor: pointer;
}
body#webinarignition_console .wi-add-foot input[type="checkbox"],
body#webinarignition_console .wi-lead-add-foot input[type="checkbox"] {
	margin: 0 !important;
	flex: none;
}
body#webinarignition_console .wi-add-foot .button,
body#webinarignition_console .wi-lead-add-foot .button {
	margin: 0 !important;
}

/* Die globale Knopf-Regel oben malt JEDEN <button> in Flammen-Orange. Fuer die
 * Reiter der Registranten-Konsole gilt das nicht: nur der offene Reiter ist
 * gefuellt, die anderen bleiben ruhig (Tobias 2026-10-30). */
body#webinarignition_console .wi-add-tabs .wi-add-tab {
	background-color: #fffdf8 !important;
	border-color: #e3d5bd !important;
	color: #6b5540 !important;
	background-image: none !important;
	font-weight: 600;
}
body#webinarignition_console .wi-add-tabs .wi-add-tab:hover {
	border-color: #d8a179 !important;
	color: #b8481c !important;
	background-color: #fff7ef !important;
}
body#webinarignition_console .wi-add-tabs .wi-add-tab.wi-add-tab--active,
body#webinarignition_console .wi-add-tabs .wi-add-tab.wi-add-tab--active:hover {
	background-color: var(--wi-brand) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
}
/* "Export example CSV" ist eine Randnotiz, kein Knopf. */
body#webinarignition_console .wi-add-example-btn {
	background: transparent !important;
	border: 0 !important;
	padding: 2px 4px !important;
	color: #b8481c !important;
	font-size: 12.5px;
	text-decoration: underline;
	box-shadow: none !important;
}
body#webinarignition_console .wi-add-example-btn:hover {
	color: #8f3613 !important;
	background: transparent !important;
}

/* Gesperrter Knopf und Datei-Feld im Reiter "CSV file": kein Grau, warme Toene. */
body#webinarignition_console .wi-btn-locked,
body#webinarignition_console .wi-btn-locked:hover {
	background-color: #f6efe2 !important;
	border-color: #e6dac6 !important;
	color: #b3a48d !important;
	cursor: not-allowed;
	box-shadow: none !important;
}
body#webinarignition_console #csv-upload-form {
	border: 1px solid #e6dac6 !important;
	border-radius: 6px;
	background: #fffdf8;
	padding: 10px 12px;
}
body#webinarignition_console .wi-add-step-label {
	color: #4a3f31 !important;
}

/* Pflichtfeld ohne Wert: warmer roter Rand statt stiller Absage (Tobias 2026-10-30). */
body#webinarignition_console .wi-lead-add-email.wi-lead-add-email-missing {
	border-color: #c0392b !important;
	box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12) !important;
}

/* Inline-Bestaetigung beim Loeschen eines Registranten (Tobias 2026-10-30):
 * klein, warm, direkt in der Zeile, kein Browser-Dialog. */
body#webinarignition_console .wi-delete-confirm {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
body#webinarignition_console .wi-delete-confirm button {
	padding: 2px 8px !important;
	font-size: 11.5px !important;
	line-height: 1.6 !important;
	border-radius: 4px !important;
	background-color: #fffdf8 !important;
	border: 1px solid #e3d5bd !important;
	color: #6b5540 !important;
	box-shadow: none !important;
}
body#webinarignition_console .wi-delete-confirm .wi-delete-yes {
	background-color: #c0392b !important;
	border-color: #a93226 !important;
	color: #fff !important;
}
body#webinarignition_console .wi-delete-confirm .wi-delete-yes:hover {
	background-color: #a93226 !important;
}
body#webinarignition_console .wi-delete-confirm .wi-delete-no:hover {
	border-color: #d8a179 !important;
	color: #b8481c !important;
}
body#webinarignition_console .wi-delete-error {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: #c0392b;
}

/* "Export example CSV" als echter Link, nicht als halber Knopf (Tobias 2026-10-30). */
body#webinarignition_console .wi-add-example-btn,
body#webinarignition_console .wi-add-example-btn:hover,
body#webinarignition_console .wi-add-example-btn:focus {
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: #b8481c !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-shadow: none !important;
}
body#webinarignition_console .wi-add-example-btn:hover {
	color: #8f3613 !important;
	text-decoration: none;
}

/* Der Knopf "Add registrants" ist rot gefuellt, solange das Panel offen ist. Die Regel in
 * wi-interactive-console.css hat kein !important und verliert gegen die Knopf-Farbe des Themes
 * (Tobias 2026-10-30). */
body#webinarignition_console #importLeads.wi-add-open,
body#webinarignition_console #importLeads.wi-add-open:hover,
body#webinarignition_console #importLeads.wi-add-open:focus {
	background-color: var(--wi-brand) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
}

/* Dateifeld: eigener Knopf und eigener Dateiname, damit die Beschriftung englisch bleibt,
 * egal welche Sprache der Browser spricht. */
body#webinarignition_console .wi-file-pick {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	width: 100%;
}
body#webinarignition_console .wi-file-native {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
body#webinarignition_console .wi-file-btn {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #6b5540;
	background: #fffdf8;
	border: 1px solid #e3d5bd;
	border-radius: 6px;
}
body#webinarignition_console .wi-file-pick:hover .wi-file-btn {
	border-color: #d8a179;
	color: #b8481c;
}
body#webinarignition_console .wi-file-name {
	font-size: 13px;
	color: #7a6a52;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* UTM-Filterchips: inaktiv leicht gelb, aktiv orange, Zuruecksetzen als kleiner Link.
 * Die allgemeine Knopf-Farbe der Konsole hat alle Chips gleich orange gemalt, aktiv und
 * inaktiv waren nicht zu unterscheiden (Tobias 2026-10-30). */
body#webinarignition_console .wi-console-leads-chip,
body#webinarignition_console .wi-console-leads-chip:hover {
	background-color: #fdf6e3 !important;
	border: 1px solid #e6d9b8 !important;
	color: #6b5540 !important;
	box-shadow: none !important;
	font-weight: 600;
}
body#webinarignition_console .wi-console-leads-chip:hover {
	background-color: #fbf0d7 !important;
	border-color: #d9b061 !important;
	color: #8a5a13 !important;
}
body#webinarignition_console .wi-console-leads-chip.is-active,
body#webinarignition_console .wi-console-leads-chip.is-active:hover {
	background-color: var(--wi-brand) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
}
body#webinarignition_console .wi-console-leads-utm-chips-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
body#webinarignition_console .wi-console-leads-utm-reset {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 2px !important;
	font-size: 12px !important;
	color: #b8481c !important;
	text-decoration: underline;
	cursor: pointer;
}
body#webinarignition_console .wi-console-leads-utm-reset:hover {
	color: #8f3613 !important;
	text-decoration: none;
}

/* =====================================================================
 * 9. Letzte Lesbarkeits- und Aufraeumrunde (Tobias 2026-11-12)
 *
 *    Gemessen auf der Konsole, nicht geschaetzt:
 *      .statsDashbord  border-top/bottom 3px   -> die zwei dicken Striche
 *                      um "Live-Konsole Dashboard"
 *      .topArea        border-bottom 1px +
 *      .mainWrapper    border-top 1px          -> eine 2px-Kante unter dem Kopf
 *      .cb-enable      Hintergrund switch.gif  -> "On" war gruen, Text braun
 *      .live_webinar_ctas_position_label.active color #111 auf Orange
 *      Editor-Werkzeugleiste: Icon-Farbe dunkel auf orangem Knopf
 * ===================================================================== */

/* Keine dicken Striche mehr um die Ueberschrift und keine doppelte Kante
 * unter dem Kopf. Eine Linie pro Schnitt reicht, wie auf der Einstellungen-Seite. */
body#webinarignition_console .statsDashbord {
	border-width: 0 !important;
}
body#webinarignition_console .mainWrapper {
	border-top: 0 !important;
}

/* --- On/Off in Marken-Orange -------------------------------------------
 * Die alten Schalter kommen aus switch.gif (gruen/grau) und werden von der
 * Bilddatei gefaerbt. Bild aus, Flaeche in Orange, Text weiss. Aus bleibt
 * creme mit dunkler Schrift, damit man den Zustand ohne Farbunterscheidung
 * lesen kann (WCAG: nicht nur Farbe). */
body#webinarignition_console .cb-enable,
body#webinarignition_console .cb-disable,
body#webinarignition_console .cb-enable span,
body#webinarignition_console .cb-disable span {
	background-image: none !important;
	border-radius: 3px;
	line-height: 30px;
}
body#webinarignition_console .cb-enable,
body#webinarignition_console .cb-enable.selected {
	background-color: var(--wi-brand-btn) !important;
	border: 1px solid var(--wi-brand-10) !important;
}
body#webinarignition_console .cb-enable span,
body#webinarignition_console .cb-enable.selected span {
	color: #fff !important;
	background-image: none !important;
}
body#webinarignition_console .cb-disable,
body#webinarignition_console .cb-disable.selected {
	background-color: var(--wi-cream-3) !important;
	border: 1px solid var(--wi-cream-line) !important;
}
body#webinarignition_console .cb-disable span,
body#webinarignition_console .cb-disable.selected span {
	color: var(--wi-ink) !important;
	background-image: none !important;
}

/* --- Gewaehlte Position (Overlay / Sidebar) ----------------------------
 * Der Grund war orange, die Schrift stand auf #111 (gemessen). */
body#webinarignition_console .live_webinar_ctas_position_label.active,
body#webinarignition_console .live_webinar_ctas_alignment_label.active {
	background-color: var(--wi-brand-btn) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
}

/* --- Editor-Werkzeugleiste (Klassischer Editor) ------------------------
 * Die Knoepfe traegt die Konsole orange ein, die Symbole blieben dunkel.
 * Weisse Symbole und weisse Beschriftung, damit jedes Werkzeug lesbar ist. */
body#webinarignition_console .mce-btn,
body#webinarignition_console .mce-btn button,
body#webinarignition_console .mce-btn .mce-ico,
body#webinarignition_console .mce-btn .mce-txt,
body#webinarignition_console .mce-btn i,
body#webinarignition_console .mce-btn small,
body#webinarignition_console .mce-panel .mce-btn {
	color: #fff !important;
}
body#webinarignition_console .mce-btn .mce-ico,
body#webinarignition_console .mce-btn i {
	text-shadow: none !important;
}
body#webinarignition_console .mce-btn.mce-active,
body#webinarignition_console .mce-btn.mce-active:hover {
	background-color: var(--wi-brand-10) !important;
}
body#webinarignition_console .mce-btn svg,
body#webinarignition_console .mce-btn svg path {
	fill: #fff !important;
}

/* --- Teilnehmer-Tabelle: waagerecht scrollen statt abschneiden --------- */
body#webinarignition_console .wi-leads-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	/* Platz fuer den Scrollbalken, damit die letzte Zeile nicht darunter liegt. */
	padding-bottom: 2px;
}
body#webinarignition_console .wi-leads-scroll > table {
	margin-bottom: 0;
}

/* --- Mobil: Luft unten ------------------------------------------------
 * Der Stift (Mini-Agent) und die Support-Blase liegen ueber dem Inhalt.
 * Auf kleinen Displays endet der Inhalt deshalb ueber den Icons. */
@media screen and (max-width: 782px) {
	body#webinarignition_console .mainWrapper,
	body#webinarignition_console .innerContainer {
		padding-bottom: 120px !important;
	}
	/* CTA-Kopf mobil: Titel oben ueber die volle Breite, die Knoepfe copy und
	 * delete darunter. Vorher sassen sie absolut rechts und deckten den Titel zu;
	 * mit padding-right: 200px brach der Titel dafuer Wort fuer Wort um. */
	body#webinarignition_console .auto_action_header {
		display: block !important;
		padding: 10px 12px !important;
	}
	body#webinarignition_console .auto_action_header h4 {
		padding-right: 34px !important;
		margin-bottom: 8px !important;
	}
	body#webinarignition_console .auto_action_header .wi-cta-header-actions {
		position: static !important;
		transform: none !important;
		right: auto !important;
		top: auto !important;
		display: flex;
		gap: 8px;
		/* copy und delete stehen NEBENEINANDER, nie untereinander (Tobias 2026-11-12). */
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	body#webinarignition_console .auto_action_header .wi-cta-header-actions .btn {
		color: var(--wi-ink) !important;
		white-space: nowrap;
	}
}

/* --- Aktiver Reiter bleibt orange -------------------------------------
 * Der aktive Reiter traegt "dashTopBTN button secondary small success".
 * Er hat damit ZWEI Klassen (.button.secondary), und die Creme-Regel weiter
 * oben ist gleich spezifisch, steht aber spaeter in der Datei: sie gewann und
 * der offene Reiter sah aus wie jeder andere (gemessen 2026-11-12).
 * Diese Regel zaehlt eine Klasse mehr und gewinnt damit sicher. */
body#webinarignition_console .dashTopBTN.success,
body#webinarignition_console .dashTopBTN.success.secondary {
	background-color: var(--wi-brand) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
}
body#webinarignition_console .dashTopBTN.success:hover,
body#webinarignition_console .dashTopBTN.success:focus,
body#webinarignition_console .dashTopBTN.success.secondary:hover,
body#webinarignition_console .dashTopBTN.success.secondary:focus {
	background-color: var(--wi-brand-10) !important;
	color: #fff !important;
}

/* =====================================================================
 * 10. Orange Flaeche, weisser Text: eine Regel (Tobias 2026-11-12)
 *
 *    Nicht jede Stelle einzeln flicken: wer in dieser Haut Orange malt,
 *    bekommt weisse Schrift. Creme-Flaechen (secondary, btn, chips) bleiben
 *    ausgenommen, dort bleibt die Schrift dunkel. Statusfarben sind nicht
 *    betroffen, weil sie keine Orange-Flaeche haben.
 * ===================================================================== */
body#webinarignition_console .button:not(.secondary),
body#webinarignition_console button:not(.secondary),
body#webinarignition_console input[type="submit"],
body#webinarignition_console .btn-primary,
body#webinarignition_console .button.primary,
body#webinarignition_console .button.success,
body#webinarignition_console .dashTopBTN.success,
body#webinarignition_console .lc-btn.success,
body#webinarignition_console .lc-btn.active,
body#webinarignition_console .webinarStatusSelected,
body#webinarignition_console .cb-enable,
body#webinarignition_console .cb-enable span,
body#webinarignition_console .live_webinar_ctas_position_label.active,
body#webinarignition_console .live_webinar_ctas_alignment_label.active,
body#webinarignition_console .wi-console-leads-chip.is-active,
body#webinarignition_console .wi-prompter-mbtn--start,
body#webinarignition_console .dash-block-1,
body#webinarignition_console .dash-block-2,
body#webinarignition_console .dash-block-3,
body#webinarignition_console .dash-block-4 {
	color: #fff !important;
}

/* Symbol und Text in den Reitern mit demselben Abstand.
 * Gemessen 2026-11-12: "Dashboard" und "Prompter" klebten am Symbol, "CTAs"
 * und "Fragen" hatten Luft, weil der Abstand aus einem Leerzeichen im Markup
 * kam. Jetzt gibt ihn das Layout, fuer alle gleich. */
body#webinarignition_console .wi-console-main-nav .lc-btn,
body#webinarignition_console .wi-console-main-nav .dashTopBTN,
body#webinarignition_console .wi-console-external-nav .lc-btn,
body#webinarignition_console .wi-console-external-nav .dashTopBTN {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
body#webinarignition_console .wi-console-main-nav a > svg,
body#webinarignition_console .wi-console-main-nav a > i,
body#webinarignition_console .wi-console-external-nav a > svg,
body#webinarignition_console .wi-console-external-nav a > i {
	margin: 0 !important;
	flex: 0 0 auto;
}

/* --- Ueberschriften in der Systemschrift (Tobias 2026-11-12) -----------
 * Das Theme setzt Ueberschriften mit !important auf Roboto Slab. In der
 * Konsole stand damit "Live CTAs" in einer Serifenschrift, waehrend alles
 * andere Systemschrift war. Die Konsole folgt jetzt den Einstellungen:
 * eine Schrift, auch in den Ueberschriften. */
body#webinarignition_console h1,
body#webinarignition_console h2,
body#webinarignition_console h3,
body#webinarignition_console h4,
body#webinarignition_console h5,
body#webinarignition_console h6,
body#webinarignition_console .statsTitle,
body#webinarignition_console .statsTitleCopy,
body#webinarignition_console .wi-console-topbar-name {
	font-family: var(--wi-font) !important;
}

/* =====================================================================
 * 11. Eine Flaeche, ein Name (Tobias 2026-11-12)
 *
 *    Damit eine Farbe an EINER Stelle aenderbar bleibt, bekommt jede orange
 *    Flaeche denselben Namen. Wer die Farbe global aendert, aendert
 *    --wi-face. Wer nur eine Stelle aendert, haengt dort eine eigene Klasse
 *    an (Beispiel: .wi-face-brand--tab) und laesst die anderen in Ruhe.
 *    Text auf der Flaeche ist immer weiss, nie dunkel.
 * ===================================================================== */
body#webinarignition_console {
	--wi-face: var(--wi-brand-btn);
	/* Auch die kraeftige Fassung ist knopf-tief: auf dem reinen Marken-Orange (#e64f1d)
	   stand die weisse Schrift bei 3,82:1 (gemessen 2026-11-12). */
	--wi-face-strong: var(--wi-brand-btn);
	--wi-face-down: var(--wi-brand-10);
	--wi-on-face: #ffffff;
}
body#webinarignition_console .wi-face-brand,
body#webinarignition_console .wi-face-brand:focus {
	background-color: var(--wi-face) !important;
	border-color: var(--wi-face-down) !important;
	color: var(--wi-on-face) !important;
}
body#webinarignition_console .wi-face-brand:hover,
body#webinarignition_console .wi-face-brand:active {
	background-color: var(--wi-face-down) !important;
	color: var(--wi-on-face) !important;
}
/* Abweichungen je Stelle, ohne die Grundfarbe zu kopieren. */
body#webinarignition_console .wi-face-brand--tab {
	background-color: var(--wi-face-strong) !important;
}

/* =====================================================================
 * 12. Jede Flaeche traegt ihre Schrift lesbar (Tobias 2026-11-12, hart)
 *
 *    Regel: "Jede Flaeche, die Orange traegt, traegt weisse Schrift, ohne
 *    Ausnahme" und diese Schrift muss lesbar sein.
 *
 *    Der Kontrast-Waechter ist in der Konsole abgeschaltet (er schrieb
 *    Inline-Farben mit !important und machte markierten Text dunkel auf
 *    Orange). Damit ist die Konsole selbst zustaendig. Gemessen am
 *    12.11.2026 bei 390px lagen die Flaechen unten unter AA, weil die
 *    Palette mit der Zeit immer heller wurde:
 *      aktiver Reiter          weiss auf #e64f1d   3,82:1
 *      Flaeche "Live"          weiss auf #e64f1d   3,82:1
 *      KPI 1 Live-Zuschauer    weiss auf #e64f1d   3,82:1
 *      KPI 2 Registriert       weiss auf #e8895c   2,57:1
 *      KPI 3 Fragen            weiss auf #d9c3a5   1,71:1
 *      KPI 4 Aktive Fragen     weiss auf #a8a29b   2,53:1
 *      Registrant "angesehen"  weiss auf #e5895a   2,61:1
 *      Reiter "Answered"       #bababa auf Creme     1,94:1
 *
 *    Loesung: die Toene bleiben in ihrer Familie (Flamme, Apricot, Sand,
 *    warmes Grau, Gruen), nur eine Spur tiefer, sodass weiss 4,5:1
 *    erreicht. Kein Element verliert seine weisse Schrift.
 * ===================================================================== */

/* Orange Flaechen mit weisser Schrift: knopf-tief (4,79:1). */
body#webinarignition_console .dashTopBTN.success,
body#webinarignition_console .dashTopBTN.success.secondary,
body#webinarignition_console .webinarStatus.webinarStatusSelected,
body#webinarignition_console .wi-console-leads-chip.is-active,
body#webinarignition_console .wi-add-tabs .wi-add-tab.wi-add-tab--active,
body#webinarignition_console .wi-add-tabs .wi-add-tab.wi-add-tab--active:hover,
body#webinarignition_console .dash-block-6 .dash-stat-label a:first-of-type {
	background-color: var(--wi-brand-btn) !important;
	border-color: var(--wi-brand-btn) !important;
	color: #fff !important;
}

/* KPI-Leiste im Dashboard: gleiche Familie, tief genug fuer weisse Schrift. */
body#webinarignition_console .dash-block-1 { background-color: #cc4318 !important; }
body#webinarignition_console .dash-block-2 { background-color: #b5541f !important; }
body#webinarignition_console .dash-block-3 { background-color: #8a6b45 !important; }
body#webinarignition_console .dash-block-4 { background-color: #6f6a64 !important; }
body#webinarignition_console .dash-block-5 { background-color: #0f7a3d !important; }
body#webinarignition_console .dash-stat-block {
	color: #fff !important;
}
/* Die Beschriftung war zu 90 % deckend; auf dem dunkleren Sand fehlt der Rest. */
body#webinarignition_console .dash-stat-block .dash-stat-label {
	color: #fff !important;
	opacity: 1 !important;
}

/* Registranten-KPI: "angesehen" war weiss auf Apricot (2,61:1). */
body#webinarignition_console .leadStat2 {
	background-color: #b5541f !important;
	color: #fff !important;
}
body#webinarignition_console .leadStat2 .leadStatLabel {
	background-color: rgba(0, 0, 0, 0.18) !important;
	color: #fff !important;
}

/* Mini-Agent im Panel: die Knoepfe "File", "Link", "Own page", "Speak" sind im
 * Konsolen-Kontext orange (globale Knopf-Regel), ihre Schrift kam aus dem Panel
 * und war damit dunkel. Hier festgenagelt: orange Flaeche, weisse Schrift.
 * Der Waechter ist in der Konsole aus; kommt er zurueck, schreibt er Inline-
 * Farben mit !important, deshalb steht die Fuellfarbe hier ebenfalls fest. */
body#webinarignition_console #wi-fea-panel .wi-fea-src {
	background-color: var(--wi-brand-btn) !important;
	border-color: var(--wi-brand-btn) !important;
	color: #fff !important;
	-webkit-text-fill-color: currentColor !important;
}
body#webinarignition_console #wi-fea-panel .wi-fea-src:hover,
body#webinarignition_console #wi-fea-panel .wi-fea-src[aria-expanded="true"] {
	background-color: var(--wi-brand-10) !important;
	border-color: var(--wi-brand-20) !important;
	color: #fff !important;
}

/* Ueberschriften, die noch im hellen Marken-Orange standen (#f5601a auf Weiss = 3,20:1). */
body#webinarignition_console .wi-prompter-title,
body#webinarignition_console .wi-console-insight__title {
	color: var(--wi-brand-btn) !important;
}

/* Reiter "Answered Questions": hellgrau auf Creme war 1,94:1. */body#webinarignition_console .questionTabIt {
	color: var(--wi-ink-soft) !important;
}
body#webinarignition_console .questionTabIt.questionTabSelected,
body#webinarignition_console .questionTabIt.questionTabSelected:hover {
	background-color: var(--wi-cream-3) !important;
	color: var(--wi-ink) !important;
	border-color: #e8dcc8 !important;
}

/* "Replay" im Status-Schalter: abgeschaltet heisst nicht unlesbar (2,59:1). */
body#webinarignition_console #dashboardTab ul.webinarStatus li a.wi-master-replay-disabled,
body#webinarignition_console #dashboardTab ul.webinarStatus li a.wi-master-replay-disabled:hover {
	color: var(--wi-ink-soft) !important;
	opacity: 1 !important;
}