/**
 * 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 {
	--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-ink: #3c2f26;
	--wi-ink-soft: #6b5c50;
}

/* 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) --- */
body#webinarignition_console .btn-primary {
	background-color: var(--wi-brand) !important;
	border-color: var(--wi-brand-10) !important;
	color: #fff !important;
	background-image: none !important;
}
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;
}

/* --- 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): Flammen-Orange */
body#webinarignition_console .button,
body#webinarignition_console button,
body#webinarignition_console .button.primary,
body#webinarignition_console input[type="submit"] {
	background-color: var(--wi-brand) !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;
}

/* "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) !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;
}

/* 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 */
body#webinarignition_console .button,
body#webinarignition_console button {
	border-radius: 6px !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;
}