/**
 * inOri Sales Hub — styles.
 *
 * Everything is scoped under .inori-hub with an ih- prefix, so dropping the
 * Hub into any theme cannot leak styles either way.
 *
 * Farben, Radien und Schriften sind dieselben wie im Medienplan und auf den
 * gedruckten Unterlagen: ein Haus, ein Bild.
 */

.inori-hub {
	--ih-navy: #1c3f5e;
	--ih-navy-dark: #163350;
	--ih-ink: #1c3f5e;
	--ih-accent: #367099;
	--ih-text: #33434f;
	--ih-soft: #5c6b7a;
	--ih-faint: #98a6b3;
	--ih-line: #e3e9ef;
	--ih-hair: #eef2f6;
	--ih-bg: #f5f7fa;
	--ih-card: #fff;

	--ih-gruen: #24704a;
	--ih-gruen-bg: #eef8f1;
	--ih-gelb: #c8892b;
	--ih-gelb-bg: #fbf0dd;
	--ih-rot: #97403f;
	--ih-rot-bg: #fceeee;
	--ih-blau: #2f4d7a;
	--ih-blau-bg: #eef3fb;

	--ih-radius: 14px;

	--ih-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ih-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--ih-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ih-text);
	background: var(--ih-bg);
}

.inori-hub *,
.inori-hub *::before,
.inori-hub *::after {
	box-sizing: border-box;
}

.inori-hub [hidden] {
	display: none !important;
}

/* Die Werkstatt, in der die Werkzeuge warten, bis eine Ansicht sie holt.
   Mit !important, weil manche Themes display auf jedes div setzen und das
   voreingestellte [hidden] damit aushebeln. */
.inori-hub-stash[hidden] {
	display: none !important;
}

/* Ohne eigenen Rahmen und ohne Polster: das eingehängte Werkzeug bringt sein
   eigenes Aussehen mit und soll die volle Breite bekommen. */
.inori-hub .ih-panel {
	min-width: 0;
}

.inori-hub-boot,
.inori-hub-locked {
	padding: 40px 24px;
	text-align: center;
	color: var(--ih-soft, #5c6b7a);
}

.inori-hub-login {
	display: inline-block;
	margin-top: 8px;
	background: #1c3f5e;
	color: #fff;
	border-radius: 8px;
	padding: 9px 18px;
	text-decoration: none;
	font-weight: 600;
}

/* ---------- Anmeldung ---------- */

.inori-hub-gate {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
}

.inori-hub-gate .ih-gate-body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px 60px;
}

.inori-hub-gate .ih-gate-card {
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-radius: 14px;
	padding: 28px 28px 24px;
	width: 100%;
	max-width: 380px;
	box-shadow: 0 10px 30px rgba(12, 24, 38, 0.06);
}

.inori-hub-gate .ih-gate-title {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 700;
	color: var(--ih-ink);
}

.inori-hub-gate .ih-gate-lead {
	margin: 0 0 20px;
	color: var(--ih-soft);
}

.inori-hub-gate form p {
	margin: 0 0 14px;
}

.inori-hub-gate label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ih-faint);
	margin-bottom: 4px;
}

.inori-hub-gate input[type="text"],
.inori-hub-gate input[type="password"] {
	width: 100%;
	border: 1px solid var(--ih-line);
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit;
	color: var(--ih-ink);
	background: #fff;
}

.inori-hub-gate input[type="text"]:focus,
.inori-hub-gate input[type="password"]:focus {
	outline: 2px solid var(--ih-navy);
	outline-offset: 1px;
	border-color: var(--ih-navy);
}

/* Die Erinnern-Zeile ist ein Kästchen mit Text daneben, keine Feldbeschriftung. */
.inori-hub-gate .login-remember label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ih-soft);
	margin: 0;
}

.inori-hub-gate .login-submit {
	margin-top: 18px;
}

.inori-hub-gate input[type="submit"] {
	width: 100%;
	background: var(--ih-navy);
	border: 1px solid var(--ih-navy);
	color: #fff;
	border-radius: 8px;
	padding: 11px 18px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.inori-hub-gate input[type="submit"]:hover {
	background: var(--ih-navy-dark);
	border-color: var(--ih-navy-dark);
}

.inori-hub-gate .ih-gate-foot {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13px;
}

.inori-hub-gate .ih-gate-foot a {
	color: var(--ih-accent);
}

/* ---------- Ganzseitig ---------- */

/* Auf der eigenen Auslieferung gibt es keinen Theme-Rahmen: der Hub nimmt
   das Fenster. Die Regeln stehen bewusst am body, weil das Theme-Stylesheet
   weiterhin geladen wird und dort gern Ränder und Breiten setzt. */
body.inori-hub-page {
	margin: 0;
	padding: 0;
	background: #f5f7fa;
}

body.inori-hub-page .inori-hub,
body.inori-hub-page .inori-hub-gate {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.inori-hub-page .ih-shell,
body.inori-hub-page .inori-hub-gate {
	min-height: 100vh;
}

/* Mit Admin-Leiste bleibt oben ein Streifen; die Höhe darf ihn nicht
   überschiessen, sonst scrollt die Seite ohne Inhalt. */
body.inori-hub-page.admin-bar .ih-shell,
body.inori-hub-page.admin-bar .inori-hub-gate {
	min-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
	body.inori-hub-page.admin-bar .ih-shell,
	body.inori-hub-page.admin-bar .inori-hub-gate {
		min-height: calc(100vh - 46px);
	}
}

/* ---------- Gerüst ---------- */

.inori-hub .ih-shell {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
}

/* Die Kopfleiste folgt den gedruckten Unterlagen: weiss, Logo links, ein
   feiner Strich, dann Übertitel und Name. */
.inori-hub .ih-top {
	background: #fff;
	border-bottom: 1px solid var(--ih-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 22px;
	min-height: 64px;
	flex-wrap: wrap;
}

.inori-hub .ih-top-left {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
	padding: 10px 0;
}

.inori-hub .ih-top-right {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 10px 0;
}

.inori-hub .ih-logo {
	height: 30px;
	width: auto;
	display: block;
	flex: none;
}

.inori-hub .ih-top-rule {
	width: 1px;
	align-self: stretch;
	min-height: 30px;
	background: var(--ih-line);
	flex: none;
}

.inori-hub .ih-top-name {
	min-width: 0;
}

.inori-hub .ih-eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ih-accent);
}

.inori-hub .ih-top-title {
	display: block;
	font-family: var(--ih-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--ih-ink);
}

.inori-hub .ih-stamp,
.inori-hub .ih-user {
	font-size: 13px;
	color: var(--ih-soft);
}

.inori-hub .ih-user {
	font-weight: 600;
	color: var(--ih-ink);
}

/* Auf dem Telefon weicht der Zeitstempel dem Platz. */
@media (max-width: 600px) {
	.inori-hub .ih-stamp {
		display: none;
	}
}

/* ---------- Fusszeile ---------- */

.inori-hub .ih-foot {
	border-top: 1px solid var(--ih-line);
	padding: 16px 24px 22px;
	font-size: 12px;
	color: var(--ih-faint);
}

.inori-hub .ih-foot b {
	color: var(--ih-ink);
	font-weight: 600;
}

.inori-hub .ih-body {
	display: grid;
	grid-template-columns: 220px 1fr;
	flex: 1;
	min-height: 0;
}

.inori-hub .ih-side {
	background: var(--ih-card);
	border-right: 1px solid var(--ih-line);
	padding: 18px 12px;
}

.inori-hub .ih-side-head {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ih-faint);
	padding: 0 8px;
	margin: 14px 0 6px;
}

.inori-hub .ih-side-head:first-child {
	margin-top: 0;
}

.inori-hub .ih-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.inori-hub .ih-nav-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	border: 0;
	background: none;
	border-radius: 8px;
	padding: 8px 10px;
	font: inherit;
	color: var(--ih-text);
	cursor: pointer;
	text-align: left;
}

.inori-hub .ih-nav-item:hover {
	background: var(--ih-hair);
}

.inori-hub .ih-nav-item.is-on {
	background: var(--ih-blau-bg);
	color: var(--ih-navy);
	font-weight: 600;
}

.inori-hub .ih-nav-count {
	font-size: 11px;
	color: var(--ih-faint);
	font-variant-numeric: tabular-nums;
}

.inori-hub .ih-nav-item.is-on .ih-nav-count {
	color: var(--ih-navy);
}

.inori-hub .ih-side-note {
	margin: 20px 8px 0;
	font-size: 11px;
	color: var(--ih-faint);
}

.inori-hub .ih-main {
	padding: 22px 24px 40px;
	min-width: 0;
}

/* ---------- Grundbausteine ---------- */

.inori-hub .ih-h1 {
	font-family: var(--ih-display);
	font-size: 24px;
	font-weight: 600;
	color: var(--ih-ink);
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}

.inori-hub .ih-lead {
	color: var(--ih-soft);
	margin: 0 0 18px;
}

.inori-hub .ih-sub {
	font-size: 12px;
	color: var(--ih-faint);
}

.inori-hub .ih-card {
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 16px;
}

.inori-hub .ih-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.inori-hub .ih-card-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ih-soft);
	margin: 0;
}

.inori-hub .ih-card-note {
	font-size: 11px;
	color: var(--ih-faint);
}

.inori-hub .ih-empty {
	color: var(--ih-faint);
	font-style: italic;
	margin: 4px 0;
}

.inori-hub .ih-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--ih-line);
	background: #fff;
	border-radius: 8px;
	padding: 8px 14px;
	font: inherit;
	font-weight: 600;
	font-size: 13px;
	color: var(--ih-ink);
	cursor: pointer;
	white-space: nowrap;
}

.inori-hub .ih-btn:hover {
	border-color: #cfdae4;
}

.inori-hub .ih-btn.is-primary {
	background: var(--ih-navy);
	border-color: var(--ih-navy);
	color: #fff;
}

.inori-hub .ih-btn.is-primary:hover {
	background: var(--ih-navy-dark);
}

.inori-hub .ih-btn.is-on {
	background: var(--ih-blau-bg);
	border-color: var(--ih-blau);
	color: var(--ih-navy);
}

.inori-hub .ih-btn.is-ghost {
	border-color: transparent;
	color: var(--ih-blau);
}

/* Der Lösch-Knopf steht links, abseits der eigentlichen Aktion. */
.inori-hub .ih-btn.is-danger {
	color: var(--ih-rot, #b3261e);
	margin-right: auto;
}

.inori-hub .ih-btn.is-small {
	padding: 5px 10px;
	font-size: 12px;
}

.inori-hub .ih-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.inori-hub .ih-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	border-radius: 6px;
	padding: 3px 9px;
	white-space: nowrap;
}

.inori-hub .ih-pill.is-gruen { color: var(--ih-gruen); background: var(--ih-gruen-bg); }
.inori-hub .ih-pill.is-gelb  { color: var(--ih-gelb);  background: var(--ih-gelb-bg); }
.inori-hub .ih-pill.is-rot   { color: var(--ih-rot);   background: var(--ih-rot-bg); }
.inori-hub .ih-pill.is-blau  { color: var(--ih-blau);  background: var(--ih-blau-bg); }

.inori-hub .ih-meter {
	height: 5px;
	border-radius: 3px;
	background: var(--ih-hair);
	overflow: hidden;
	margin: 6px 0;
}

.inori-hub .ih-meter i {
	display: block;
	height: 100%;
	background: var(--ih-blau);
}

.inori-hub .ih-meter i.is-gruen { background: var(--ih-gruen); }
.inori-hub .ih-meter i.is-gelb  { background: var(--ih-gelb); }
.inori-hub .ih-meter i.is-blau  { background: var(--ih-blau); }

/* ---------- Kennzahlen ---------- */

.inori-hub .ih-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}

.inori-hub .ih-tile {
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-top: 3px solid var(--ih-blau);
	border-radius: 12px;
	padding: 16px 18px;
}

.inori-hub .ih-tile.is-gruen { border-top-color: var(--ih-gruen); }
.inori-hub .ih-tile.is-gelb  { border-top-color: var(--ih-gelb); }
.inori-hub .ih-tile.is-rot   { border-top-color: var(--ih-rot); }
.inori-hub .ih-tile.is-ink   { border-top-color: var(--ih-ink); }

.inori-hub .ih-tile-value {
	font-size: 30px;
	font-weight: 700;
	color: var(--ih-ink);
	line-height: 1.1;
}

.inori-hub .ih-tile-label {
	font-size: 12px;
	color: var(--ih-soft);
	margin-top: 4px;
}

.inori-hub .ih-schlag {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 18px;
}

.inori-hub .ih-schlag-label {
	font-size: 12px;
	color: var(--ih-soft);
}

.inori-hub .ih-schlag-value {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.inori-hub .ih-schlag-value strong {
	font-size: 26px;
	color: var(--ih-ink);
}

.inori-hub .ih-delta {
	font-size: 12px;
	font-weight: 600;
	color: var(--ih-faint);
}

.inori-hub .ih-delta.is-up   { color: var(--ih-gruen); }
.inori-hub .ih-delta.is-down { color: var(--ih-rot); }

.inori-hub .ih-schlag-foot {
	font-size: 11px;
	color: var(--ih-faint);
}

/* ---------- Spalten ---------- */

.inori-hub .ih-cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 16px;
	align-items: start;
}

.inori-hub .ih-callrow {
	display: grid;
	grid-template-columns: 1.4fr 1fr auto auto;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid var(--ih-hair);
}

.inori-hub .ih-callrow:first-of-type {
	border-top: 0;
}

.inori-hub .ih-callrow-name {
	font-weight: 600;
	color: var(--ih-ink);
}

.inori-hub .ih-callrow-meta {
	font-size: 12px;
	color: var(--ih-faint);
}

.inori-hub .ih-callrow-role {
	font-size: 13px;
	color: var(--ih-soft);
}

.inori-hub .ih-goldrow {
	margin-bottom: 10px;
}

.inori-hub .ih-goldrow-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.inori-hub .ih-quote {
	margin: 0 0 12px;
	padding-left: 12px;
	border-left: 3px solid var(--ih-line);
}

.inori-hub .ih-quote p {
	margin: 0;
	color: var(--ih-ink);
}

.inori-hub .ih-quote cite {
	font-size: 11px;
	color: var(--ih-faint);
	font-style: normal;
}

/* ---------- Tabelle ---------- */

.inori-hub .ih-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.inori-hub .ih-search {
	width: 100%;
	max-width: 340px;
	border: 1px solid var(--ih-line);
	border-radius: 8px;
	padding: 8px 12px;
	font: inherit;
}

.inori-hub .ih-rowactions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	white-space: nowrap;
}

.inori-hub .ih-search:focus,
.inori-hub .ih-notearea:focus,
.inori-hub .ih-select:focus,
.inori-hub .ih-btn:focus-visible,
.inori-hub .ih-nav-item:focus-visible,
.inori-hub .ih-tab:focus-visible,
.inori-hub .ih-tablewrap {
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-radius: 12px;
	overflow-x: auto;
}

.inori-hub .ih-table {
	width: 100%;
	border-collapse: collapse;
}

.inori-hub .ih-table th,
.inori-hub .ih-table td {
	text-align: left;
	padding: 10px 14px;
	border-bottom: 1px solid var(--ih-hair);
	vertical-align: top;
}

.inori-hub .ih-table th {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ih-faint);
	background: #fafcfd;
}

.inori-hub .ih-table tbody tr:last-child td {
	border-bottom: 0;
}

.inori-hub .ih-date {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---------- Pipeline ---------- */

.inori-hub .ih-lanes {
	display: grid;
	/* Schmal genug, dass alle sechs Stufen auf einem Desktop nebeneinander
	   stehen — eine Pipeline liest sich nur als eine Reihe. */
	grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
	gap: 12px;
	align-items: start;
}

.inori-hub .ih-lane {
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-radius: 12px;
	padding: 12px;
}

.inori-hub .ih-lane-head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ih-soft);
	margin-bottom: 10px;
}

.inori-hub .ih-lane-item {
	border-top: 1px solid var(--ih-hair);
	padding: 8px 0;
}

/* Die Aktionen erscheinen erst, wenn die Karte gemeint ist — sonst
   bestünde die Spalte nur noch aus Knöpfen. Sie brechen um und teilen
   sich die Spaltenbreite: eine Pipeline-Spalte ist schmal, und ein
   abgeschnittener Knopf ist keiner. */
.inori-hub .ih-lane-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.15s ease, margin 0.15s ease;
}

.inori-hub .ih-lane-actions .ih-btn {
	flex: 1 1 auto;
	min-width: 0;
	padding: 5px 8px;
	white-space: nowrap;
}

.inori-hub .ih-lane-item:hover .ih-lane-actions,
.inori-hub .ih-lane-item:focus-within .ih-lane-actions {
	max-height: 76px;
	margin-top: 6px;
}

/* Ohne Mauszeiger gibt es kein Hover — dann stehen die Knöpfe immer da. */
@media (hover: none) {
	.inori-hub .ih-lane-actions {
		max-height: 76px;
		margin-top: 6px;
	}
}

.inori-hub .ih-lane-name {
	font-weight: 600;
	color: var(--ih-ink);
	font-size: 13px;
}

/* ---------- Simulator ---------- */

.inori-hub .ih-sim-head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.inori-hub .ih-sim-who {
	flex: 1 1 200px;
	min-width: 0;
}

.inori-hub .ih-sim-name {
	font-weight: 600;
	color: var(--ih-ink);
}

.inori-hub .ih-tabs {
	display: inline-flex;
	border: 1px solid var(--ih-line);
	border-radius: 8px;
	overflow: hidden;
}

.inori-hub .ih-tab {
	border: 0;
	background: #fff;
	padding: 8px 14px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ih-soft);
	cursor: pointer;
}

.inori-hub .ih-tab.is-on {
	background: var(--ih-navy);
	color: #fff;
}

.inori-hub .ih-clock {
	font-variant-numeric: tabular-nums;
	font-size: 17px;
	color: var(--ih-ink);
	min-width: 62px;
}

.inori-hub .ih-sim-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-left: auto;
}

.inori-hub .ih-practice {
	flex: 1 0 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	border-top: 1px solid var(--ih-hair);
	padding-top: 12px;
	margin-top: 4px;
}

.inori-hub .ih-practice-flag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ih-gelb);
	background: var(--ih-gelb-bg);
	border-radius: 6px;
	padding: 3px 9px;
}

.inori-hub .ih-practice-brief {
	flex: 1 0 100%;
	margin: 0;
	font-size: 12px;
	color: var(--ih-soft);
}

.inori-hub .ih-picker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--ih-soft);
}

.inori-hub .ih-picker select,
.inori-hub .ih-select {
	border: 1px solid var(--ih-line);
	border-radius: 7px;
	padding: 6px 9px;
	font: inherit;
	font-size: 13px;
	background: #fff;
}

/* Der Simulator läuft in einer Spalte: Verlauf, Skript, Reaktion, Wortlaut —
   in der Reihenfolge, in der das Gespräch abläuft. Eine Seitenleiste daneben
   hätte nur den Blick geteilt. */

.inori-hub .ih-trail {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-radius: var(--ih-radius);
	padding: 12px 16px;
	margin-bottom: 14px;
}

.inori-hub .ih-trail-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ih-faint);
	flex: none;
}

.inori-hub .ih-trail-steps {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	min-width: 0;
}

.inori-hub .ih-trail-step {
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid transparent;
}

/* Erledigt ist grün, worin man gerade steckt gelb. */
.inori-hub .ih-trail-step.is-done {
	background: var(--ih-gruen-bg);
	color: var(--ih-gruen);
	border-color: var(--ih-gruen-bg);
}

.inori-hub .ih-trail-step.is-open {
	background: var(--ih-gelb-bg);
	color: var(--ih-gelb);
	border-color: var(--ih-gelb);
}

/* ---------- Firma und Kontakt beim Loggen ----------

   Ohne .inori-hub davor: der Log-Dialog hängt am body, nicht in der
   Anwendung — eine Regel im Hub-Bereich erreichte ihn nie. Und weil dort auch
   die Farb-Token nicht gelten, stehen die Werte hier ausgeschrieben. */

.ih-pick {
	margin-bottom: 14px;
}

.ih-pick-results {
	max-height: 240px;
	overflow-y: auto;
	margin-top: 6px;
}

.ih-pick-row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "name tag" "meta tag";
	gap: 2px 10px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-top: 1px solid #eef2f6;
	padding: 9px 4px;
	font: inherit;
	cursor: pointer;
}

.ih-pick-row:hover {
	background: #f5f7fa;
}

.ih-pick-name {
	grid-area: name;
	font-weight: 600;
	color: #1c3f5e;
}

.ih-pick-row .ih-sub {
	grid-area: meta;
	font-size: 13px;
	color: #5c6b7a;
}

.ih-pick-tag {
	grid-area: tag;
	align-self: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 3px 9px;
	background: #eef2f6;
	color: #5c6b7a;
}

.ih-pick-tag.is-hubspot {
	background: #fbf0dd;
	color: #c8892b;
}

.ih-pick-chosen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #f5f7fa;
	border: 1px solid #e3e9ef;
	border-radius: 10px;
	padding: 9px 12px;
	margin-top: 6px;
}

.ih-pick-chosen span span {
	display: block;
	font-size: 13px;
	color: #5c6b7a;
}

/* ---------- Fassungen ---------- */

.inori-hub .ih-version {
	display: grid;
	grid-template-columns: 130px 1fr 1fr auto;
	gap: 10px;
	align-items: baseline;
	padding: 9px 0;
	border-top: 1px solid var(--ih-hair);
}

.inori-hub .ih-version:first-of-type {
	border-top: 0;
}

.inori-hub .ih-version.is-on {
	font-weight: 600;
}

.inori-hub .ih-node-entry {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ih-gruen);
	background: var(--ih-gruen-bg);
	border-radius: 999px;
	padding: 3px 9px;
}

.inori-hub .ih-step {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.inori-hub .ih-step-tag {
	background: var(--ih-navy);
	color: #fff;
	border-radius: 7px;
	padding: 4px 11px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.inori-hub .ih-step-goal {
	font-size: 13px;
	color: var(--ih-soft);
}

.inori-hub .ih-says {
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-left: 4px solid var(--ih-navy);
	border-radius: 12px;
	padding: 18px 22px;
	margin-bottom: 14px;
}

.inori-hub .ih-says p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ih-ink);
}

.inori-hub .ih-says p:last-child {
	margin-bottom: 0;
}

.inori-hub .ih-says-label,
.inori-hub .ih-says-line {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ih-faint);
	margin: 0 0 8px;
}

.inori-hub .ih-says-line {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ih-text);
	margin-bottom: 10px;
}

/* ---------- Nicht-Qualifizierungsgründe ---------- */

.inori-hub .ih-lost-note {
	margin: 4px 0 6px;
	font-size: 12px;
	line-height: 1.45;
}

.inori-hub .ih-lost-items {
	margin-top: 6px;
	border-top: 1px solid var(--ih-hair);
}

.inori-hub .ih-lost-item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px solid var(--ih-hair);
	font-size: 13px;
}

/* Der Grund im Log-Dialog: Auswahl plus die Erklärung dazu. */
.inori-hub .ih-reason,
.ih-modal .ih-reason {
	margin: 14px 0;
}

.ih-modal .ih-reason .ih-select {
	width: 100%;
}

.ih-modal .ih-reason-note {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ih-soft, #5c6b7a);
}

/* ---------- Simulator: drei Spalten ---------- */

/* Links das Kapitel-Register, in der Mitte der Leitfaden, rechts die
   erfassten Antworten. Die Aussenspalten haben feste Breiten, damit der
   Leitfaden beim Wechsel zwischen Schritten nicht springt. */
.inori-hub .ih-sim-body {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr) 300px;
	gap: 14px;
	align-items: start;
}

/* Das Register bleibt beim Scrollen stehen — es ist die Navigation. */
.inori-hub .ih-chapters {
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-radius: var(--ih-radius);
	padding: 12px 10px;
	position: sticky;
	top: 12px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.inori-hub .ih-chapters-head {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ih-faint);
	padding: 0 8px;
	margin-bottom: 8px;
}

.inori-hub .ih-chapter {
	margin-bottom: 6px;
}

/* Register-Einträge sind Knöpfe, sehen aber wie Zeilen aus: linksbündig,
   umbrechend, ohne Rahmen. */
.inori-hub .ih-chapter-head,
.inori-hub .ih-chapter-item {
	display: block;
	width: 100%;
	border: 0;
	background: none;
	border-radius: 7px;
	padding: 5px 8px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	color: var(--ih-text);
	line-height: 1.35;
}

.inori-hub .ih-chapter-head {
	font-weight: 600;
	color: var(--ih-ink);
	font-size: 13px;
}

.inori-hub .ih-chapter-item {
	padding-left: 20px;
	font-size: 12px;
	color: var(--ih-soft);
}

.inori-hub .ih-chapter-head:hover,
.inori-hub .ih-chapter-item:hover {
	background: var(--ih-hair);
}

.inori-hub .ih-chapter-head.is-on,
.inori-hub .ih-chapter-item.is-on {
	background: var(--ih-navy);
	color: #fff;
}

/* Die erfassten Antworten stehen rechts und wachsen nach unten. */
.inori-hub .ih-notes {
	position: sticky;
	top: 12px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

/* Der Rückweg sitzt unter dem Notizfeld, wo er gebraucht wird. */
.inori-hub .ih-stepback {
	margin-bottom: 14px;
}

/* Schmale Fenster: alles untereinander, Register zuerst. Sticky wäre hier
   im Weg, weil die Spalten nicht mehr nebeneinander stehen. */
@media (max-width: 1180px) {
	.inori-hub .ih-sim-body {
		grid-template-columns: 1fr;
	}

	.inori-hub .ih-chapters,
	.inori-hub .ih-notes {
		position: static;
		max-height: 320px;
	}
}

.inori-hub .ih-notebox {
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 14px;
}

.inori-hub .ih-notebox-head,
.inori-hub .ih-notebox-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ih-faint);
}

.inori-hub .ih-notebox-foot {
	margin-top: 10px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.inori-hub .ih-notearea {
	width: 100%;
	border: 1px solid var(--ih-line);
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit;
	margin-top: 8px;
	resize: vertical;
}

.inori-hub .ih-options {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.inori-hub .ih-histitem {
	border-top: 1px solid var(--ih-hair);
	padding: 9px 0;
}

.inori-hub .ih-histitem:first-of-type {
	border-top: 0;
}

.inori-hub .ih-histitem p {
	margin: 2px 0 0;
}

.inori-hub .ih-objection {
	border-top: 1px solid var(--ih-hair);
	padding: 11px 0;
}

.inori-hub .ih-objection:first-of-type {
	border-top: 0;
}

.inori-hub .ih-objection-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 4px;
}

.inori-hub .ih-objection p {
	margin: 0 0 6px;
}

/* ---------- Dialog & Hinweis ---------- */

/* Dialoge hängen wie der Hinweisstreifen am body, nicht im App-Container —
   deshalb ohne .inori-hub davor. */

.ih-modal {
	position: fixed;
	inset: 0;
	background: rgba(12, 24, 38, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
	font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1c2b3a;
}

.ih-modal-box {
	background: #fff;
	border-radius: 14px;
	padding: 22px 24px;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	box-shadow: 0 18px 48px rgba(12, 24, 38, 0.28);
}

.ih-modal-box .ih-card-title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
}

.ih-modal-box .ih-select {
	width: 100%;
	margin: 12px 0 18px;
}

.ih-modal-body .ih-select {
	margin: 0;
}

.ih-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	margin-top: 18px;
}

.ih-modal .ih-btn {
	border: 1px solid #d7dee7;
	background: #fff;
	border-radius: 8px;
	padding: 8px 14px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ih-modal .ih-btn.is-primary {
	background: #1c3f5e;
	border-color: #1c3f5e;
	color: #fff;
}

.ih-modal .ih-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* ---------- Zusammenfassung im Dialog ---------- */

.ih-summary {
	margin-top: 16px;
}

.ih-summary-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 5px;
}

.ih-modal .ih-summary-text {
	font-size: 13px;
	line-height: 1.55;
	white-space: pre-wrap;
}

.ih-modal .ih-btn.is-small {
	padding: 4px 10px;
	font-size: 12px;
}

/* Der Dialog trägt jetzt mehr als eine Auswahl, also darf er breiter werden. */
.ih-modal-box {
	max-width: 560px;
}

/* ---------- Formular im Dialog ---------- */

.ih-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ih-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ih-field.is-wide {
	grid-column: 1 / -1;
}

.ih-field-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #7b8896;
}

.ih-modal .ih-input,
.ih-modal .ih-select,
.ih-modal .ih-notearea {
	width: 100%;
	border: 1px solid #d7dee7;
	border-radius: 8px;
	padding: 8px 10px;
	font: inherit;
	background: #fff;
	box-sizing: border-box;
}

.ih-modal .ih-input:focus,
.ih-modal .ih-select:focus,
.ih-modal .ih-notearea:focus {
	outline: 2px solid #1c3f5e;
	outline-offset: 1px;
	border-color: #1c3f5e;
}

.ih-form-hint {
	margin: 12px 0 0;
	color: #b4232a;
	font-size: 13px;
}

.ih-practice-flag {
	color: #8a6100;
	font-weight: 600;
}

@media (max-width: 520px) {
	.ih-form {
		grid-template-columns: 1fr;
	}
}

.ih-toast {
	position: fixed;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	background: #1c2b3a;
	color: #fff;
	border-radius: 9px;
	padding: 11px 20px;
	font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	z-index: 10001;
	box-shadow: 0 8px 24px rgba(12, 24, 38, 0.25);
}

.ih-toast.is-ok    { background: #1a7d52; }
.ih-toast.is-error { background: #a33232; }
.ih-toast[hidden]  { display: none; }

/* ---------- Schmale Viewports ---------- */

@media (max-width: 1100px) {
	.inori-hub .ih-cols,
	.inori-hub .ih-version {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 782px) {
	.inori-hub .ih-body {
		grid-template-columns: 1fr;
	}

	/* Auf dem Telefon wird die Seitenleiste zur wischbaren Leiste unter dem
	   Kopf — sonst scrollt man erst durch fünfzehn Menüpunkte, bevor der
	   Inhalt beginnt. */
	.inori-hub .ih-side {
		border-right: 0;
		border-bottom: 1px solid var(--ih-line);
		display: flex;
		align-items: center;
		gap: 4px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 10px;
	}

	.inori-hub .ih-side-head,
	.inori-hub .ih-side-note {
		display: none;
	}

	.inori-hub .ih-nav {
		flex-direction: row;
		flex-wrap: nowrap;
		flex: 0 0 auto;
	}

	.inori-hub .ih-nav-item {
		width: auto;
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 7px 10px;
	}

	.inori-hub .ih-main {
		padding: 18px 14px 32px;
	}

	.inori-hub .ih-callrow {
		grid-template-columns: 1fr auto;
	}

	.inori-hub .ih-callrow-role {
		display: none;
	}

	.inori-hub .ih-sim-actions {
		margin-left: 0;
	}
}

/* ---------- Einstellungen im Frontend ---------- */

.inori-hub .ih-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.inori-hub .ih-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.inori-hub .ih-row-cell {
	flex: 1;
	min-width: 0;
}

.inori-hub .ih-row-cell.is-tight {
	flex: 0 0 34px;
}

.inori-hub .ih-row-head .ih-row-cell {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ih-faint);
}

.inori-hub .ih-input,
.inori-hub .ih-select,
.inori-hub .ih-notearea {
	width: 100%;
	border: 1px solid var(--ih-line);
	border-radius: 8px;
	padding: 7px 10px;
	font: inherit;
	color: var(--ih-ink);
	background: #fff;
	box-sizing: border-box;
}

.inori-hub .ih-input:focus,
.inori-hub .ih-select:focus,
.inori-hub .ih-notearea:focus {
	outline: 2px solid var(--ih-navy);
	outline-offset: 1px;
	border-color: var(--ih-navy);
}

.inori-hub .ih-node {
	background: var(--ih-card);
	border: 1px solid var(--ih-line);
	border-left: 4px solid var(--ih-accent);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.inori-hub .ih-node.is-new {
	border-left-color: var(--ih-line);
	display: flex;
	gap: 8px;
	align-items: center;
}

.inori-hub .ih-node-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.inori-hub .ih-node-head code {
	background: var(--ih-hair);
	border-radius: 4px;
	padding: 1px 7px;
	font-size: 12px;
	color: var(--ih-ink);
}

.inori-hub .ih-node-step {
	font-weight: 600;
	color: var(--ih-ink);
	flex: 1;
	min-width: 0;
}

.inori-hub .ih-option-row {
	display: flex;
	gap: 8px;
	margin-bottom: 6px;
}

.inori-hub .ih-option-row .ih-input {
	flex: 1;
}

.inori-hub .ih-option-row .ih-select {
	flex: 1;
}

.inori-hub .ih-maprow {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	align-items: center;
	padding: 8px 0;
	border-top: 1px solid var(--ih-hair);
}

.inori-hub .ih-maprow:first-of-type {
	border-top: 0;
}

.inori-hub .ih-switch {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	border-top: 1px solid var(--ih-hair);
	cursor: pointer;
}

.inori-hub .ih-switch:first-of-type {
	border-top: 0;
}

.inori-hub .ih-switch input {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex: none;
	accent-color: var(--ih-accent);
}

.inori-hub .ih-switch span {
	display: block;
}

.inori-hub .ih-userrow {
	display: grid;
	grid-template-columns: 1fr 200px 110px auto;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid var(--ih-hair);
}

.inori-hub .ih-userrow:first-of-type {
	border-top: 0;
}

.inori-hub .ih-userrow .ih-field {
	margin: 0;
}

.inori-hub .ih-userrow > span > span {
	display: block;
}

.inori-hub .ih-yes {
	color: var(--ih-gruen);
	font-weight: 600;
	font-size: 13px;
}

.inori-hub .ih-new {
	color: var(--ih-accent);
}

.inori-hub .ih-deploy-problem {
	background: var(--ih-rot-bg);
	color: var(--ih-rot);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
}

.inori-hub .ih-deploylog {
	margin-top: 14px;
	border-top: 1px solid var(--ih-line);
	padding-top: 10px;
}

.inori-hub .ih-deployrow {
	display: grid;
	grid-template-columns: 130px 90px 1fr;
	gap: 10px;
	align-items: baseline;
	padding: 5px 0;
	border-top: 1px solid var(--ih-hair);
	font-size: 13px;
}

.inori-hub .ih-deployrow:first-child {
	border-top: 0;
}

.inori-hub .ih-savebar {
	position: sticky;
	bottom: 0;
	background: var(--ih-bg);
	border-top: 1px solid var(--ih-line);
	padding: 12px 0;
	margin-top: 8px;
}

@media (max-width: 720px) {
	.inori-hub .ih-row,
	.inori-hub .ih-option-row,
	.inori-hub .ih-deployrow,
	.inori-hub .ih-userrow,
	.inori-hub .ih-maprow {
		flex-direction: column;
		grid-template-columns: 1fr;
	}
}