/**
 * inoMap Medienplan — frontend styles.
 *
 * Every rule is scoped under .inomap-plan and every class carries an imp-
 * prefix, so dropping this into any theme cannot leak styles either way.
 */

.inomap-plan {
	--imp-paper: #f5f7fa;
	--imp-card: #fff;
	--imp-ink: #1c3f5e;
	--imp-text: #33434f;
	--imp-soft: #5c6b7a;
	--imp-faint: #98a6b3;
	--imp-line: #e3e9ef;
	--imp-hair: #eef2f6;
	--imp-accent: #367099;

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

	--imp-radius: 14px;
	--imp-lblw: 250px;
	--imp-headh: 42px;

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

	font-family: var(--imp-font);
	color: var(--imp-text);
	line-height: 1.5;
	font-size: 13.5px;
}

.inomap-plan *,
.inomap-plan *::before,
.inomap-plan *::after {
	box-sizing: border-box;
}

/* The hidden attribute has to win over the display rules below. */
.inomap-plan [hidden] {
	display: none !important;
}

.inomap-plan-notice {
	padding: 12px 16px;
	border: 1px dashed #c7ced6;
	border-radius: 10px;
	color: #5c6b7a;
	background: #f8fafc;
}

/* ---------- Titelblock ---------- */

.inomap-plan .imp-hero {
	background: linear-gradient(120deg, #1c3f5e, #2b5a7c);
	color: #fff;
	border-radius: 18px;
	padding: 24px 28px;
	margin: 0 0 8px;
}

.inomap-plan .imp-eyebrow {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9fc4dd;
}

.inomap-plan .imp-h1 {
	font-family: var(--imp-display);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 5px 0 6px;
	color: #fff;
	padding: 0;
}

.inomap-plan .imp-lead {
	color: #dbe7f0;
	font-size: 13.5px;
	max-width: 820px;
	margin: 0;
}

.inomap-plan .imp-herometa {
	display: flex;
	gap: 8px 24px;
	flex-wrap: wrap;
	margin-top: 12px;
	font-size: 12px;
	color: #c8d8e4;
}

.inomap-plan .imp-herometa b {
	color: #fff;
}

/* ---------- Abschnitte ---------- */

.inomap-plan .imp-section {
	padding: 26px 0 2px;
}

.inomap-plan .imp-h2 {
	font-family: var(--imp-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--imp-ink);
	display: flex;
	align-items: baseline;
	gap: 11px;
	margin: 0;
	padding: 0;
}

.inomap-plan .imp-num {
	font-family: var(--imp-display);
	font-weight: 700;
	font-size: 11px;
	color: var(--imp-accent);
	background: rgba(54, 112, 153, 0.1);
	border-radius: 7px;
	padding: 4px 9px;
}

.inomap-plan .imp-sub {
	color: var(--imp-soft);
	margin: 5px 0 14px;
	font-size: 12.5px;
	max-width: 900px;
}

.inomap-plan .imp-box {
	background: var(--imp-card);
	border: 1px solid var(--imp-line);
	border-radius: var(--imp-radius);
	box-shadow: 0 1px 2px rgba(28, 63, 94, 0.03);
	overflow-x: auto;
	margin-bottom: 10px;
}

/* ---------- Tabellen ---------- */

.inomap-plan .imp-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	background: none;
	font-size: 12.5px;
}

.inomap-plan .imp-table th,
.inomap-plan .imp-table td {
	padding: 9px 11px;
	text-align: left;
	vertical-align: top;
	font-size: 12.5px;
	border: 0;
	border-bottom: 1px solid var(--imp-hair);
}

.inomap-plan .imp-table thead th {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--imp-faint);
	font-weight: 700;
	background: #fafcfd;
}

.inomap-plan .imp-table tbody tr:last-child td {
	border-bottom: 0;
}

.inomap-plan .imp-table tbody tr {
	background: none;
}

.inomap-plan .imp-name {
	font-family: var(--imp-display);
	font-weight: 600;
	color: var(--imp-ink);
	white-space: nowrap;
}

.inomap-plan .imp-date {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--imp-soft);
}

.inomap-plan .imp-pill {
	display: inline-block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 6px;
	padding: 1px 7px;
	white-space: nowrap;
}

.inomap-plan .imp-pill--rot {
	color: var(--imp-rot);
	background: var(--imp-rot-bg);
}

.inomap-plan .imp-pill--gelb {
	color: var(--imp-gelb);
	background: var(--imp-gelb-bg);
}

.inomap-plan .imp-pill--gruen {
	color: var(--imp-gruen);
	background: var(--imp-gruen-bg);
}

.inomap-plan .imp-pill--blau {
	color: var(--imp-blau);
	background: var(--imp-blau-bg);
}

/* ---------- Filterleiste ---------- */

.inomap-plan .imp-filters {
	display: flex;
	gap: 7px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 12px;
}

.inomap-plan .imp-flabel {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--imp-faint);
	font-weight: 700;
	margin-right: 3px;
}

.inomap-plan .imp-chip {
	border: 1px solid var(--imp-line);
	background: #fff;
	border-radius: 8px;
	padding: 5px 11px 5px 9px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--imp-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--imp-font);
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	transition: opacity 0.12s, border-color 0.12s;
}

.inomap-plan .imp-chip:hover {
	border-color: #cfdae4;
	background: #fff;
	color: var(--imp-ink);
}

.inomap-plan .imp-chip:focus-visible {
	outline: 2px solid var(--imp-accent);
	outline-offset: 2px;
}

.inomap-plan .imp-chip[aria-pressed="false"] {
	opacity: 0.4;
}

.inomap-plan .imp-chip--ghost {
	color: var(--imp-accent);
}

.inomap-plan .imp-dot {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	flex: none;
}

.inomap-plan .imp-spacer {
	flex: 1;
}

/* ---------- Gantt ---------- */

.inomap-plan .imp-gantt {
	min-width: 1200px;
	position: relative;
	font-size: 12px;
}

.inomap-plan .imp-empty {
	padding: 24px;
	color: var(--imp-soft);
	margin: 0;
}

.inomap-plan .imp-row {
	display: grid;
	grid-template-columns: var(--imp-lblw) 1fr;
}

.inomap-plan .imp-lbl {
	padding: 9px 12px;
	border-right: 1px solid var(--imp-line);
	border-bottom: 1px solid var(--imp-hair);
	background: #fff;
	position: sticky;
	left: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
}

.inomap-plan .imp-n {
	font-family: var(--imp-display);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--imp-ink);
	display: flex;
	align-items: center;
	gap: 8px;
}

.inomap-plan .imp-n i {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	flex: none;
}

.inomap-plan .imp-r {
	font-size: 11px;
	color: var(--imp-faint);
	padding-left: 17px;
}

.inomap-plan .imp-track {
	position: relative;
	border-bottom: 1px solid var(--imp-hair);
	min-height: 46px;
}

.inomap-plan .imp-head .imp-lbl {
	background: #fafcfd;
	border-bottom: 1px solid var(--imp-line);
}

.inomap-plan .imp-head .imp-track {
	background: #fafcfd;
	border-bottom: 1px solid var(--imp-line);
	min-height: 0;
}

.inomap-plan .imp-months {
	position: relative;
	height: var(--imp-headh);
}

.inomap-plan .imp-mo {
	position: absolute;
	top: 0;
	bottom: 0;
	border-left: 1px solid var(--imp-hair);
	padding: 8px 0 0 8px;
	overflow: hidden;
}

.inomap-plan .imp-mo.is-q {
	border-left: 1px solid var(--imp-line);
}

.inomap-plan .imp-mo b {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--imp-ink);
	font-weight: 700;
}

.inomap-plan .imp-mo span {
	font-size: 10px;
	color: var(--imp-faint);
}

.inomap-plan .imp-grp {
	display: grid;
	grid-template-columns: var(--imp-lblw) 1fr;
	background: #fafcfd;
	border-bottom: 1px solid var(--imp-hair);
}

.inomap-plan .imp-g1 {
	position: sticky;
	left: 0;
	z-index: 3;
	background: #fafcfd;
	padding: 9px 12px 8px;
	border-right: 1px solid var(--imp-line);
	font-family: var(--imp-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.inomap-plan .imp-g2 {
	background: #fafcfd;
}

.inomap-plan .imp-vlines {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	left: var(--imp-lblw);
	right: 0;
	top: var(--imp-headh);
	bottom: 0;
}

.inomap-plan .imp-vlines i {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--imp-hair);
}

.inomap-plan .imp-vlines i.is-q {
	background: var(--imp-line);
}

.inomap-plan .imp-bar {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 20px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	padding: 0 9px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	z-index: 2;
	box-shadow: 0 0 0 2px #fff;
}

.inomap-plan .imp-bar.is-soft {
	background: transparent !important;
	border: 1.5px dashed currentColor;
	box-shadow: none;
}

.inomap-plan .imp-bar.is-soft .imp-t {
	color: var(--imp-soft);
}

.inomap-plan .imp-bar:hover {
	filter: brightness(1.07);
}

.inomap-plan .imp-bar:focus-visible,
.inomap-plan .imp-pt:focus-visible {
	outline: 2px solid var(--imp-ink);
	outline-offset: 2px;
}

.inomap-plan .imp-outside {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--imp-ink);
	white-space: nowrap;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	text-overflow: ellipsis;
}

.inomap-plan .imp-outside.is-left {
	margin-left: 0;
	margin-right: 8px;
	transform: translate(-100%, -50%);
}

.inomap-plan .imp-pt {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	transform: translateY(-50%) rotate(45deg);
	border-radius: 3px;
	z-index: 4;
	box-shadow: 0 0 0 2px #fff;
}

.inomap-plan .imp-pt:hover {
	transform: translateY(-50%) rotate(45deg) scale(1.25);
}

.inomap-plan .imp-ptlabel {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 11px;
	font-size: 11px;
	color: var(--imp-soft);
	white-space: nowrap;
	z-index: 4;
	pointer-events: none;
	overflow: hidden;
	text-overflow: ellipsis;
}

.inomap-plan .imp-ptlabel.is-left {
	margin-left: 0;
	margin-right: 11px;
	transform: translate(-100%, -50%);
}

.inomap-plan .imp-today {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--imp-rot);
	z-index: 5;
	pointer-events: none;
	opacity: 0.65;
}

.inomap-plan .imp-today span {
	position: absolute;
	top: 3px;
	left: 5px;
	font-size: 9.5px;
	font-weight: 700;
	color: var(--imp-rot);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ---------- Legende ---------- */

.inomap-plan .imp-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 9px 20px;
	margin: 10px 0 0;
	font-size: 11.5px;
	color: var(--imp-soft);
}

.inomap-plan .imp-legend b {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 400;
}

.inomap-plan .imp-legend b i {
	width: 11px;
	height: 11px;
	border-radius: 3px;
}

.inomap-plan .imp-legend--symbols {
	margin-top: 6px;
}

.inomap-plan .imp-key-bar {
	width: 22px;
	height: 10px;
	border-radius: 4px;
	background: var(--imp-faint);
	display: inline-block;
}

.inomap-plan .imp-key-dia {
	width: 10px;
	height: 10px;
	background: var(--imp-faint);
	transform: rotate(45deg);
	border-radius: 2px;
	display: inline-block;
}

.inomap-plan .imp-key-dash {
	width: 20px;
	height: 11px;
	border: 1.5px dashed var(--imp-faint);
	border-radius: 3px;
	display: inline-block;
}

/* ---------- Tooltip (liegt ausserhalb von .inomap-plan am body) ---------- */

.inomap-tip {
	position: fixed;
	z-index: 100000;
	max-width: 330px;
	background: #fff;
	border: 1px solid #e3e9ef;
	border-radius: 10px;
	padding: 11px 13px;
	box-shadow: 0 10px 30px rgba(28, 63, 94, 0.14);
	pointer-events: none;
	font-size: 12px;
	line-height: 1.5;
	color: #33434f;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.inomap-tip[hidden] {
	display: none;
}

.inomap-tip .imp-tip-h {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 600;
	color: #1c3f5e;
	margin-bottom: 3px;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
}

.inomap-tip .imp-tip-h i {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	flex: none;
}

.inomap-tip .imp-tip-d {
	color: #367099;
	font-weight: 600;
	font-size: 11px;
	margin-bottom: 5px;
}

.inomap-tip .imp-tip-w {
	color: #5c6b7a;
	font-size: 11.5px;
	margin-top: 5px;
}

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

@media (max-width: 782px) {
	.inomap-plan {
		--imp-lblw: 170px;
	}

	.inomap-plan .imp-hero {
		padding: 18px 18px;
	}

	.inomap-plan .imp-h1 {
		font-size: 22px;
	}
}

/* ---------- Druck ---------- */

@media print {
	.inomap-plan .imp-box {
		overflow: visible;
		box-shadow: none;
	}

	.inomap-plan .imp-gantt {
		min-width: 0;
	}

	.inomap-plan .imp-filters {
		display: none;
	}

	.inomap-plan .imp-table tr {
		break-inside: avoid;
	}

	.inomap-plan .imp-schedule[hidden] {
		display: block !important;
	}

	.inomap-plan * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.inomap-tip {
		display: none !important;
	}
}