/*
 * NoPixels Tisch-Reservierung – Frontend-Widget.
 *
 * Design-Prinzipien:
 *  - CSS-Variablen für Branding (werden via JS aus /config gesetzt).
 *  - Mobile-First, dann Desktop-Enhancements.
 *  - Dark Mode via @media (prefers-color-scheme: dark) + .np-tr-dark / .np-tr-light Overrides.
 *  - Hebt sich harmonisch vom Theme ab, ohne dessen Schriftarten zu überschreiben.
 */

.np-tr-app,
.np-tr-manage,
dialog.np-tr-modal {
	--np-tr-primary: #1f6feb;
	--np-tr-accent:  #39d353;
	--np-tr-danger:  #f85149;
	--np-tr-bg:      #ffffff;
	--np-tr-fg:      #111827;
	--np-tr-muted:   #6b7280;
	--np-tr-card:    #ffffff;
	--np-tr-border:  #e5e7eb;
	--np-tr-shadow:  0 4px 14px rgba(0,0,0,.06);
	--np-tr-radius:  12px;
	--np-tr-radius-sm: 8px;

	color: var(--np-tr-fg);
	box-sizing: border-box;
}

/* Haupt-Booking-Widget — bleibt eigene Card (kein verschachteltes Layout). */
.np-tr-app {
	font-family: inherit;
	background: var(--np-tr-bg);
	color: var(--np-tr-fg);
	border: 1px solid var(--np-tr-border);
	border-radius: var(--np-tr-radius);
	padding: 20px 22px;
	max-width: 1200px;
	margin: 24px auto;
	box-shadow: var(--np-tr-shadow);
}
/* Shortcode-Wrapper (Manage/MyPlan/Order) sind nur NEUTRALE Container —
   die innere `.np-tr-*-card` hat ihr eigenes Card-Design. Vorher gab's
   doppelte Verschachtelung: Outer-Box mit Border + Inner-Card-Box drin. */
.np-tr-manage,
.np-tr-myplan,
.np-tr-order {
	font-family: inherit;
	color: var(--np-tr-fg);
	max-width: 1200px;
	margin: 24px auto;
	padding: 0 16px;
}
/* MyPlan darf größer werden (mehr Inhalt), Manage/Order bleiben fokussiert. */
.np-tr-myplan { max-width: 1000px; }
.np-tr-manage,
.np-tr-order { max-width: 720px; }
/* Sicherheit: alle Überschriften + Text-Elemente im Plugin erben unsere
   Foreground-Farbe, falls das umgebende Theme aggressive Reset-Styles hat. */
.np-tr-app h1, .np-tr-app h2, .np-tr-app h3, .np-tr-app h4,
.np-tr-app p, .np-tr-app span, .np-tr-app strong, .np-tr-app em,
.np-tr-app label, .np-tr-app li,
.np-tr-manage h1, .np-tr-manage h2, .np-tr-manage h3,
.np-tr-manage p, .np-tr-manage span, .np-tr-manage strong,
.np-tr-myplan h1, .np-tr-myplan h2, .np-tr-myplan h3,
.np-tr-myplan p, .np-tr-myplan span, .np-tr-myplan strong {
	color: inherit;
}
.np-tr-clock-meta { color: var(--np-tr-fg); }

/* ---------- Dark mode ---------- */
@media ( prefers-color-scheme: dark ) {
	.np-tr-app:not(.np-tr-light),
	.np-tr-manage:not(.np-tr-light),
	dialog.np-tr-modal:not(.np-tr-light) {
		--np-tr-bg: #0d1117;
		--np-tr-fg: #e6edf3;
		--np-tr-muted: #8b949e;
		--np-tr-card: #161b22;
		--np-tr-border: #30363d;
		--np-tr-shadow: 0 4px 14px rgba(0,0,0,.4);
	}
}
.np-tr-dark .np-tr-app,
.np-tr-dark .np-tr-manage,
.np-tr-dark dialog.np-tr-modal,
.np-tr-app.np-tr-dark,
.np-tr-manage.np-tr-dark,
.np-tr-myplan.np-tr-dark,
.np-tr-radar.np-tr-dark {
	--np-tr-bg: #0d1117;
	--np-tr-fg: #e6edf3;
	--np-tr-muted: #8b949e;
	--np-tr-card: #161b22;
	--np-tr-border: #30363d;
	--np-tr-shadow: 0 4px 14px rgba(0,0,0,.4);
}

/* ---------- Loading / skeleton ---------- */
.np-tr-app__loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 40px 0;
	color: var(--np-tr-muted);
}

.np-tr-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	display: inline-block;
	animation: np-tr-spin .9s linear infinite;
}
@keyframes np-tr-spin { to { transform: rotate( 360deg ); } }

.np-tr-app.is-ready .np-tr-app__loading { display: none; }

/* ---------- Header ---------- */
.np-tr-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}
.np-tr-logo {
	max-height: 48px;
	width: auto;
	display: block;
}
.np-tr-title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--np-tr-fg);
}

/* ---------- V1.28.0 — Cross-Link zwischen Booking-Shortcode und MyPlan ---------- */
/* Im Booking-Header rechts ausgerichtet, im MyPlan-Card am unteren Rand */
.np-tr-myplan-crosslink {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border-radius: 20px;
	background: rgba( 60, 110, 200, 0.12 );
	color: var(--np-tr-primary, #2563eb);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
	border: 1px solid rgba( 60, 110, 200, 0.25 );
	transition: background 0.15s, transform 0.15s;
	white-space: nowrap;
	margin-left: auto;
}
.np-tr-myplan-crosslink:hover {
	background: rgba( 60, 110, 200, 0.22 );
	transform: translateY( -1px );
	color: var(--np-tr-primary, #2563eb);
	text-decoration: none;
}
.np-tr-myplan-crosslink-wrap {
	display: flex;
	justify-content: center;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px dashed rgba( 0, 0, 0, 0.08 );
}
[data-theme="dark"] .np-tr-myplan-crosslink,
.np-tr-app.is-dark .np-tr-myplan-crosslink,
.np-tr-myplan.is-dark .np-tr-myplan-crosslink {
	background: rgba( 100, 160, 255, 0.18 );
	border-color: rgba( 100, 160, 255, 0.35 );
	color: #a8c8ff;
}
[data-theme="dark"] .np-tr-myplan-crosslink-wrap,
.np-tr-app.is-dark .np-tr-myplan-crosslink-wrap,
.np-tr-myplan.is-dark .np-tr-myplan-crosslink-wrap {
	border-top-color: rgba( 255, 255, 255, 0.1 );
}

/* ---------- Controls ---------- */
.np-tr-controls {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 12px;
	margin-bottom: 14px;
}
@media ( min-width: 720px ) {
	.np-tr-controls { grid-template-columns: repeat( 4, 1fr ); }
}

.np-tr-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.np-tr-field span {
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--np-tr-muted);
}
.np-tr-field input,
.np-tr-field select {
	background: var(--np-tr-card);
	color: var(--np-tr-fg);
	border: 1px solid var(--np-tr-border);
	border-radius: var(--np-tr-radius-sm);
	padding: 10px 12px;
	font: inherit;
	min-height: 44px;
}
.np-tr-field input:focus,
.np-tr-field select:focus {
	outline: 2px solid var(--np-tr-primary);
	outline-offset: 1px;
}

/* Phase 20.11.4 — Custom-Select mit deutlich sichtbarem Pfeil.
   iOS Safari rendert native <select>-Pfeile nicht zuverlässig — wir
   blenden den Default aus und zeichnen einen eigenen via background-image.
   Phase 21.1 — explizit weißer Hintergrund + dunkler Text auf Options
   (sonst erbt iOS/Android transparenten BG, Liste unlesbar). */
.np-tr-field select.np-tr-select,
.np-tr-row select.np-tr-select,
select.np-tr-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	background-color: #fff;
	color: #1a1a1a;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%231f6feb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}
/* Optionen-Liste: weißer Hintergrund + dunkler Text. Greift in iOS-Wheel
   sowie in Desktop-Native-Dropdown. */
select.np-tr-select option {
	background-color: #fff;
	color: #1a1a1a;
}
select.np-tr-select option:checked,
select.np-tr-select option:hover {
	background-color: #e6f0ff;
	color: #1a1a1a;
}
select.np-tr-select:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}
/* Placeholder-Option (disabled, value=""): in Default-Text-Farbe etwas blasser */
select.np-tr-select:invalid,
select.np-tr-select option[value=""][disabled] {
	color: var(--np-tr-muted);
}
/* Dark-Mode: Pfeil in Akzent-Farbe */
@media ( prefers-color-scheme: dark ) {
	select.np-tr-select {
		background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2358a6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>" );
	}
}

/* ---------- Hints / events ---------- */
.np-tr-hint,
.np-tr-event {
	background: rgba( 248, 81, 73, .08 );
	border-left: 4px solid var(--np-tr-danger);
	padding: 10px 14px;
	border-radius: var(--np-tr-radius-sm);
	margin: 8px 0;
	color: var(--np-tr-fg);
	font-size: .92rem;
}
.np-tr-hint-warn {
	background: rgba( 234, 179, 8, .12 );
	border-color: #eab308;
}
.np-tr-events { margin: 6px 0 14px; }
.np-tr-event {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba( 0, 0, 0, .04 );
	border-color: var(--np-tr-primary);
}
.np-tr-event-dot {
	width: 10px; height: 10px; border-radius: 50%;
}

/* ---------- Map ---------- */
.np-tr-map {
	margin-top: 6px;
	position: relative;
	min-height: 200px;
}

.np-tr-map-hint {
	margin: 6px 0 10px;
	font-size: .9rem;
	color: var(--np-tr-muted);
	font-style: italic;
}

.np-tr-empty {
	text-align: center;
	color: var(--np-tr-muted);
	padding: 48px 20px;
	margin: 0;
	background: var(--np-tr-card);
	border: 1px dashed var(--np-tr-border);
	border-radius: var(--np-tr-radius);
}

.np-tr-loading-overlay {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 40px 0;
	color: var(--np-tr-muted);
}

.np-tr-svg-wrap {
	background: var(--np-tr-card);
	border: 1px solid var(--np-tr-border);
	border-radius: var(--np-tr-radius);
	padding: 8px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.np-tr-svg {
	display: block;
	max-width: 100%;
	height: auto;
	min-height: 220px;
}

/* ---------- Map legend ---------- */
.np-tr-map-legend {
	margin-top: 12px;
	padding: 10px 14px;
	background: var(--np-tr-card);
	border: 1px solid var(--np-tr-border);
	border-radius: var(--np-tr-radius-sm);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: .82rem;
	color: var(--np-tr-muted);
}
.np-tr-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.np-tr-legend-text { color: var(--np-tr-fg); }
.np-tr-legend-icon {
	font-size: .95rem;
	line-height: 1;
}
.np-tr-legend-swatch {
	width: 18px;
	height: 14px;
	border-radius: 4px;
	display: inline-block;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.np-tr-legend-swatch.swatch-free {
	background: color-mix( in srgb, var(--np-tr-accent) 28%, var(--np-tr-card) );
	border: 1.5px dashed var(--np-tr-accent);
}
.np-tr-legend-swatch.swatch-joinable {
	background: color-mix( in srgb, #f59e0b 28%, var(--np-tr-card) );
	border: 1.5px solid #f59e0b;
}
.np-tr-legend-swatch.swatch-private,
.np-tr-legend-swatch.swatch-community-full {
	background: color-mix( in srgb, var(--np-tr-danger) 22%, var(--np-tr-card) );
	border: 1.5px dashed var(--np-tr-danger);
}
.np-tr-legend-swatch.swatch-blocked {
	background: color-mix( in srgb, var(--np-tr-muted) 18%, var(--np-tr-card) );
	border: 1.5px dashed var(--np-tr-muted);
}

/* ---------- Tables ---------- */
.np-tr-table {
	cursor: default;
	transition: filter .15s ease, transform .15s ease;
}
.np-tr-table-shape {
	fill: var(--np-tr-card);
	stroke: var(--np-tr-muted);
	stroke-width: 2;
	fill-opacity: 1;
	transition: fill .2s ease, stroke .2s ease;
}

/* Texture-Overlay: dezent über der Grundfläche, klickt nicht durch */
.np-tr-table-texture {
	mix-blend-mode: multiply;
	pointer-events: none;
	transition: opacity .3s ease;
}
.np-tr-dark .np-tr-table-texture,
.np-tr-app.np-tr-dark .np-tr-table-texture,
.np-tr-manage.np-tr-dark .np-tr-table-texture {
	mix-blend-mode: screen;
	filter: brightness(0.85);
}

/* Meeples (Spieler-Icons am Tisch-Rand) */
.np-tr-table-meeple {
	fill: var(--np-tr-fg);
	pointer-events: none;
	opacity: 0.92;
}
.np-tr-table-meeple-more {
	fill: var(--np-tr-fg);
	font-size: 10px;
	font-weight: 800;
	pointer-events: none;
}

/* Reserving-Pulse: jemand hat das Modal offen für diesen Tisch */
.np-tr-table-reserving-ring {
	fill: none;
	stroke: var(--np-tr-primary);
	stroke-width: 2.5;
	stroke-dasharray: 6 3;
	opacity: 0;
	animation: np-tr-reserving-pulse 1.8s ease-in-out infinite;
}
@keyframes np-tr-reserving-pulse {
	0%, 100% { opacity: 0.2; stroke-width: 2; }
	50%      { opacity: 0.9; stroke-width: 3.5; }
}
@media ( prefers-reduced-motion: reduce ) {
	.np-tr-table-reserving-ring { animation: none; opacity: 0.5; }
	.np-tr-table-meeple { transition: none; }
}
.np-tr-table-name {
	fill: var(--np-tr-fg);
	font-size: 13px;
	font-weight: 700;
	pointer-events: none;
}
.np-tr-table-meta {
	fill: var(--np-tr-muted);
	font-size: 10px;
	pointer-events: none;
}
.np-tr-table-time {
	fill: var(--np-tr-muted);
	font-size: 9px;
	font-weight: 600;
	pointer-events: none;
	letter-spacing: .03em;
}
.np-tr-table-status {
	fill: var(--np-tr-fg);
	font-size: 10px;
	font-weight: 700;
	pointer-events: none;
}
.np-tr-table-extra {
	fill: var(--np-tr-muted);
	font-size: 9px;
	font-style: italic;
	pointer-events: none;
}
.np-tr-table-icon {
	fill: var(--np-tr-danger);
	font-size: 12px;
	pointer-events: none;
}

.np-tr-table.is-free { cursor: pointer; }
.np-tr-table.is-free .np-tr-table-shape {
	fill: color-mix( in srgb, var(--np-tr-accent) 28%, var(--np-tr-card) );
	stroke: var(--np-tr-accent);
}
.np-tr-table.is-free:hover .np-tr-table-shape,
.np-tr-table.is-free:focus-visible .np-tr-table-shape {
	fill: color-mix( in srgb, var(--np-tr-accent) 55%, var(--np-tr-card) );
	filter: drop-shadow( 0 2px 6px rgba(0,0,0,.18) );
}

.np-tr-table.is-taken .np-tr-table-shape {
	fill: color-mix( in srgb, var(--np-tr-danger) 22%, var(--np-tr-card) );
	stroke: var(--np-tr-danger);
	stroke-dasharray: 6 4;
}

.np-tr-table.is-community .np-tr-table-shape {
	stroke-width: 3;
}

/* Community-Tisch mit freien Plätzen zum Dazusetzen */
.np-tr-table.is-joinable .np-tr-table-shape {
	fill: color-mix( in srgb, #f59e0b 26%, var(--np-tr-card) );
	stroke: #f59e0b;
	stroke-dasharray: none;
	stroke-width: 3;
}
.np-tr-table.is-joinable:hover .np-tr-table-shape,
.np-tr-table.is-joinable:focus-visible .np-tr-table-shape {
	fill: color-mix( in srgb, #f59e0b 45%, var(--np-tr-card) );
	filter: drop-shadow( 0 2px 6px rgba(0,0,0,.18) );
}

/* Community-Tisch ist voll → wird wie ein normaler belegter Tisch dargestellt */
.np-tr-table.is-community-full .np-tr-table-shape {
	fill: color-mix( in srgb, var(--np-tr-danger) 22%, var(--np-tr-card) );
	stroke: var(--np-tr-danger);
	stroke-dasharray: 6 4;
}

.np-tr-table-icon-join {
	font-size: 20px;
	pointer-events: none;
}
.np-tr-table-icon-private {
	font-size: 18px;
	pointer-events: none;
	opacity: 0.85;
}
.np-tr-table-icon-full {
	font-size: 18px;
	pointer-events: none;
	opacity: 0.55;
}
.np-tr-table-challenge {
	fill: #fef3c7;
	font-size: 11px;
	font-weight: 800;
	pointer-events: none;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
	letter-spacing: .03em;
}
.np-tr-table.is-challenge .np-tr-table-shape {
	fill: color-mix( in srgb, #b91c1c 35%, var(--np-tr-card) );
	stroke: #fbbf24;
	stroke-width: 3.5;
	stroke-dasharray: 8 4;
}

/* ====== Epic Match: goldener Glow + aufsteigende Funken ====== */
.np-tr-table.is-epic .np-tr-table-shape {
	stroke: #fbbf24;
	stroke-width: 3;
	filter:
		drop-shadow( 0 0 4px rgba( 251, 191, 36, 0.95 ) )
		drop-shadow( 0 0 14px rgba( 251, 191, 36, 0.55 ) )
		drop-shadow( 0 0 28px rgba( 245, 158, 11, 0.35 ) );
	animation: np-tr-epic-glow 2.6s ease-in-out infinite;
}
@keyframes np-tr-epic-glow {
	0%, 100% { filter:
		drop-shadow( 0 0 4px rgba( 251, 191, 36, 0.95 ) )
		drop-shadow( 0 0 14px rgba( 251, 191, 36, 0.55 ) )
		drop-shadow( 0 0 28px rgba( 245, 158, 11, 0.35 ) ); }
	50%      { filter:
		drop-shadow( 0 0 6px rgba( 251, 191, 36, 1 ) )
		drop-shadow( 0 0 22px rgba( 251, 191, 36, 0.7 ) )
		drop-shadow( 0 0 40px rgba( 245, 158, 11, 0.55 ) ); }
}
.np-tr-epic-label {
	fill: #fde68a;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.08em;
	pointer-events: none;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.np-tr-epic-spark {
	fill: #fde68a;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: np-tr-epic-spark-rise 2.8s ease-out infinite;
}
.np-tr-epic-spark-1 { animation-delay: 0s;    }
.np-tr-epic-spark-2 { animation-delay: 0.45s; }
.np-tr-epic-spark-3 { animation-delay: 0.9s;  }
.np-tr-epic-spark-4 { animation-delay: 1.35s; }
.np-tr-epic-spark-5 { animation-delay: 1.8s;  }
.np-tr-epic-spark-6 { animation-delay: 2.25s; }
@keyframes np-tr-epic-spark-rise {
	0%   { opacity: 0; transform: translate( 0, 0 )   scale( 0.6 ); fill: #fef3c7; }
	15%  { opacity: 1; }
	60%  { opacity: 0.7; fill: #fbbf24; }
	100% { opacity: 0; transform: translate( 0, -32px ) scale( 1.0 ); fill: #f59e0b; }
}
@media ( prefers-reduced-motion: reduce ) {
	.np-tr-table.is-epic .np-tr-table-shape { animation: none; }
	.np-tr-epic-spark { animation: none; opacity: 0.65; transform: translate(0, -8px); }
}

/* Join-Hinweis im Buchungs-Modal */
.np-tr-modal-join-note {
	margin-top: 8px;
	padding: 8px 12px;
	background: color-mix( in srgb, #f59e0b 14%, transparent );
	border-left: 4px solid #f59e0b;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
	color: var(--np-tr-fg);
}
.np-tr-modal-join-icon {
	font-size: 18px;
	line-height: 1;
}

/* Type-Variationen via shape */
.np-tr-table.typ-wargaming .np-tr-table-shape { rx: 2; }
.np-tr-table.typ-tcg       .np-tr-table-shape { rx: 10; }
.np-tr-table.typ-brettspiel .np-tr-table-shape { rx: 24; }
.np-tr-table.typ-rollenspiel .np-tr-table-shape { rx: 40; }

.np-tr-table:focus { outline: none; }
.np-tr-table.is-free:focus-visible .np-tr-table-shape {
	stroke-width: 4;
}

/* ---------- Modal (dialog) ---------- */
dialog.np-tr-modal {
	border: none;
	background: var(--np-tr-card);
	color: var(--np-tr-fg);
	border-radius: var(--np-tr-radius);
	padding: 0;
	width: min( 720px, 94vw );
	max-height: 92vh;
	overflow-y: auto;
	box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
/* Inputs/textareas IN allen Plugin-Kontexten erzwingen sichtbare Werte */
.np-tr-app input, .np-tr-app select, .np-tr-app textarea,
.np-tr-manage input, .np-tr-manage select, .np-tr-manage textarea,
dialog.np-tr-modal input, dialog.np-tr-modal select, dialog.np-tr-modal textarea {
	color: var(--np-tr-fg) !important;
	background-color: var(--np-tr-bg) !important;
	caret-color: var(--np-tr-primary);
}
.np-tr-app input::placeholder,
.np-tr-app textarea::placeholder,
.np-tr-manage input::placeholder,
.np-tr-manage textarea::placeholder,
dialog.np-tr-modal input::placeholder,
dialog.np-tr-modal textarea::placeholder {
	color: var(--np-tr-muted);
	opacity: 1;
}
dialog.np-tr-modal::backdrop {
	background: rgba( 8, 12, 20, .55 );
	backdrop-filter: blur( 2px );
}

/* ============ V1.33.1 — Sectorum active_campaign Bonus-Polish ============ */
/* Card-Header-Titel wird zum klickbaren Link wenn Sectorum eine Cluster-URL
   liefert. Ohne URL bleibt's ein <strong> (kein Style-Unterschied). */
.np-tr-sectorum-title-link {
	color: var( --np-tr-fg );
	text-decoration: none;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.15s, transform 0.15s;
}
.np-tr-sectorum-title-link:hover {
	color: var( --np-tr-primary );
	transform: translateX( 2px );
	text-decoration: none;
}
.np-tr-sectorum-title-link::after {
	content: '↗';
	font-size: 0.85em;
	opacity: 0.6;
}
.np-tr-sectorum-title-link:hover::after {
	opacity: 1;
}

/* End-Date-Note ganz dezent — klein, gedämpft, mit Sanduhr-Emoji-Akzent */
.np-tr-sectorum-end-date {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	color: var( --np-tr-muted );
	letter-spacing: 0.01em;
}

/* ============ V1.32.1 — Sectorum is_neutral-Marker ============ */
/* Sectorum V1.29.0 liefert is_neutral=true für Spieler die noch keiner Fraktion
   beigetreten sind (Auto-Onboarding bei wp_login). Unser Picker zeigt dann statt
   der Fraktions-Farbe einen neutralen grauen Style mit „⚪ Neutral"-Badge. */
.np-tr-sectorum-opt.is-neutral {
	--np-tr-sec-color: #9ca3af;          /* neutrales Grau statt Fraktions-Farbe */
}
.np-tr-sectorum-neutral-badge {
	background: color-mix( in srgb, #9ca3af 18%, transparent );
	color: #6b7280;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
[data-theme="dark"] .np-tr-sectorum-neutral-badge,
.np-tr-app.is-dark .np-tr-sectorum-neutral-badge,
.np-tr-myplan.is-dark .np-tr-sectorum-neutral-badge {
	background: color-mix( in srgb, #9ca3af 25%, transparent );
	color: #d1d5db;
}

/* ============ V1.32.0 — Sectorum-Card volle Breite + Geburtstag verschoben ============ */
/* User-Wunsch 2026-05-24: die Sectorum-Card war im 2-Spalten-Grid zusammen mit
   der riesigen „besonderer Anlass"-Card eingequetscht. Ab V1.32 nimmt Sectorum
   die volle Modal-Breite ein (grid-column 1 / -1) und Geburtstag rutscht in
   den kompakten Check-Block unten zu foto_stream + hausregeln. */
dialog.np-tr-modal .np-tr-form > .np-tr-sectorum-block {
	grid-column: 1 / -1;
}
/* Geburtstag-Check im Check-Block: gleicher Style wie .np-tr-check-photo
   (zweizeilig mit Hint), nur mit pink-Akzent statt blau. */
.np-tr-check-birthday {
	background: color-mix( in srgb, #ec4899 8%, transparent );
	border-left: 4px solid #ec4899;
	padding-left: 10px;
	border-radius: var( --np-tr-radius-sm );
}
[data-theme="dark"] .np-tr-check-birthday,
.np-tr-app.is-dark .np-tr-check-birthday {
	background: color-mix( in srgb, #ec4899 15%, transparent );
}

/* ============ V1.31.0 — Self-Exclude + Buchen-als Save-Button ============ */
/* Eigener Account (Self-Exclude im Gegner-Picker / Slot-Select) — disabled +
   gedämpft, klar sichtbar dass das deine eigene Identität ist. */
.np-tr-league-opt.is-self,
.np-tr-league-opt.is-self .np-tr-league-name {
	opacity: 0.5;
	cursor: not-allowed;
}
.np-tr-league-opt.is-self input[type="radio"] { cursor: not-allowed; }
select.np-tr-mp-slot-select option:disabled {
	color: var( --np-tr-muted );
	font-style: italic;
}

/* Save-Button am Ende des Buchen-als-Edit-Blocks */
.np-tr-contact-save-row {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed color-mix( in srgb, var( --np-tr-fg ) 10%, transparent );
}
.np-tr-contact-save {
	min-width: 180px;
}

/* ============ V1.30.1 — „➕ Weiteres Match"-Modal Layout ============ */
/* Generic-Modal-Grid ist 2-spaltig ab 640px (Haupt-Booking-Form). Im AddMatch
   Modal braucht das aber 1-spaltig sein, damit Header + Beschreibung +
   Slot-Blöcke untereinander sauber gestapelt werden — sonst landen H2 und P
   nebeneinander und werden in schmalen Spalten umgebrochen ("Weiteres Match
   anlegen" auf 2 Zeilen). Wir überschreiben das gezielt für add-match.
   V1.30.2 — Spezifitaets-Bump (compound selector statt descendant).
   Live-Test V1.30.1 zeigte: die generische @media-Regel
   `dialog.np-tr-modal .np-tr-form` (Spezifitaet 0,2,2) gewann gegen
   `dialog.np-tr-modal-add-match .np-tr-form` (gleiche Spezifitaet, aber
   spaeter im File). Compound `dialog.np-tr-modal.np-tr-modal-add-match`
   bringt Spezifitaet auf 0,3,2 → ueberschreibt sicher. Zusaetzlich
   explizit max-width damit Browser-Default-max-width vom <dialog>
   nicht klein bleibt. */
dialog.np-tr-modal.np-tr-modal-add-match {
	width: min( 640px, 95vw );
	max-width: min( 640px, 95vw );
}
dialog.np-tr-modal.np-tr-modal-add-match .np-tr-form {
	grid-template-columns: 1fr;
}
.np-tr-mp-slots-section {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px dashed color-mix( in srgb, var( --np-tr-fg ) 12%, transparent );
}
.np-tr-mp-slots-title {
	display: block;
	margin-bottom: 8px;
	font-size: 0.95rem;
}
.np-tr-modal-add-match .np-tr-mp-slot {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	margin-bottom: 10px;
	border: 1px solid var( --np-tr-border );
	border-left: 4px solid var( --np-tr-primary );
	border-radius: var( --np-tr-radius-sm );
	background: color-mix( in srgb, var( --np-tr-primary ) 4%, transparent );
}
.np-tr-mp-slot-head {
	font-size: 0.95rem;
}
.np-tr-mp-slot-label {
	display: block;
	margin-top: 4px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var( --np-tr-muted );
}
.np-tr-modal-add-match .np-tr-mp-slot-select,
.np-tr-modal-add-match .np-tr-mp-slot-sect,
.np-tr-modal-add-match .np-tr-mp-slot-guest {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm );
	font-size: 0.9rem;
}
.np-tr-modal-error {
	grid-column: 1 / -1;
	color: var( --np-tr-danger );
	margin: 4px 0;
	font-size: 0.9rem;
}

.np-tr-modal-close {
	position: sticky;
	top: 8px;
	left: calc( 100% - 50px );  /* rechts-bündig per left, damit position:sticky greift */
	float: right;               /* zweite Absicherung — bewegt sich aus dem Fluss */
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 15%, transparent );
	background: var( --np-tr-card );
	color: var( --np-tr-fg );
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .15 );
	margin: 8px 8px -32px 0;    /* negativer margin-bottom → folgender Inhalt rückt hoch */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .12s ease, background .12s ease;
}
.np-tr-modal-close:hover,
.np-tr-modal-close:focus-visible {
	background: color-mix( in srgb, var( --np-tr-fg ) 8%, var( --np-tr-card ) );
	transform: scale( 1.05 );
}
.np-tr-modal-close:active { transform: scale( .95 ); }

.np-tr-modal-summary {
	display: flex;
	gap: 14px;
	padding: 18px 24px 14px;
	border-bottom: 1px solid var(--np-tr-border);
	position: sticky;
	top: 0;
	background: var(--np-tr-card);
	z-index: 2;
}
.np-tr-modal-photo {
	width: 64px; height: 64px;
	object-fit: cover;
	border-radius: var(--np-tr-radius-sm);
	flex-shrink: 0;
}
.np-tr-modal-summary-text { flex: 1; min-width: 0; }
.np-tr-modal-eyebrow {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--np-tr-primary);
}
.np-tr-modal-tisch {
	font-size: 1.2rem;
	font-weight: 700;
	margin-top: 2px;
}
.np-tr-modal-meta {
	color: var(--np-tr-muted);
	font-size: .92rem;
	margin-top: 4px;
}
.np-tr-modal-desc {
	margin: 8px 0 0;
	color: var(--np-tr-muted);
	font-size: .88rem;
}

.np-tr-form {
	padding: 18px 24px 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
@media ( min-width: 640px ) {
	dialog.np-tr-modal .np-tr-form {
		grid-template-columns: 1fr 1fr;
		column-gap: 18px;
	}
	dialog.np-tr-modal .np-tr-form > .np-tr-honey,
	dialog.np-tr-modal .np-tr-form > datalist,
	dialog.np-tr-modal .np-tr-form > .np-tr-more-fields,
	dialog.np-tr-modal .np-tr-form > .np-tr-checks,
	dialog.np-tr-modal .np-tr-form > .np-tr-form-error,
	dialog.np-tr-modal .np-tr-form > .np-tr-modal-actions,
	/* Phase 17 — neue Elemente immer volle Breite, nie 2-spaltig */
	dialog.np-tr-modal .np-tr-form > .np-tr-switch-row,
	dialog.np-tr-modal .np-tr-form > .np-tr-welcome-banner,
	dialog.np-tr-modal .np-tr-form > .np-tr-contact-fields,
	dialog.np-tr-modal .np-tr-form > .np-tr-contact-collapsed,
	dialog.np-tr-modal .np-tr-form > .np-tr-quick-picks,
	dialog.np-tr-modal .np-tr-form > .np-tr-league-block,
	dialog.np-tr-modal .np-tr-form > .np-tr-row {
		grid-column: 1 / -1;
	}
}
.np-tr-honey {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.np-tr-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.np-tr-row-label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--np-tr-fg);
}
.np-tr-row input,
.np-tr-row select {
	background: var(--np-tr-bg);
	border: 1px solid var(--np-tr-border);
	color: var(--np-tr-fg);
	border-radius: var(--np-tr-radius-sm);
	padding: 10px 12px;
	font: inherit;
	min-height: 42px;
}
.np-tr-row input:focus,
.np-tr-row select:focus {
	outline: 2px solid var(--np-tr-primary);
	outline-offset: 1px;
}
.np-tr-row-hint {
	font-size: .75rem;
	color: var(--np-tr-muted);
}

.np-tr-checks {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}
.np-tr-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: .9rem;
	color: var(--np-tr-fg);
	cursor: pointer;
}
.np-tr-check input { margin-top: 3px; }
.np-tr-check-required span::after {
	content: ' *';
	color: var(--np-tr-danger);
}
.np-tr-check.is-locked {
	opacity: 0.85;
	background: color-mix( in srgb, #f59e0b 10%, transparent );
	border-radius: 6px;
	padding: 4px 8px;
	margin-left: -8px;
}
.np-tr-check.is-locked input {
	cursor: not-allowed;
}

.np-tr-form-error {
	color: var(--np-tr-danger);
	font-size: .9rem;
	min-height: 18px;
}

.np-tr-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 8px;
}
dialog.np-tr-modal .np-tr-form > .np-tr-modal-actions {
	position: sticky;
	bottom: 0;
	background: var(--np-tr-card);
	margin: 14px -24px 0;
	padding: 14px 24px;
	border-top: 1px solid var(--np-tr-border);
	z-index: 2;
}

/* ---------- Buttons ---------- */
.np-tr-btn {
	border: none;
	border-radius: var(--np-tr-radius-sm);
	padding: 10px 18px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
	transition: filter .15s ease, transform .05s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.np-tr-btn:active { transform: translateY( 1px ); }
.np-tr-btn:disabled { opacity: .6; cursor: not-allowed; }

.np-tr-btn-primary {
	background: var(--np-tr-primary);
	color: #fff;
}
.np-tr-btn-primary:hover { filter: brightness( 1.08 ); }

.np-tr-btn-ghost {
	background: transparent;
	color: var(--np-tr-fg);
	border: 1px solid var(--np-tr-border);
}
.np-tr-btn-ghost:hover { background: rgba(0,0,0,.04); }

.np-tr-btn-danger {
	background: var(--np-tr-danger);
	color: #fff;
}
.np-tr-btn-danger:hover { filter: brightness( 1.05 ); }

.np-tr-linkbtn {
	background: none;
	border: none;
	color: var(--np-tr-primary);
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}

/* ---------- Success modal ---------- */
.np-tr-modal-success {
	text-align: center;
	padding: 0;
	max-width: 480px;
	background: var( --np-tr-card );
	color: var( --np-tr-fg );
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 14%, transparent );
	border-radius: 14px;
	overflow: hidden;
}
.np-tr-success-header {
	position: relative;
	padding: 28px 28px 22px;
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-tr-primary ) 14%, var( --np-tr-card ) ),
		var( --np-tr-card )
	);
	border-bottom: 1px solid color-mix( in srgb, var( --np-tr-fg ) 8%, transparent );
}
.np-tr-success-logo {
	display: block;
	max-height: 48px;
	width: auto;
	margin: 0 auto 14px;
	filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, .15 ) );
}
.np-tr-success-icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: linear-gradient( 135deg, #22c55e, #16a34a );
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	line-height: 64px;
	margin: 0 auto;
	box-shadow: 0 6px 16px rgba( 34, 197, 94, .35 ), 0 0 0 6px rgba( 34, 197, 94, .12 );
	animation: np-tr-success-pop .5s cubic-bezier( .25, 1.4, .5, 1 );
}
@keyframes np-tr-success-pop {
	0%   { transform: scale( .5 ); opacity: 0; }
	60%  { transform: scale( 1.15 ); opacity: 1; }
	100% { transform: scale( 1 ); }
}
.np-tr-success-body {
	padding: 22px 28px 24px;
}
.np-tr-success-title {
	margin: 0 0 16px;
	font-size: 1.45rem;
	font-weight: 700;
	color: var( --np-tr-fg );
}
.np-tr-success-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 16px;
	padding: 14px 16px;
	background: color-mix( in srgb, var( --np-tr-primary ) 6%, var( --np-tr-card ) );
	border: 1px solid color-mix( in srgb, var( --np-tr-primary ) 22%, transparent );
	border-radius: 10px;
	text-align: left;
}
.np-tr-success-card-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.np-tr-success-card-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix( in srgb, var( --np-tr-primary ) 18%, var( --np-tr-card ) );
	font-size: 1.1rem;
}
.np-tr-success-card-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.np-tr-success-card-label {
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --np-tr-muted );
	font-weight: 600;
}
.np-tr-success-card-value {
	font-size: 1rem;
	font-weight: 600;
	color: var( --np-tr-fg );
	line-height: 1.3;
}
.np-tr-success-text {
	margin: 0;
	color: var( --np-tr-muted );
	font-size: .95rem;
	line-height: 1.55;
}
.np-tr-success-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0 28px 26px;
}

/* ---------- Legal footer ---------- */
.np-tr-legal {
	margin-top: 16px;
	padding-top: 10px;
	border-top: 1px solid var(--np-tr-border);
}
.np-tr-legal-row {
	display: flex;
	gap: 18px;
	font-size: .82rem;
	flex-wrap: wrap;
}
.np-tr-legal a,
.np-tr-legal .np-tr-linkbtn {
	color: var(--np-tr-muted);
	text-decoration: underline;
}
.np-tr-legal a:hover,
.np-tr-legal .np-tr-linkbtn:hover {
	color: var(--np-tr-primary);
}

/* ---------- Manage page ---------- */
.np-tr-manage-card {
	max-width: 520px;
	margin: 0 auto;
	padding: 8px 4px;
}
.np-tr-manage-info {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 14px;
	margin: 14px 0 20px;
}
.np-tr-manage-info dt {
	color: var(--np-tr-muted);
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.np-tr-manage-info dd { margin: 0; font-weight: 600; }
.np-tr-cancelled { text-align: center; padding: 32px 0; }

.np-tr-error {
	color: var(--np-tr-danger);
	background: rgba(248,81,73,.08);
	padding: 14px 18px;
	border-radius: var(--np-tr-radius-sm);
}

/* ---------- Themed event card ---------- */
.np-tr-themed-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0 14px;
}

.np-tr-themed-card {
	--np-themed-color: var(--np-tr-primary);
	display: flex;
	gap: 14px;
	align-items: center;
	background: color-mix( in srgb, var(--np-themed-color) 10%, var(--np-tr-card) );
	border: 1px solid color-mix( in srgb, var(--np-themed-color) 40%, var(--np-tr-border) );
	border-left: 5px solid var(--np-themed-color);
	border-radius: var(--np-tr-radius);
	padding: 14px 18px;
	box-shadow: var(--np-tr-shadow);
	animation: np-tr-slide-in .35s ease;
}

@keyframes np-tr-slide-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.np-tr-themed-icon {
	font-size: 32px;
	line-height: 1;
	width: 52px;
	height: 52px;
	min-width: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix( in srgb, var(--np-themed-color) 22%, transparent );
	border-radius: 12px;
}
.np-tr-themed-body { min-width: 0; }
.np-tr-themed-eyebrow {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--np-themed-color);
	margin-bottom: 2px;
}
.np-tr-themed-name {
	margin: 0 0 4px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--np-tr-fg);
}
.np-tr-themed-desc {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--np-tr-fg);
}

/* Featured-Hinweis auf dem Tisch – dezent, NICHT als "reserviert" zu lesen.
   Nur ein etwas anderer Border-Ton + Event-Emoji in der Ecke.            */
.np-tr-table.is-featured .np-tr-table-shape {
	stroke-width: 2;
	/* Stroke-Farbe bleibt is-free / is-taken, lediglich Akzent als
	   subtiler Hintergrund-Boost: */
}
.np-tr-table-featured-icon {
	font-size: 22px;
	pointer-events: none;
	dominant-baseline: text-after-edge;
	opacity: 0.85;
}
@media ( prefers-reduced-motion: reduce ) {
	.np-tr-themed-card { animation: none; }
}

/* Hinweis "Tische bleiben buchbar" in der Themen-Karte */
.np-tr-themed-bookable {
	margin: 8px 0 0;
	padding: 6px 10px;
	background: color-mix( in srgb, var(--np-tr-accent) 14%, transparent );
	border-radius: 6px;
	font-size: .85rem;
	color: var(--np-tr-fg);
	font-weight: 500;
}

/* Calendar dot variant for themed events */
.np-tr-cal-dot.dot-themed { font-size: 11px; }

/* Admin themed events chip */
.np-tr-themed-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1px solid;
	font-size: 18px;
}

/* ---------- Decorations on map ---------- */
.np-tr-deko-shape {
	fill: color-mix(in srgb, var(--np-tr-fg) 6%, var(--np-tr-card));
	stroke: color-mix(in srgb, var(--np-tr-fg) 28%, transparent);
	stroke-dasharray: 4 4;
	stroke-width: 1;
	fill-opacity: 1;
}
.np-tr-deko-glyph {
	fill: var(--np-tr-fg);
	fill-opacity: 0.75;
}
.np-tr-deko-stairs-path {
	fill: var(--np-tr-fg);
	fill-opacity: 0.7;
}
.np-tr-deko-label {
	fill: var(--np-tr-fg);
	font-weight: 700;
	font-size: 14px;
}
.np-tr-deko { pointer-events: none; }

/* ---------- Theme-day hint ---------- */
.np-tr-hint-theme {
	background: rgba(31,111,235,.08);
	border-color: var(--np-tr-primary);
	color: var(--np-tr-fg);
}

/* ---------- Waitlist card ---------- */
.np-tr-waitlist-card {
	background: var(--np-tr-card);
	border: 1px solid var(--np-tr-border);
	border-radius: var(--np-tr-radius);
	padding: 18px 20px;
	margin: 14px 0;
}
.np-tr-waitlist-card h3 {
	margin: 0 0 6px;
	font-size: 1.1rem;
}
.np-tr-waitlist-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.np-tr-waitlist-form input {
	flex: 1;
	min-width: 180px;
	background: var(--np-tr-bg);
	border: 1px solid var(--np-tr-border);
	color: var(--np-tr-fg);
	border-radius: var(--np-tr-radius-sm);
	padding: 10px 12px;
	min-height: 42px;
}
.np-tr-waitlist-ok {
	text-align: center;
	padding: 18px 0;
}

/* ---------- "More options" accordion in modal — Phase 23.1 modernisiert --- */
.np-tr-more-fields {
	margin-top: 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid color-mix( in srgb, var( --np-tr-fg, #1a1a1a ) 12%, transparent );
	padding-top: 14px;
}
.np-tr-more-fields summary {
	cursor: pointer;
	font-weight: 600;
	font-size: .92rem;
	color: var( --np-tr-primary, #1f6feb );
	list-style: none;
	padding: 10px 14px;
	background: rgba( 31, 111, 235, 0.06 );
	border: 1px solid rgba( 31, 111, 235, 0.18 );
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background-color 0.15s, border-color 0.15s;
	user-select: none;
}
.np-tr-more-fields summary:hover {
	background: rgba( 31, 111, 235, 0.12 );
	border-color: rgba( 31, 111, 235, 0.3 );
}
.np-tr-more-fields summary::-webkit-details-marker { display: none; }
.np-tr-more-fields summary::before {
	content: '⚙️';
	font-size: 16px;
	line-height: 1;
}
.np-tr-more-fields summary::after {
	content: '▾';
	margin-left: auto;
	font-size: 14px;
	transition: transform 0.2s;
	opacity: 0.6;
}
.np-tr-more-fields[open] summary::after {
	transform: rotate( 180deg );
}
.np-tr-more-fields[open] summary {
	background: rgba( 31, 111, 235, 0.12 );
	border-color: rgba( 31, 111, 235, 0.35 );
	margin-bottom: 4px;
}
/* V1.33.3 — „Mehr Optionen" Grid auf Wrapper-DIV statt direkt auf <details>.
   Chrome behandelt CSS-Grid auf <details>-Elementen unzuverlaessig — Items
   landeten alle in Spalte 1 obwohl `grid-template-columns: 1fr 1fr` computed
   war. Wrapper `.np-tr-more-fields-content` als regulaeres <div> umgeht das.
   Mobile (<560px) bleibt 1-spaltig. */
.np-tr-more-fields-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
@media ( min-width: 560px ) {
	.np-tr-more-fields-content {
		grid-template-columns: 1fr 1fr;
		column-gap: 18px;
		row-gap: 12px;
	}
	/* Reserve-Klasse fuer Felder die ueber beide Spalten gespannt werden sollen */
	.np-tr-more-fields-content > .np-tr-optfield-fullrow {
		grid-column: 1 / -1;
	}
}

/* ---------- Live-Radar ---------- */
.np-tr-radar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--np-tr-card);
	border: 1px solid var(--np-tr-border);
	border-radius: 999px;
	font-size: .95rem;
	box-shadow: var(--np-tr-shadow);
}
.np-tr-radar-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--np-tr-muted);
	display: inline-block;
	box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}
.np-tr-radar-dot.is-free { background: var(--np-tr-accent); }
.np-tr-radar-dot.is-busy { background: var(--np-tr-danger); }
.np-tr-radar-link {
	color: inherit;
	text-decoration: none;
}
.np-tr-radar-link:hover { text-decoration: underline; }
.np-tr-radar-event { color: var(--np-tr-muted); font-style: italic; }

/* ---------- TV-Guide Timeline ---------- */
.np-tr-controls-tight {
	grid-template-columns: 1fr 1fr 1fr;
}
.np-tr-tl-scroll {
	overflow-x: auto;
	margin-top: 8px;
	border: 1px solid var(--np-tr-border);
	border-radius: var(--np-tr-radius);
	background: var(--np-tr-card);
}
.np-tr-tl-grid {
	display: flex;
	flex-direction: column;
	min-width: 720px;
}
.np-tr-tl-row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--np-tr-border);
	min-height: 56px;
}
.np-tr-tl-row:last-child { border-bottom: none; }
.np-tr-tl-row.np-tr-tl-header {
	min-height: 32px;
	background: color-mix( in srgb, var(--np-tr-fg) 5%, transparent );
	font-size: .72rem;
	color: var(--np-tr-muted);
	font-weight: 600;
}
.np-tr-tl-label {
	width: 140px;
	flex-shrink: 0;
	padding: 8px 10px;
	border-right: 1px solid var(--np-tr-border);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--np-tr-bg);
}
.np-tr-tl-label strong { font-size: .92rem; line-height: 1.1; }
.np-tr-tl-label-meta { font-size: .72rem; color: var(--np-tr-muted); margin-top: 2px; }

.np-tr-tl-lane {
	position: relative;
	flex: 1;
	min-width: 0;
	background: repeating-linear-gradient(
		to right,
		transparent 0,
		transparent calc( 100% / 16 - 1px ),
		color-mix( in srgb, var(--np-tr-fg) 8%, transparent ) calc( 100% / 16 - 1px ),
		color-mix( in srgb, var(--np-tr-fg) 8%, transparent ) calc( 100% / 16 )
	);
	cursor: pointer;
	transition: background-color .12s ease;
}
.np-tr-tl-lane:hover {
	background-color: color-mix( in srgb, var(--np-tr-accent) 10%, transparent );
}
.np-tr-tl-header .np-tr-tl-lane { cursor: default; background: transparent; }
.np-tr-tl-header .np-tr-tl-lane:hover { background-color: transparent; }

.np-tr-tl-tick {
	display: inline-block;
	width: calc( 100% / 16 );
	text-align: left;
	padding: 6px 0 6px 4px;
	border-left: 1px solid color-mix( in srgb, var(--np-tr-fg) 10%, transparent );
	box-sizing: border-box;
	pointer-events: none;
}
.np-tr-tl-header .np-tr-tl-lane {
	display: flex;
	flex-wrap: nowrap;
}

.np-tr-tl-block {
	position: absolute;
	top: 4px;
	bottom: 4px;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: .8rem;
	font-weight: 600;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.np-tr-tl-block.is-private {
	background: color-mix( in srgb, var(--np-tr-danger) 80%, #000 );
}
.np-tr-tl-block.is-open {
	background: color-mix( in srgb, #f59e0b 85%, #000 );
}
.np-tr-tl-block.is-event {
	background: color-mix( in srgb, var(--np-event-color, var(--np-tr-primary)) 75%, #000 );
}
.np-tr-tl-block.is-challenge {
	background: linear-gradient( 135deg, #b91c1c 0%, #f59e0b 100% );
	color: #fff;
	font-weight: 800;
	border: 2px solid #fbbf24;
	animation: np-tr-challenge-pulse 2.4s ease-in-out infinite;
}
@keyframes np-tr-challenge-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 251, 191, 36, 0.6 ); }
	50%      { box-shadow: 0 0 0 6px rgba( 251, 191, 36, 0 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.np-tr-tl-block.is-challenge { animation: none; }
}
.np-tr-tl-block.is-clickable {
	cursor: pointer;
}
.np-tr-tl-block.is-clickable:hover {
	filter: brightness( 1.12 );
	transform: translateY( -1px );
	box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.np-tr-tl-block-icon { font-size: .95rem; line-height: 1; flex-shrink: 0; }
.np-tr-tl-block-text { overflow: hidden; text-overflow: ellipsis; }

@media ( max-width: 720px ) {
	.np-tr-tl-label { width: 110px; }
	.np-tr-tl-block-text { display: none; }
}

/* ---------- Live-Clock im Header ---------- */
.np-tr-title-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.np-tr-live-clock {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .82rem;
	font-weight: 500;
	color: var(--np-tr-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.np-tr-clock-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba( 34, 197, 94, 0.6 );
	animation: np-tr-clock-pulse 2.4s ease-in-out infinite;
	margin-right: 2px;
	flex-shrink: 0;
}
@keyframes np-tr-clock-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 34, 197, 94, 0.6 ); }
	50%      { box-shadow: 0 0 0 6px rgba( 34, 197, 94, 0 ); }
}
.np-tr-clock-time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--np-tr-fg);
}
.np-tr-clock-active {
	font-weight: 600;
	color: color-mix( in srgb, var(--np-tr-primary) 90%, var(--np-tr-fg) );
}
@media ( prefers-reduced-motion: reduce ) {
	.np-tr-clock-dot { animation: none; }
}

/* ---------- JETZT-Marker auf Timeline ---------- */
.np-tr-tl-row-now {
	position: absolute;
	top: 0; bottom: 0;
	width: 2px;
	background: linear-gradient( to bottom, #ef4444, #b91c1c );
	z-index: 8;
	pointer-events: none;
	box-shadow: 0 0 6px rgba( 239, 68, 68, 0.55 );
}
.np-tr-tl-row-now-head::before {
	content: 'JETZT';
	position: absolute;
	top: -3px;
	left: 50%;
	transform: translateX( -50% );
	font-size: 9px;
	font-weight: 900;
	background: #ef4444;
	color: #fff;
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: 0.06em;
	box-shadow: 0 2px 5px rgba( 239, 68, 68, 0.4 );
	white-space: nowrap;
}

/* ---------- View toggle ---------- */
.np-tr-view-toggle {
	margin-left: auto;
	display: inline-flex;
	background: var(--np-tr-bg);
	border: 1px solid var(--np-tr-border);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}
.np-tr-view-pill {
	background: transparent;
	border: none;
	border-radius: 999px;
	padding: 6px 14px;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var(--np-tr-muted);
	cursor: pointer;
}
.np-tr-view-pill.is-active {
	background: var(--np-tr-primary);
	color: #fff;
}

/* 2.5D-Toggle (Google-Maps-Style) */
.np-tr-iso-toggle {
	margin-left: auto;
	margin-right: 8px;
	background: var(--np-tr-bg);
	border: 1px solid var(--np-tr-border);
	color: var(--np-tr-fg);
	border-radius: 999px;
	padding: 6px 12px;
	font: inherit;
	font-size: .82rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.np-tr-iso-toggle:hover { transform: translateY(-1px); }
.np-tr-iso-toggle.is-active {
	background: linear-gradient( 135deg, #1f6feb, #60a5fa );
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 14px rgba(31, 111, 235, 0.35);
}

/* SVG-Wrap im 2.5D-Modus: leicht nach hinten gekippt mit Perspektive */
.np-tr-svg-wrap.is-iso {
	perspective: 1600px;
	perspective-origin: center 75%;
	padding: 40px 0 80px;
	transition: padding .4s ease;
}
.np-tr-svg-wrap.is-iso .np-tr-svg {
	transform: rotateX( 48deg ) rotateZ( -6deg );
	transform-origin: center center;
	transform-style: preserve-3d;
	transition: transform .55s cubic-bezier(.4, 0, .2, 1);
	filter: drop-shadow( 0 12px 24px rgba( 0, 0, 0, 0.35 ) );
}
/* Tische bekommen leichte "Tiefe" via stärkerem drop-shadow */
.np-tr-svg-wrap.is-iso .np-tr-table .np-tr-table-shape {
	filter: drop-shadow( 0 3px 4px rgba( 0, 0, 0, 0.3 ) );
}
/* Texturen blenden im 3D-Modus etwas heller ein für besseren "Material-Look" */
.np-tr-svg-wrap.is-iso .np-tr-table-texture {
	filter: brightness( 1.1 ) contrast( 1.05 );
}
@media ( prefers-reduced-motion: reduce ) {
	.np-tr-svg-wrap.is-iso .np-tr-svg { transition: none; }
}

/* ---------- Calendar ---------- */
.np-tr-cal-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.np-tr-cal-month {
	font-size: 1.1rem;
	font-weight: 700;
	min-width: 160px;
	text-align: center;
	margin: 0;
}
.np-tr-cal-prev, .np-tr-cal-next, .np-tr-cal-today {
	min-height: 36px;
	padding: 6px 12px;
}
.np-tr-cal-lfg {
	margin-left: auto;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	font-size: .9rem;
	cursor: pointer;
}

.np-tr-cal-headers {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 4px;
}
.np-tr-cal-h {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--np-tr-muted);
	text-align: center;
}

.np-tr-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.np-tr-cal-cell {
	position: relative;
	min-height: 70px;
	border-radius: 8px;
	padding: 6px;
	border: 1px solid var(--np-tr-border);
	background: var(--np-tr-card);
	cursor: pointer;
	text-align: left;
	color: var(--np-tr-fg);
	font: inherit;
	transition: transform .08s ease, box-shadow .12s ease;
}
.np-tr-cal-cell:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
.np-tr-cal-cell.is-empty { background: transparent; border: none; cursor: default; }
.np-tr-cal-cell.is-empty:hover { box-shadow: none; transform: none; }
.np-tr-cal-cell.is-past   { opacity: .55; cursor: default; }
.np-tr-cal-cell.is-muted  { opacity: .35; }
.np-tr-cal-cell.is-today  { outline: 2px solid var(--np-tr-primary); outline-offset: -2px; }
.np-tr-cal-cell.is-blocked { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 6px, transparent 6px 12px); }

.np-tr-cal-cell.heat-empty  { background: var(--np-tr-card); }
.np-tr-cal-cell.heat-low    { background: color-mix(in srgb, var(--np-tr-accent) 18%, var(--np-tr-card)); }
.np-tr-cal-cell.heat-medium { background: color-mix(in srgb, #eab308 22%, var(--np-tr-card)); }
.np-tr-cal-cell.heat-high   { background: color-mix(in srgb, #f97316 28%, var(--np-tr-card)); }
.np-tr-cal-cell.heat-full   { background: color-mix(in srgb, var(--np-tr-danger) 32%, var(--np-tr-card)); }
.np-tr-cal-cell.heat-closed { background: color-mix(in srgb, var(--np-tr-muted) 18%, var(--np-tr-card)); color: var(--np-tr-muted); }

.np-tr-cal-day {
	font-weight: 700;
	font-size: .92rem;
}
.np-tr-cal-dots {
	position: absolute;
	right: 6px;
	top: 6px;
	display: flex;
	gap: 2px;
	font-size: 12px;
}
.np-tr-cal-count {
	position: absolute;
	right: 6px;
	bottom: 4px;
	font-size: .72rem;
	color: var(--np-tr-muted);
	font-weight: 600;
}

.np-tr-cal-legend {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--np-tr-border);
	font-size: .8rem;
	color: var(--np-tr-muted);
}
.np-tr-cal-legend-item { display: inline-flex; gap: 6px; align-items: center; }
.np-tr-cal-legend-swatch {
	width: 14px; height: 14px;
	border-radius: 3px;
	border: 1px solid var(--np-tr-border);
}
.np-tr-cal-legend-swatch.heat-empty  { background: var(--np-tr-card); }
.np-tr-cal-legend-swatch.heat-low    { background: color-mix(in srgb, var(--np-tr-accent) 18%, var(--np-tr-card)); }
.np-tr-cal-legend-swatch.heat-medium { background: color-mix(in srgb, #eab308 22%, var(--np-tr-card)); }
.np-tr-cal-legend-swatch.heat-high   { background: color-mix(in srgb, #f97316 28%, var(--np-tr-card)); }
.np-tr-cal-legend-swatch.heat-full   { background: color-mix(in srgb, var(--np-tr-danger) 32%, var(--np-tr-card)); }
.np-tr-cal-legend-swatch.heat-closed { background: color-mix(in srgb, var(--np-tr-muted) 18%, var(--np-tr-card)); }

/* Day popover */
dialog.np-tr-cal-popover {
	padding: 22px 24px;
	width: min( 460px, 92vw );
}
.np-tr-cal-popover-date {
	margin: 0 0 10px;
	font-size: 1.05rem;
	font-weight: 700;
}
.np-tr-cal-popover-theme {
	background: rgba(31,111,235,.08);
	border-left: 4px solid var(--np-tr-primary);
	padding: 8px 12px;
	border-radius: 6px;
	margin: 6px 0 12px;
}
.np-tr-cal-stats {
	display: flex;
	gap: 16px;
	margin: 10px 0 6px;
}
.np-tr-cal-stat {
	background: var(--np-tr-bg);
	border: 1px solid var(--np-tr-border);
	border-radius: 10px;
	padding: 10px 14px;
	min-width: 90px;
	text-align: center;
}
.np-tr-cal-stat.is-lfg { border-color: var(--np-tr-accent); }
.np-tr-cal-stat-num {
	display: block;
	font-size: 1.4rem;
	font-weight: 800;
}
.np-tr-cal-stat-label {
	display: block;
	font-size: .75rem;
	color: var(--np-tr-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ---------- Theken-Tab (Order) ---------- */
.np-tr-order {
	--np-tr-primary: #1f6feb;
	--np-tr-accent:  #f59e0b;
	--np-tr-danger:  #f85149;
	--np-tr-bg:      #ffffff;
	--np-tr-fg:      #111827;
	--np-tr-muted:   #6b7280;
	--np-tr-card:    #ffffff;
	--np-tr-border:  #e5e7eb;
	--np-tr-shadow:  0 4px 14px rgba(0,0,0,.06);
	--np-tr-radius:  12px;
	--np-tr-radius-sm: 8px;
	font-family: inherit;
	color: var(--np-tr-fg);
	background: var(--np-tr-bg);
	border: 1px solid var(--np-tr-border);
	border-radius: var(--np-tr-radius);
	padding: 22px 24px;
	max-width: 600px;
	margin: 24px auto;
	box-shadow: var(--np-tr-shadow);
}
.np-tr-order .np-tr-title { margin: 0 0 6px; }
.np-tr-order-list {
	margin: 18px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.np-tr-order-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--np-tr-card);
	border: 1px solid var(--np-tr-border);
	border-radius: var(--np-tr-radius-sm);
}
.np-tr-order-item-text { flex: 1; min-width: 0; }
.np-tr-order-price { display: block; color: var(--np-tr-muted); font-size: .9rem; }
.np-tr-order-counter {
	display: flex;
	align-items: center;
	gap: 8px;
}
.np-tr-order-btn {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid var(--np-tr-border);
	background: var(--np-tr-bg);
	color: var(--np-tr-fg);
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
}
.np-tr-order-btn:hover { background: color-mix( in srgb, var(--np-tr-accent) 12%, var(--np-tr-bg) ); }
.np-tr-order-count {
	min-width: 28px;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.np-tr-order-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 14px 0;
}
.np-tr-order-fields input {
	background: var(--np-tr-bg);
	border: 1px solid var(--np-tr-border);
	color: var(--np-tr-fg);
	border-radius: var(--np-tr-radius-sm);
	padding: 10px 12px;
}
.np-tr-order-bottom {
	display: flex;
	align-items: center;
	gap: 12px;
}
.np-tr-order-total {
	flex: 1;
	font-weight: 700;
	color: var(--np-tr-muted);
}
.np-tr-order-success {
	text-align: center;
	padding: 40px 24px;
}

/* ---------- Mein Battle-Plan ---------- */
.np-tr-myplan {
	--np-tr-primary: #1f6feb;
	--np-tr-accent:  #39d353;
	--np-tr-danger:  #f85149;
	--np-tr-bg:      #ffffff;
	--np-tr-fg:      #111827;
	--np-tr-muted:   #6b7280;
	--np-tr-card:    #ffffff;
	--np-tr-border:  #e5e7eb;
	--np-tr-shadow:  0 4px 14px rgba(0,0,0,.06);
	--np-tr-radius:  12px;
	--np-tr-radius-sm: 8px;
	font-family: inherit;
	color: var(--np-tr-fg);
	background: var(--np-tr-bg);
	border: 1px solid var(--np-tr-border);
	border-radius: var(--np-tr-radius);
	padding: 22px 24px;
	max-width: 720px;
	margin: 24px auto;
	box-shadow: var(--np-tr-shadow);
}
@media ( prefers-color-scheme: dark ) {
	.np-tr-myplan {
		--np-tr-bg: #0d1117;
		--np-tr-fg: #e6edf3;
		--np-tr-muted: #8b949e;
		--np-tr-card: #161b22;
		--np-tr-border: #30363d;
	}
}
.np-tr-myplan-card .np-tr-title { margin: 0 0 6px; }
.np-tr-myplan-section {
	margin: 22px 0 10px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--np-tr-primary);
	border-bottom: 1px solid var(--np-tr-border);
	padding-bottom: 6px;
}
.np-tr-myplan-list { list-style: none; padding: 0; margin: 0; }
.np-tr-myplan-item {
	background: var(--np-tr-card);
	border: 1px solid var(--np-tr-border);
	border-radius: var(--np-tr-radius-sm);
	padding: 12px 14px;
	margin-bottom: 8px;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}
.np-tr-myplan-item.is-cancelled {
	opacity: 0.55;
	text-decoration: line-through;
}
.np-tr-myplan-when { font-size: .95rem; }
.np-tr-myplan-what { flex: 1; min-width: 0; color: var(--np-tr-muted); }
.np-tr-myplan-cancel { margin-left: auto; padding: 6px 12px; min-height: 36px; }
.np-tr-myplan-badge {
	display: inline-block;
	margin-left: 8px;
	background: color-mix(in srgb, var(--np-tr-accent) 18%, transparent);
	color: color-mix(in srgb, var(--np-tr-accent) 80%, #000);
	font-size: .75rem;
	padding: 2px 8px;
	border-radius: 999px;
}
.np-tr-myplan-list.is-past { opacity: .8; }

/* ---------- Mobile tweaks ---------- */
@media ( max-width: 540px ) {
	.np-tr-app, .np-tr-manage {
		padding: 16px;
		margin: 12px;
		border-radius: 10px;
	}
	.np-tr-modal-summary {
		flex-direction: column;
	}
	.np-tr-modal-photo {
		width: 100%; height: 140px;
	}
	.np-tr-cal-cell { min-height: 56px; padding: 4px; }
	.np-tr-cal-day { font-size: .8rem; }
	.np-tr-cal-count { font-size: .65rem; }
	.np-tr-cal-dots { font-size: 10px; }
	.np-tr-cal-month { min-width: auto; flex: 1; font-size: 1rem; }
	.np-tr-cal-lfg { font-size: .8rem; }
}

/* ============================================================
 * PHASE 13 — Polish-Suite (A–F + Tier 1–3)
 * ============================================================ */

/* --- A: Tageszeit-Background-Tint (subtile Stimmung) ----- */
.np-tr-app.np-tr-tod-morning { box-shadow: inset 0 80px 100px -60px rgba( 255, 200, 120, .12 ); }
.np-tr-app.np-tr-tod-noon    { box-shadow: inset 0 80px 100px -60px rgba( 255, 230, 180, .10 ); }
.np-tr-app.np-tr-tod-evening { box-shadow: inset 0 80px 100px -60px rgba( 255, 110, 70, .14 ); }
.np-tr-app.np-tr-tod-night   { box-shadow: inset 0 80px 100px -60px rgba( 70, 90, 200, .14 ); }
.np-tr-app.np-tr-dark.np-tr-tod-morning { box-shadow: inset 0 80px 100px -60px rgba( 255, 200, 120, .06 ); }
.np-tr-app.np-tr-dark.np-tr-tod-evening { box-shadow: inset 0 80px 100px -60px rgba( 255, 110, 70, .08 ); }
.np-tr-app.np-tr-dark.np-tr-tod-night   { box-shadow: inset 0 80px 100px -60px rgba( 110, 130, 230, .10 ); }

/* --- B: Fortschrittsbalken auf belegten Tischen --------- */
.np-tr-table-progress-track {
	fill: rgba( 0, 0, 0, .15 );
	stroke: none;
}
.np-tr-app.np-tr-dark .np-tr-table-progress-track { fill: rgba( 255, 255, 255, .15 ); }
.np-tr-table-progress-fill {
	fill: var( --np-tr-primary );
	stroke: none;
	opacity: .85;
	transition: width .6s ease;
}
.np-tr-table.is-epic       .np-tr-table-progress-fill { fill: #f6c244; }
.np-tr-table.is-challenge  .np-tr-table-progress-fill { fill: #ef4444; }

/* --- C: Coming-up Ticker (auto-rotierend) --------------- */
.np-tr-coming-up {
	margin-top: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 10px;
	background: linear-gradient(
		to right,
		var( --np-tr-card ),
		color-mix( in srgb, var( --np-tr-primary ) 8%, var( --np-tr-card ) )
	);
	border: 1px solid color-mix( in srgb, var( --np-tr-primary ) 25%, transparent );
	overflow: hidden;
	font-size: .92rem;
}
.np-tr-coming-up-label {
	flex: 0 0 auto;
	font-weight: 700;
	color: var( --np-tr-primary );
	white-space: nowrap;
}
.np-tr-coming-up-marquee {
	display: inline-flex;
	gap: 28px;
	white-space: nowrap;
	animation: np-tr-marquee 24s linear infinite;
}
.np-tr-coming-up:hover .np-tr-coming-up-marquee { animation-play-state: paused; }
.np-tr-coming-up-item   { display: inline-flex; align-items: center; gap: 6px; }
.np-tr-coming-up-icon   { font-size: 1.05em; }
.np-tr-coming-up-badge  { font-size: .9em; }
@keyframes np-tr-marquee {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}

/* --- D: Konfetti --------------------------------------- */
.np-tr-confetti {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 99999;
	overflow: hidden;
}
.np-tr-confetti-piece {
	position: absolute;
	top: -16px;
	width: 10px;
	height: 14px;
	border-radius: 2px;
	opacity: .95;
	animation: np-tr-confetti-fall 2s cubic-bezier( .25, .8, .25, 1 ) forwards;
}
@keyframes np-tr-confetti-fall {
	0%   { transform: translate3d( 0, -20px, 0 ) rotate( 0deg ); opacity: 1; }
	100% { transform: translate3d( var( --np-confetti-dx, 0px ), 100vh, 0 ) rotate( var( --np-confetti-rot, 360deg ) ); opacity: 0; }
}

/* --- E: Dust-Partikel-Ambient (CSS-only) ---------------- */
.np-tr-dust {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}
.np-tr-dust-mote {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba( 255, 240, 200, .35 );
	opacity: 0;
	animation: np-tr-dust-float 14s linear infinite;
}
.np-tr-app.np-tr-dark .np-tr-dust-mote { background: rgba( 255, 240, 200, .25 ); }
.np-tr-dust-mote-1  { left:  8%; animation-delay:  0s; animation-duration: 13s; }
.np-tr-dust-mote-2  { left: 16%; animation-delay:  2s; animation-duration: 15s; }
.np-tr-dust-mote-3  { left: 24%; animation-delay:  4s; animation-duration: 12s; }
.np-tr-dust-mote-4  { left: 32%; animation-delay:  6s; animation-duration: 14s; }
.np-tr-dust-mote-5  { left: 40%; animation-delay:  1s; animation-duration: 16s; }
.np-tr-dust-mote-6  { left: 48%; animation-delay:  3s; animation-duration: 11s; }
.np-tr-dust-mote-7  { left: 56%; animation-delay:  5s; animation-duration: 13s; }
.np-tr-dust-mote-8  { left: 64%; animation-delay:  7s; animation-duration: 15s; }
.np-tr-dust-mote-9  { left: 72%; animation-delay:  2s; animation-duration: 14s; }
.np-tr-dust-mote-10 { left: 80%; animation-delay:  4s; animation-duration: 12s; }
.np-tr-dust-mote-11 { left: 88%; animation-delay:  6s; animation-duration: 16s; }
.np-tr-dust-mote-12 { left: 92%; animation-delay:  8s; animation-duration: 13s; }
@keyframes np-tr-dust-float {
	0%   { transform: translate3d( 0, 100%, 0 ) scale( .8 ); opacity: 0; }
	10%  { opacity: .6; }
	50%  { transform: translate3d( 10px, 50%, 0 ) scale( 1 ); opacity: .9; }
	90%  { opacity: .4; }
	100% { transform: translate3d( -8px, 0%, 0 ) scale( .8 ); opacity: 0; }
}
.np-tr-svg-wrap { position: relative; }

/* --- F: Visited-Glow für Stammgäste -------------------- */
.np-tr-table.is-visited .np-tr-table-shape {
	stroke: #fbbf24;
	stroke-width: 2;
	stroke-dasharray: 4 3;
	filter: drop-shadow( 0 0 6px rgba( 251, 191, 36, .35 ) );
}
.np-tr-table-visited-mark {
	font-size: 13px;
	fill: #fbbf24;
	font-weight: 900;
	pointer-events: none;
}

/* --- Tier 1: Reichhaltigere Legende --------------------- */
.np-tr-map-legend {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	font-size: .88rem;
	color: var( --np-tr-fg );
}
.np-tr-legend-head {
	font-weight: 700;
	margin-right: 6px;
	color: var( --np-tr-muted );
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .75rem;
}
.np-tr-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --np-tr-card ) 70%, transparent );
	border: 1px solid transparent;
	transition: background .15s, border-color .15s, transform .15s;
}
.np-tr-legend-item.is-clickable { cursor: pointer; }
.np-tr-legend-item.is-clickable:hover {
	background: var( --np-tr-card );
	border-color: color-mix( in srgb, var( --np-tr-primary ) 35%, transparent );
	transform: translateY( -1px );
}
.np-tr-legend-item.is-active {
	background: color-mix( in srgb, var( --np-tr-primary ) 20%, var( --np-tr-card ) );
	border-color: var( --np-tr-primary );
	color: var( --np-tr-primary );
	font-weight: 600;
}
.np-tr-legend-swatch {
	display: inline-block;
	width: 14px; height: 14px;
	border-radius: 4px;
	border: 1px solid rgba( 0, 0, 0, .15 );
}
.np-tr-legend-swatch.swatch-free           { background: #22c55e; }
.np-tr-legend-swatch.swatch-joinable       { background: #fbbf24; }
.np-tr-legend-swatch.swatch-private        { background: #ef4444; }
.np-tr-legend-swatch.swatch-community-full { background: #f59e0b; }
.np-tr-legend-swatch.swatch-blocked        { background: #6b7280; }
.np-tr-legend-swatch.swatch-epic           { background: linear-gradient( 135deg, #f6c244, #f97316 ); }
.np-tr-legend-swatch.swatch-challenge      { background: #ef4444; }
.np-tr-legend-swatch.swatch-reserving      { background: repeating-linear-gradient( 45deg, #93c5fd, #93c5fd 3px, #3b82f6 3px, #3b82f6 6px ); }
.np-tr-legend-swatch.swatch-themed         { background: linear-gradient( 135deg, #a855f7, #ec4899 ); }
.np-tr-legend-count {
	display: inline-block;
	min-width: 18px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var( --np-tr-primary );
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
}

/* --- Tier 1: Filter-Chips ------------------------------ */
.np-tr-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
	align-items: center;
}
.np-tr-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var( --np-tr-card );
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 12%, transparent );
	color: var( --np-tr-fg );
	font-size: .88rem;
	font-weight: 500;
	cursor: pointer;
	transition: all .15s ease;
}
.np-tr-chip:hover {
	border-color: var( --np-tr-primary );
	transform: translateY( -1px );
}
.np-tr-chip.is-active {
	background: var( --np-tr-primary );
	color: #fff;
	border-color: var( --np-tr-primary );
}
.np-tr-chip-random  { background: linear-gradient( 135deg, #a855f7, #ec4899 ); color: #fff; border-color: transparent; }
.np-tr-chip-help    { background: color-mix( in srgb, var( --np-tr-primary ) 12%, var( --np-tr-card ) ); }
.np-tr-chip-clear   { background: transparent; border-style: dashed; }
.np-tr-chip-icon    { font-size: 1.05em; }

/* --- Tier 3: Search-Box -------------------------------- */
.np-tr-search-box {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}
.np-tr-search-icon {
	position: absolute;
	left: 10px;
	pointer-events: none;
	opacity: .55;
}
.np-tr-search-input {
	width: 100%;
	padding: 8px 12px 8px 32px;
	border-radius: 8px;
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 15%, transparent );
	background: var( --np-tr-card );
	color: var( --np-tr-fg );
	font-size: .95rem;
	transition: border-color .15s, box-shadow .15s;
}
.np-tr-search-input:focus {
	outline: none;
	border-color: var( --np-tr-primary );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --np-tr-primary ) 25%, transparent );
}

/* --- Tier 1: Tische ausgegraut wenn weggefiltert -------- */
.np-tr-table.is-filtered-out {
	opacity: .25;
	filter: grayscale( .7 );
	pointer-events: none;
}
.np-tr-table.is-filtered-out .np-tr-table-name,
.np-tr-table.is-filtered-out .np-tr-table-meta { opacity: .6; }

/* --- Tier 2: Live-Snapshot-Modal ----------------------- */
.np-tr-now-pill {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	padding: 4px 10px;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	border: none;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
	animation: np-tr-pulse-now 2.4s ease-in-out infinite;
}
.np-tr-now-pill:hover { transform: scale( 1.06 ); }
@keyframes np-tr-pulse-now {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 239, 68, 68, .55 ); }
	50%      { box-shadow: 0 0 0 8px rgba( 239, 68, 68, 0 ); }
}
.np-tr-snapshot-list {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	max-height: 60vh;
	overflow-y: auto;
}
.np-tr-snapshot-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 4px;
	border-bottom: 1px solid color-mix( in srgb, var( --np-tr-fg ) 10%, transparent );
}
.np-tr-snapshot-icon { font-size: 1.2em; }
.np-tr-snapshot-meta { color: var( --np-tr-muted ); font-size: .9rem; }

/* --- Tier 1: Tisch-Detail-Modal ------------------------ */
.np-tr-modal-bookings {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-tr-modal-booking-item {
	padding: 8px 12px;
	border-radius: 6px;
	background: color-mix( in srgb, var( --np-tr-primary ) 8%, var( --np-tr-card ) );
	font-size: .92rem;
}
.np-tr-modal-freefrom,
.np-tr-modal-history {
	margin-top: 12px;
	font-size: .92rem;
	color: var( --np-tr-fg );
}
.np-tr-modal-freefrom strong,
.np-tr-modal-history  strong { color: var( --np-tr-primary ); }

/* --- Tier 2: Help-Modal -------------------------------- */
.np-tr-help-list,
.np-tr-help-kbd-list {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
}
@media ( max-width: 540px ) {
	.np-tr-help-list, .np-tr-help-kbd-list { grid-template-columns: 1fr; }
}
.np-tr-help-row { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.np-tr-help-icon { font-size: 1.2em; min-width: 24px; text-align: center; }
.np-tr-help-kbd  { margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix( in srgb, var( --np-tr-fg ) 10%, transparent ); }
.np-tr-help-kbd h4 { margin: 0 0 8px; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var( --np-tr-muted ); }
.np-tr-help-kbd-list li { font-family: monospace; font-size: .85rem; }

/* --- Tier 2: Hover-Lift (Smart Suggestions) ------------- */
.np-tr-table.is-free { transition: transform .25s ease, filter .25s ease; }
.np-tr-table.is-free:hover {
	transform: scale( 1.02 );
	filter: drop-shadow( 0 8px 14px rgba( 0, 0, 0, .18 ) );
}

/* --- Tier 2: Skeleton-Loader --------------------------- */
.np-tr-skeleton {
	position: relative;
	overflow: hidden;
	background: color-mix( in srgb, var( --np-tr-fg ) 8%, var( --np-tr-card ) );
	border-radius: 8px;
	min-height: 40px;
}
.np-tr-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix( in srgb, var( --np-tr-fg ) 6%, transparent ) 50%,
		transparent 100%
	);
	animation: np-tr-skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes np-tr-skeleton-shimmer {
	from { transform: translateX( -100% ); }
	to   { transform: translateX( 100% ); }
}

/* --- Tier 3: First-Time-Tour --------------------------- */
/* Tour lebt INNERHALB des Plugin-Containers, nicht über die ganze Seite. */
.np-tr-tour-overlay {
	position: absolute;
	inset: 0;
	z-index: 50;
	background: rgba( 0, 0, 0, .7 );
	backdrop-filter: blur( 3px );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border-radius: var( --np-tr-radius );
	animation: np-tr-fade-in .25s ease;
}
@keyframes np-tr-fade-in { from { opacity: 0; } to { opacity: 1; } }
.np-tr-tour-card {
	/* Im Dark-Mode ist --np-tr-card fast schwarz → wir nehmen einen helleren
	   Ton damit die Karte vom dunklen Overlay-Background absticht. */
	background: #ffffff;
	color: #111827;
	padding: 22px 26px;
	border-radius: 14px;
	max-width: 440px;
	width: 100%;
	box-shadow: 0 24px 70px rgba( 0, 0, 0, .55 ), 0 0 0 1px rgba( 255, 255, 255, .15 );
	animation: np-tr-tour-pop .35s cubic-bezier( .25, 1.4, .5, 1 );
}
.np-tr-app.np-tr-dark .np-tr-tour-card {
	background: #1f2937;
	color: #f3f4f6;
	box-shadow: 0 24px 70px rgba( 0, 0, 0, .8 ), 0 0 0 1px rgba( 255, 255, 255, .08 );
}
@keyframes np-tr-tour-pop {
	from { opacity: 0; transform: scale( .9 ) translateY( 10px ); }
	to   { opacity: 1; transform: scale( 1 )    translateY( 0 );  }
}
.np-tr-tour-step  { font-size: .8rem; color: #6b7280; margin-bottom: 8px; }
.np-tr-app.np-tr-dark .np-tr-tour-step { color: #9ca3af; }
.np-tr-tour-title { margin: 0 0 10px; font-size: 1.3rem; color: var( --np-tr-primary ); font-weight: 700; }
.np-tr-tour-text  { line-height: 1.55; margin: 0 0 18px; color: inherit; }
.np-tr-tour-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
 * PHASE 13.1 — Bug-Fixes (Search-Focus, TCG-Filter, Live-Snapshot,
 *               Progress-Bar Position, Help-Visual-Chips, Random-Highlight)
 * ============================================================ */

/* --- Stable Map-Toolbar (Chips + Search außerhalb von .np-tr-map) --- */
.np-tr-map-toolbar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

/* --- Fortschrittsbalken: jetzt UNTER der Tisch-Form, höher, deutlicher --- */
.np-tr-table-progress-track {
	fill: color-mix( in srgb, var( --np-tr-fg ) 18%, transparent );
	stroke: none;
}
.np-tr-app.np-tr-dark .np-tr-table-progress-track {
	fill: rgba( 255, 255, 255, .22 );
}
.np-tr-table-progress-fill {
	fill: var( --np-tr-primary );
	opacity: .95;
	transition: width .6s ease;
}
.np-tr-table-progress-label {
	font-size: 10px;
	font-weight: 700;
	fill: var( --np-tr-primary );
	pointer-events: none;
}

/* --- Random-Pick Highlight (Tisch hervorgehoben vor Modal-Öffnung) --- */
.np-tr-table.is-rolled .np-tr-table-shape {
	stroke: #a855f7;
	stroke-width: 3;
	filter: drop-shadow( 0 0 12px rgba( 168, 85, 247, .65 ) );
	animation: np-tr-rolled-pulse 1.2s ease-in-out 3;
}
@keyframes np-tr-rolled-pulse {
	0%, 100% { transform: scale( 1 ); }
	50%      { transform: scale( 1.04 ); }
}

/* --- Toast (kurze Status-Meldung) --- */
.np-tr-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 99999;
	padding: 10px 18px;
	border-radius: 999px;
	background: #1f2937;
	color: #fff;
	font-size: .92rem;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .25 );
	animation: np-tr-toast-in .25s cubic-bezier( .25, 1.4, .5, 1 ),
	           np-tr-toast-out .25s ease 2.25s forwards;
}
@keyframes np-tr-toast-in  { from { opacity: 0; transform: translate( -50%, 12px ); } to { opacity: 1; transform: translate( -50%, 0 ); } }
@keyframes np-tr-toast-out { to   { opacity: 0; transform: translate( -50%, 12px ); } }

/* --- Live-Snapshot: Sections + Skeleton --- */
.np-tr-snapshot-content { min-height: 60px; }
.np-tr-snapshot-head {
	margin: 14px 0 6px;
	font-size: .85rem;
	letter-spacing: .04em;
	color: var( --np-tr-primary );
	text-transform: uppercase;
}
.np-tr-snapshot-head:first-child { margin-top: 0; }
.np-tr-snapshot-row-now { font-weight: 600; }

/* --- Help-Modal: visuelle Chips erklären Strich-Stile + Glows --- */
.np-tr-help-section {
	margin: 18px 0 8px;
	font-size: .85rem;
	letter-spacing: .04em;
	color: var( --np-tr-muted );
	text-transform: uppercase;
}
.np-tr-help-visual-chip {
	display: inline-block;
	width: 36px; height: 22px;
	border-radius: 4px;
	flex: 0 0 36px;
	background: #d1d5db;
	border: 1px solid transparent;
}
.np-tr-help-visual-chip.chip-green-solid { background: #22c55e; }
.np-tr-help-visual-chip.chip-gold-solid  { background: #fbbf24; }
.np-tr-help-visual-chip.chip-red-solid   { background: #ef4444; }
.np-tr-help-visual-chip.chip-gold-dashed {
	background: var( --np-tr-card );
	border: 2px dashed #fbbf24;
}
.np-tr-help-visual-chip.chip-red-glow {
	background: var( --np-tr-card );
	box-shadow: 0 0 0 2px #ef4444, 0 0 12px rgba( 239, 68, 68, .55 );
	animation: np-tr-help-pulse 1.6s ease-in-out infinite;
}
.np-tr-help-visual-chip.chip-event-ring {
	background: var( --np-tr-card );
	border: 2px solid #a855f7;
	box-shadow: 0 0 8px rgba( 168, 85, 247, .5 );
}
.np-tr-help-visual-chip.chip-gold-glow {
	background: linear-gradient( 135deg, #fde68a, #f59e0b );
	box-shadow: 0 0 10px rgba( 251, 191, 36, .7 );
}
.np-tr-help-visual-chip.chip-progress {
	background: linear-gradient( to right, var( --np-tr-primary ) 0% 60%, color-mix( in srgb, var( --np-tr-fg ) 18%, transparent ) 60% 100% );
}
.np-tr-help-visual-chip.chip-meeple-pawn {
	background: var( --np-tr-card );
	font-size: 14px;
	text-align: center;
	line-height: 22px;
}
.np-tr-help-visual-chip.chip-meeple-pawn::before { content: '🎲 ♟️ ✨'; font-size: 11px; }
@keyframes np-tr-help-pulse {
	0%, 100% { box-shadow: 0 0 0 2px #ef4444, 0 0 4px rgba( 239, 68, 68, .55 ); }
	50%      { box-shadow: 0 0 0 2px #ef4444, 0 0 14px rgba( 239, 68, 68, .8 ); }
}
.np-tr-help-visual .np-tr-help-row {
	gap: 12px;
	align-items: center;
}

/* --- Größere Klick-Fläche für taken Tische (Detail-Modal) --- */
.np-tr-table.is-taken { cursor: pointer; }
.np-tr-table.is-taken:hover .np-tr-table-shape {
	filter: drop-shadow( 0 4px 10px rgba( 0, 0, 0, .15 ) );
}

/* ============================================================
 * PHASE 15 — League OS Vorbereitung (Toggle + Gegner-Feld)
 * ============================================================ */
.np-tr-hidden { display: none !important; }
.np-tr-league-block {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: color-mix( in srgb, #a855f7 8%, var( --np-tr-card ) );
	border: 1px dashed color-mix( in srgb, #a855f7 50%, transparent );
}
.np-tr-league-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.np-tr-league-toggle span { color: #7c3aed; }
.np-tr-league-hint {
	margin: 4px 0 0 26px;
	font-size: .85rem;
	color: var( --np-tr-muted );
	font-style: italic;
}
.np-tr-league-opponent { margin-top: 10px; padding-left: 26px; }
.np-tr-league-opponent input {
	font-family: monospace;
	font-size: .92rem;
}

/* ============================================================
 * Phase 22.1 / Task #48 — Shared Design-Tokens
 * Public CSS-Variables für Login/Auth-Hint-Card.
 * Booking-Plugin definiert sie hier, League-OS + Sectorum + andere
 * No-Pixels-Plugins SOLLEN sie referenzieren statt eigene Farben zu
 * hartkodieren. Konvention `--np-shared-*` (statt `--np-tr-*`)
 * signalisiert: stabiles API, nicht ohne Brief verändern.
 *
 * Dokumentiert in BOOKING-PLUGIN-API-CONTRACT.md §6.
 *
 * Fallback-Pattern für konsumierende Plugins:
 *   color: var( --np-shared-auth-link-fg, #7c3aed );
 * Wenn Booking-CSS nicht geladen ist (z.B. League-OS-Profil-Seite
 * ohne Booking-Shortcode), greift der Fallback-Wert.
 * ============================================================ */
:root {
	--np-shared-auth-accent:        #a855f7;  /* Lila für Auth-Hints */
	--np-shared-auth-accent-strong: #7c3aed;
	--np-shared-auth-accent-dark:   #6d28d9;
	--np-shared-auth-card-bg:       rgba( 168, 85, 247, 0.08 );
	--np-shared-auth-card-border:   #a855f7;
	--np-shared-auth-link-bg:       #fff;
	--np-shared-auth-link-fg:       #7c3aed;
	--np-shared-auth-link-border:   #c4b5fd;
	--np-shared-auth-link-hover-bg: #f5f3ff;
	--np-shared-auth-radius:        6px;
	--np-shared-auth-link-radius:   999px;
}

/* Phase 20.11.3 — Login/Register-Hint bei nicht eingeloggtem User */
.np-tr-league-block-loggedout {
	background: color-mix( in srgb, var( --np-shared-auth-accent ) 5%, var( --np-tr-card ) );
}
.np-tr-league-toggle.is-disabled {
	opacity: .65;
}
.np-tr-league-hint-loggedout {
	margin: 8px 0 0 26px;
	padding: 10px 12px;
	background: var( --np-shared-auth-card-bg );
	border-left: 3px solid var( --np-shared-auth-card-border );
	border-radius: var( --np-shared-auth-radius );
	font-style: normal;
}
.np-tr-league-hint-text {
	margin: 0 0 8px;
	font-size: .9rem;
	color: var( --np-tr-fg );
	font-weight: 500;
}
.np-tr-league-hint-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.np-tr-league-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	background: var( --np-shared-auth-link-bg );
	color: var( --np-shared-auth-link-fg );
	border: 1px solid var( --np-shared-auth-link-border );
	border-radius: var( --np-shared-auth-link-radius );
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.1s ease;
}
.np-tr-league-link:hover {
	background: var( --np-shared-auth-link-hover-bg );
	border-color: var( --np-shared-auth-accent );
}
.np-tr-league-link:active {
	transform: scale( 0.97 );
}
.np-tr-league-link-register {
	background: var( --np-shared-auth-accent-strong );
	color: #fff;
	border-color: var( --np-shared-auth-accent-strong );
}
.np-tr-league-link-register:hover {
	background: var( --np-shared-auth-accent-dark );
	color: #fff;
}
.np-tr-league-link-sep {
	color: var( --np-tr-muted );
	font-weight: 700;
}

/* ============================================================
 * PHASE 14 — Timeline + Kalender Polish (A-Q ohne G/H/R)
 * ============================================================ */

/* --- Timeline: Toolbar (Zoom + Jetzt) ----------------- */
.np-tr-tl-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 8px 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px dashed color-mix( in srgb, var( --np-tr-fg ) 12%, transparent );
}
.np-tr-tl-toolbar-label {
	font-size: .82rem;
	color: var( --np-tr-muted );
	margin-right: 4px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.np-tr-chip-now {
	background: #ef4444;
	color: #fff;
	border-color: transparent;
	animation: np-tr-pulse-now 2.4s ease-in-out infinite;
}

/* --- Timeline: Zoom über CSS-Variable ----------------- */
.np-tr-tl-grid { --np-tr-tl-lane-width: 720px; }
.np-tr-tl-lane { min-width: var( --np-tr-tl-lane-width ) !important; }

/* --- Timeline: Lückenfarbe nach Länge ----------------- */
.np-tr-tl-gap {
	position: absolute;
	top: 4px; bottom: 4px;
	border-radius: 3px;
	opacity: .55;
	cursor: pointer;
	transition: opacity .15s, transform .15s;
	z-index: 0;
}
.np-tr-tl-gap:hover { opacity: .85; transform: scaleY( 1.04 ); }
.np-tr-tl-gap.is-gap-short  { background: repeating-linear-gradient( -45deg, #fde68a 0, #fde68a 4px, transparent 4px, transparent 8px ); }
.np-tr-tl-gap.is-gap-medium { background: color-mix( in srgb, #22c55e 25%, transparent ); }
.np-tr-tl-gap.is-gap-long   {
	background: color-mix( in srgb, #22c55e 50%, transparent );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, #22c55e 70%, transparent );
}
.np-tr-app.np-tr-dark .np-tr-tl-gap.is-gap-short  { background: repeating-linear-gradient( -45deg, rgba( 253, 230, 138, .25 ) 0, rgba( 253, 230, 138, .25 ) 4px, transparent 4px, transparent 8px ); }

/* --- Timeline: Gap-Hover-Hint (Tooltip) --------------- */
.np-tr-tl-gap-hint {
	position: absolute;
	z-index: 9999;
	transform: translate( -50%, -100% );
	background: #1f2937;
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: .82rem;
	line-height: 1.4;
	box-shadow: 0 8px 22px rgba( 0, 0, 0, .3 );
	pointer-events: none;
	white-space: nowrap;
}
.np-tr-tl-gap-hint::after {
	content: '';
	position: absolute;
	left: 50%; top: 100%;
	transform: translateX( -50% );
	border: 5px solid transparent;
	border-top-color: #1f2937;
}

/* --- Kalender: Mode + Filter -------------------------- */
.np-tr-cal-mode    { display: flex; gap: 6px; margin-left: 12px; }
.np-tr-cal-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
	align-items: center;
}

/* --- Kalender: Wochentag-Heat-Streifen ---------------- */
.np-tr-cal-headers { position: relative; }
.np-tr-cal-h { position: relative; padding-bottom: 6px; }
.np-tr-cal-h-heat {
	display: block;
	height: 3px;
	margin-top: 3px;
	border-radius: 2px;
	background: color-mix( in srgb, var( --np-tr-primary ) calc( var( --np-heat ) * 90% ), transparent );
	min-height: 3px;
}

/* --- Kalender: Visited-Stern + Sweet-Spot ------------- */
.np-tr-cal-dot.dot-visited { color: #fbbf24; font-size: .9em; }
.np-tr-cal-dot.dot-sweet   { color: #a855f7; }
.np-tr-cal-cell.is-visited {
	outline: 1.5px dashed #fbbf24;
	outline-offset: -2px;
}
.np-tr-cal-cell.is-sweet {
	background: linear-gradient(
		135deg,
		color-mix( in srgb, #a855f7 12%, var( --np-tr-card ) ),
		color-mix( in srgb, #ec4899 8%, var( --np-tr-card ) )
	);
}
.np-tr-cal-cell.is-sweet::after {
	content: '✨';
	position: absolute;
	top: 4px; right: 4px;
	font-size: 11px;
	opacity: .85;
}

/* --- Kalender: Hover-Popover -------------------------- */
/* Phase 23.1 — Lesbarkeit fix: opaker Hintergrund (statt color-mix das je
   nach Theme transparent werden kann), kräftiger Border, stärkerer Shadow. */
.np-tr-cal-hover {
	position: absolute;
	z-index: 9999;
	transform: translateX( -50% );
	background: #ffffff;
	color: #1a1a1a;
	border: 1px solid #d1d5db;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: .9rem;
	line-height: 1.55;
	box-shadow: 0 16px 40px rgba( 0, 0, 0, .35 );
	pointer-events: none;
	max-width: 300px;
	min-width: 200px;
	animation: np-tr-cal-hover-in .15s ease;
}
@media ( prefers-color-scheme: dark ) {
	.np-tr-cal-hover {
		background: #1f2937;
		color: #f9fafb;
		border-color: #4b5563;
		box-shadow: 0 16px 40px rgba( 0, 0, 0, .6 );
	}
}
.np-tr-dark .np-tr-cal-hover {
	background: #1f2937 !important;
	color: #f9fafb !important;
	border-color: #4b5563 !important;
}
@keyframes np-tr-cal-hover-in { from { opacity: 0; transform: translate( -50%, 4px ); } to { opacity: 1; transform: translate( -50%, 0 ); } }
.np-tr-cal-hover-head {
	font-weight: 700;
	color: var( --np-tr-primary, #1f6feb );
	margin-bottom: 8px;
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: 6px;
}
.np-tr-dark .np-tr-cal-hover-head { border-bottom-color: #4b5563; }
.np-tr-cal-hover-tip {
	color: #7c3aed;
	font-style: italic;
	font-weight: 500;
}
.np-tr-dark .np-tr-cal-hover-tip { color: #c4b5fd; }
.np-tr-cal-hover-empty {
	color: #6b7280;
	font-style: italic;
}
.np-tr-dark .np-tr-cal-hover-empty { color: #9ca3af; }

/* --- Kalender: Listen-Modus --------------------------- */
.np-tr-cal-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-tr-cal-list-row {
	display: grid;
	grid-template-columns: 200px 8px 1fr;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: var( --np-tr-card );
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	color: var( --np-tr-fg );
	font-size: .94rem;
	transition: border-color .15s, transform .12s;
}
.np-tr-cal-list-row:hover { border-color: var( --np-tr-primary ); transform: translateX( 2px ); }
.np-tr-cal-list-row.is-today { box-shadow: inset 0 0 0 2px var( --np-tr-primary ); }
.np-tr-cal-list-row.heat-closed { opacity: .55; }
.np-tr-cal-list-heat   { width: 8px; height: 32px; border-radius: 2px; }
.np-tr-cal-list-row.heat-empty   .np-tr-cal-list-heat { background: #d1d5db; }
.np-tr-cal-list-row.heat-low     .np-tr-cal-list-heat { background: #86efac; }
.np-tr-cal-list-row.heat-medium  .np-tr-cal-list-heat { background: #fde047; }
.np-tr-cal-list-row.heat-high    .np-tr-cal-list-heat { background: #fb923c; }
.np-tr-cal-list-row.heat-full    .np-tr-cal-list-heat { background: #ef4444; }
.np-tr-cal-list-row.heat-closed  .np-tr-cal-list-heat { background: repeating-linear-gradient( 45deg, #d1d5db 0, #d1d5db 3px, transparent 3px, transparent 6px ); }
.np-tr-cal-list-date  { font-weight: 600; }
.np-tr-cal-list-meta  { color: var( --np-tr-muted ); font-size: .88rem; }
.np-tr-cal-list-sweet { color: #a855f7; font-weight: 700; }

/* --- Kalender: Wochen-Modus --------------------------- */
.np-tr-cal-week {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 8px;
}
.np-tr-cal-week-col {
	background: var( --np-tr-card );
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	border: 1px solid transparent;
	transition: transform .15s, border-color .15s;
}
.np-tr-cal-week-col:hover    { transform: translateY( -2px ); border-color: var( --np-tr-primary ); }
.np-tr-cal-week-col.is-today { box-shadow: 0 0 0 2px var( --np-tr-primary ); }
.np-tr-cal-week-head {
	padding: 8px;
	font-weight: 700;
	text-align: center;
	background: color-mix( in srgb, var( --np-tr-fg ) 6%, transparent );
}
.np-tr-cal-week-body {
	flex: 1;
	padding: 10px 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .85rem;
}
.np-tr-cal-week-count { font-size: 1.1rem; font-weight: 700; }
.np-tr-cal-week-tag   {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --np-tr-primary ) 10%, transparent );
	font-size: .78rem;
}
.np-tr-cal-week-sweet { color: #a855f7; font-weight: 600; }
.np-tr-cal-week-col.heat-low    { background: linear-gradient( 180deg, color-mix( in srgb, #86efac 15%, var( --np-tr-card ) ), var( --np-tr-card ) ); }
.np-tr-cal-week-col.heat-medium { background: linear-gradient( 180deg, color-mix( in srgb, #fde047 18%, var( --np-tr-card ) ), var( --np-tr-card ) ); }
.np-tr-cal-week-col.heat-high   { background: linear-gradient( 180deg, color-mix( in srgb, #fb923c 22%, var( --np-tr-card ) ), var( --np-tr-card ) ); }
.np-tr-cal-week-col.heat-full   { background: linear-gradient( 180deg, color-mix( in srgb, #ef4444 25%, var( --np-tr-card ) ), var( --np-tr-card ) ); }

/* --- Kalender: ICS-Modal ------------------------------ */
.np-tr-modal-ics .np-tr-ics-row {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}
.np-tr-modal-ics .np-tr-ics-row input {
	flex: 1;
	font-family: monospace;
	font-size: .82rem;
	padding: 8px;
	border-radius: 6px;
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 15%, transparent );
	background: var( --np-tr-bg );
	color: var( --np-tr-fg );
}
.np-tr-ics-hint {
	margin-top: 14px;
	font-size: .82rem;
	color: var( --np-tr-muted );
	font-style: italic;
}

/* --- Mobile: Wochen-Modus → 2 Spalten ----------------- */
@media ( max-width: 720px ) {
	.np-tr-cal-week { grid-template-columns: repeat( 2, 1fr ); }
	.np-tr-cal-list-row { grid-template-columns: 1fr; gap: 4px; }
	.np-tr-cal-list-heat { display: none; }
	.np-tr-cal-mode    { margin-left: 0; margin-top: 8px; width: 100%; }
	.np-tr-cal-filters { font-size: .82rem; }
}

/* ============================================================
 * PHASE 14 REST — C Drag-to-Book, G Energy, H Repeat, R Wetter
 * ============================================================ */

/* --- C: Drag-Ghost beim Aufziehen ------------------------ */
.np-tr-tl-lane { user-select: none; cursor: crosshair; }
.np-tr-tl-drag-ghost {
	position: absolute;
	top: 2px;
	bottom: 2px;
	background: color-mix( in srgb, var( --np-tr-primary ) 35%, transparent );
	border: 2px dashed var( --np-tr-primary );
	border-radius: 6px;
	z-index: 5;
	font-size: .8rem;
	font-weight: 700;
	color: var( --np-tr-primary );
	display: flex;
	align-items: center;
	justify-content: center;
	text-shadow: 0 1px 0 var( --np-tr-card );
	pointer-events: none;
	animation: np-tr-drag-pulse 1s ease-in-out infinite;
}
@keyframes np-tr-drag-pulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix( in srgb, var( --np-tr-primary ) 60%, transparent ); }
	50%      { box-shadow: 0 0 0 4px color-mix( in srgb, var( --np-tr-primary ) 30%, transparent ); }
}
.np-tr-tl-drag-hint {
	margin: 8px 0 0;
	padding: 6px 10px;
	font-size: .82rem;
	color: var( --np-tr-muted );
	background: color-mix( in srgb, var( --np-tr-primary ) 6%, transparent );
	border-left: 3px solid var( --np-tr-primary );
	border-radius: 4px;
	font-style: italic;
}

/* --- G: Energy-Heatmap unter Timeline -------------------- */
.np-tr-tl-energy {
	margin-top: 12px;
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px 12px;
	background: color-mix( in srgb, var( --np-tr-fg ) 4%, transparent );
	border-radius: 8px;
}
.np-tr-tl-energy-label {
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --np-tr-muted );
	flex: 0 0 auto;
	font-weight: 700;
}
.np-tr-tl-energy-bars {
	flex: 1;
	display: flex;
	gap: 1px;
	height: 18px;
	align-items: flex-end;
}
.np-tr-tl-energy-bar {
	flex: 1;
	min-width: 2px;
	height: calc( max( 3px, var( --np-load, 0 ) * 100% ) );
	border-radius: 1px;
	background: color-mix(
		in srgb,
		#22c55e calc( ( 1 - var( --np-load, 0 ) ) * 100% ),
		#ef4444 calc( var( --np-load, 0 ) * 100% )
	);
	transition: height .3s ease;
}
.np-tr-tl-energy-bar:hover { outline: 1px solid var( --np-tr-fg ); }

/* --- H: Repeat-Button + Tisch-Mark ----------------------- */
.np-tr-btn.np-tr-btn-repeat {
	background: linear-gradient( 135deg, #f59e0b, #ef4444 );
	color: #fff;
	border-color: transparent;
}
.np-tr-btn.np-tr-btn-repeat:hover { filter: brightness( 1.08 ); }
.np-tr-table-repeat-mark {
	font-size: 13px;
	pointer-events: none;
	filter: drop-shadow( 0 0 3px rgba( 251, 191, 36, .6 ) );
}

/* --- R: Wetter-Anzeige in den Kalender-Views ------------- */
.np-tr-cal-weather {
	position: absolute;
	top: 4px; right: 4px;
	font-size: 14px;
	opacity: .85;
	pointer-events: none;
}
.np-tr-cal-cell { position: relative; }
.np-tr-cal-list-weather {
	font-size: .9rem;
	white-space: nowrap;
	color: var( --np-tr-muted );
	margin-right: 8px;
}
.np-tr-cal-week-weather {
	font-size: .82rem;
	margin-left: 6px;
	opacity: .85;
}
.np-tr-cal-hover-weather {
	font-size: .92rem;
	margin-bottom: 4px;
	color: var( --np-tr-primary );
}

/* ============================================================
 * PHASE 17 — Buchungs-Formular Smart-Single-Page-Redesign
 * ============================================================ */

/* --- Switch-Row: Mitspieler-Toggle als großer Schalter --- */
.np-tr-switch-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	margin: 0 0 18px;
	border-radius: 12px;
	background: linear-gradient(
		135deg,
		color-mix( in srgb, var( --np-tr-primary ) 6%, var( --np-tr-card ) ),
		var( --np-tr-card )
	);
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 12%, transparent );
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.np-tr-switch-row:hover { border-color: var( --np-tr-primary ); }
.np-tr-switch-row input[type="checkbox"] {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}
.np-tr-switch-visual {
	flex: 0 0 auto;
	width: 48px;
	height: 28px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --np-tr-fg ) 25%, transparent );
	position: relative;
	transition: background .2s ease;
}
.np-tr-switch-visual::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .25 );
	transition: transform .2s ease;
}
.np-tr-switch-row input:checked + .np-tr-switch-visual {
	background: var( --np-tr-primary );
}
.np-tr-switch-row input:checked + .np-tr-switch-visual::after {
	transform: translateX( 20px );
}
.np-tr-switch-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.np-tr-switch-title { font-size: 1rem; font-weight: 600; }
.np-tr-switch-sub   { font-size: .82rem; color: var( --np-tr-muted ); }
.np-tr-switch-row.is-locked {
	cursor: not-allowed;
	opacity: .9;
	background: color-mix( in srgb, var( --np-tr-primary ) 12%, var( --np-tr-card ) );
	border-color: var( --np-tr-primary );
}
.np-tr-switch-row.is-locked .np-tr-switch-sub::after {
	content: ' · ' attr( data-locked );
	font-style: italic;
}

/* --- Welcome-Banner für Erstbesucher (dezent, kompakt) --- */
.np-tr-welcome-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 12px;
	padding: 8px 12px;
	border-radius: 8px;
	background: color-mix( in srgb, #fbbf24 12%, var( --np-tr-card ) );
	border: 1px dashed color-mix( in srgb, #fbbf24 50%, transparent );
	color: inherit;
	font-size: .9rem;
}
.np-tr-welcome-text  { flex: 1; min-width: 180px; }
.np-tr-welcome-text strong { color: #f59e0b; }
.np-tr-welcome-intro {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	margin: 0;
	white-space: nowrap;
	font-size: .85rem;
}

/* --- Stammgast-Block: collapsible "Buchen als …" --- */
.np-tr-contact-collapsed {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: color-mix( in srgb, var( --np-tr-primary ) 4%, var( --np-tr-card ) );
	border-radius: 8px;
	border: 1px dashed color-mix( in srgb, var( --np-tr-primary ) 25%, transparent );
}
.np-tr-contact-collapsed summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.np-tr-contact-collapsed summary::-webkit-details-marker { display: none; }
.np-tr-contact-eyebrow {
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --np-tr-muted );
	margin-right: 4px;
}
.np-tr-contact-mail   { color: var( --np-tr-muted ); }
.np-tr-contact-edit {
	margin-left: auto;
	font-size: .85rem;
	text-decoration: underline;
	color: var( --np-tr-primary );
}
.np-tr-contact-collapsed[open] summary {
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px dashed color-mix( in srgb, var( --np-tr-primary ) 25%, transparent );
}
.np-tr-contact-fields { display: flex; flex-direction: column; gap: 8px; }

/* --- Quick-Picks für Spielsystem --- */
.np-tr-quick-picks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 4px;
	width: 100%;
}
.np-tr-quick-pick {
	display: inline-flex;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var( --np-tr-card );
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 14%, transparent );
	font-size: .88rem;
	cursor: pointer;
	transition: all .15s ease;
	line-height: 1.4;
}
.np-tr-quick-pick:hover {
	border-color: var( --np-tr-primary );
	transform: translateY( -1px );
}
.np-tr-quick-pick.is-active {
	background: var( --np-tr-primary );
	color: #fff;
	border-color: var( --np-tr-primary );
}
.np-tr-quick-pick.is-themed {
	background: linear-gradient( 135deg, #fde68a, #f59e0b );
	color: #78350f;
	border-color: #f59e0b;
}
.np-tr-quick-pick.is-themed.is-active {
	background: linear-gradient( 135deg, #f59e0b, #d97706 );
	color: #fff;
}
.np-tr-quick-pick-icon { font-size: 1.05em; }
.np-tr-quick-pick-star { font-size: .85em; }

/* --- Hausregeln-Pre-checked: dezenter wenn schon akzeptiert --- */
.np-tr-check.is-prechecked {
	opacity: .85;
}
.np-tr-check-mini {
	font-size: .75rem;
	color: var( --np-tr-muted );
	font-style: italic;
	margin-left: 6px;
}

/* ============================================================
 * PHASE 17.1 — Wizard (nur für Erstbesucher)
 * ============================================================ */

/* Step-Indicator oben im Wizard */
.np-tr-wizard-steps {
	display: flex;
	gap: 4px;
	align-items: center;
	justify-content: center;
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid color-mix( in srgb, var( --np-tr-fg ) 10%, transparent );
}
.np-tr-wizard-step {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: transparent;
	color: var( --np-tr-muted );
	font-size: .85rem;
	font-weight: 500;
	transition: all .2s ease;
	position: relative;
}
.np-tr-wizard-step + .np-tr-wizard-step::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	margin: 0 4px;
	background: color-mix( in srgb, var( --np-tr-fg ) 20%, transparent );
}
.np-tr-wizard-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: color-mix( in srgb, var( --np-tr-fg ) 10%, transparent );
	font-size: .8rem;
	font-weight: 700;
}
.np-tr-wizard-step.is-active {
	background: color-mix( in srgb, var( --np-tr-primary ) 14%, transparent );
	color: var( --np-tr-fg );
}
.np-tr-wizard-step.is-active .np-tr-wizard-step-num {
	background: var( --np-tr-primary );
	color: #fff;
}
.np-tr-wizard-step.is-complete .np-tr-wizard-step-num {
	background: #22c55e;
	color: #fff;
}
.np-tr-wizard-step.is-complete .np-tr-wizard-step-num::after { content: '✓'; }
.np-tr-wizard-step.is-complete .np-tr-wizard-step-num span { display: none; }

/* Panes: nur aktiver Pane sichtbar */
.np-tr-wizard-pane { display: none; }
.np-tr-wizard-pane.is-active { display: block; }
.np-tr-wizard-pane > * + * { margin-top: 12px; }
.np-tr-wizard-pane > .np-tr-row { display: flex; flex-direction: column; gap: 4px; }
.np-tr-wizard-pane.is-active { animation: np-tr-wizard-fade .2s ease; }
@keyframes np-tr-wizard-fade {
	from { opacity: 0; transform: translateY( 4px ); }
	to   { opacity: 1; transform: translateY( 0 );   }
}

/* Im Wizard: Panes immer volle Breite, nicht ins 2-Spalten-Grid kippen */
@media ( min-width: 640px ) {
	dialog.np-tr-modal .np-tr-form.np-tr-wizard {
		grid-template-columns: 1fr;
	}
	dialog.np-tr-modal .np-tr-form > .np-tr-wizard-pane,
	dialog.np-tr-modal .np-tr-form > .np-tr-wizard-steps {
		grid-column: 1 / -1;
	}
}

/* Welcome-Icon Größe */
.np-tr-welcome-icon { font-size: 1.4em; flex: 0 0 auto; }

/* ============================================================
 * PHASE 18.1 — Shortcode-Apps mit konsistentem Logo-Header
 * ============================================================ */

/* App-Header (MyPlan / Manage / Order / Order-Success) */
.np-tr-app-header {
	text-align: center;
	padding: 24px 24px 18px;
	margin: 0 0 18px;
	border-bottom: 1px solid color-mix( in srgb, var( --np-tr-fg ) 10%, transparent );
	background: linear-gradient(
		180deg,
		color-mix( in srgb, var( --np-tr-primary ) 8%, transparent ),
		transparent
	);
	border-radius: var( --np-tr-radius ) var( --np-tr-radius ) 0 0;
}
.np-tr-app-header-logo {
	display: block;
	max-height: 56px;
	width: auto;
	margin: 0 auto 12px;
	filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, .12 ) );
}
.np-tr-app-header-eyebrow {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --np-tr-primary );
	margin-bottom: 6px;
}
.np-tr-app-header-title {
	margin: 0 0 4px;
	font-size: 1.45rem;
	font-weight: 700;
	color: var( --np-tr-fg );
	line-height: 1.2;
}
.np-tr-app-header-sub {
	margin: 0;
	font-size: .95rem;
	color: var( --np-tr-muted );
	line-height: 1.4;
}

/* ---------- MyPlan-Card ---------- */
.np-tr-myplan-card {
	background: var( --np-tr-card );
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 12%, transparent );
	border-radius: var( --np-tr-radius );
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
	box-shadow: var( --np-tr-shadow );
}
.np-tr-myplan-section {
	margin: 20px 24px 12px;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --np-tr-muted );
}
.np-tr-myplan-list {
	list-style: none;
	padding: 0 24px 20px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.np-tr-myplan-list.is-past .np-tr-myplan-item { opacity: .65; }

/* Booking-Item: Date-Block + Info + Action.
 * V1.27.5 LAYOUT-FIX: `minmax(0, 1fr)` statt `1fr` — der `min-content`-Default
 * eines `1fr`-Tracks ist `auto`, was bedeutet die Spalte BLEIBT mindestens so breit
 * wie ihr breitestes unbrechbares Kind. Mit vielen Badges + langen Buttons in der
 * Actions-Spalte (auto) wurde die Info-Spalte (1fr) deshalb auf ~30px gequetscht
 * → Text wickelte buchstabe-für-buchstabe vertikal. Mit `minmax(0, 1fr)` darf
 * die 1fr-Spalte bis auf 0 schrumpfen, und `overflow-wrap: anywhere` auf den
 * Info-Kindern erlaubt sauberen Wort-Umbruch. */
.np-tr-myplan-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 14px 16px;
	background: color-mix( in srgb, var( --np-tr-fg ) 3%, var( --np-tr-card ) );
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 10%, transparent );
	border-radius: 10px;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.np-tr-myplan-item:hover {
	border-color: color-mix( in srgb, var( --np-tr-primary ) 40%, transparent );
	transform: translateY( -1px );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, .06 );
}
.np-tr-myplan-item.is-cancelled {
	opacity: .55;
	background: color-mix( in srgb, var( --np-tr-fg ) 6%, transparent );
}
.np-tr-myplan-item.is-cancelled .np-tr-myplan-date,
.np-tr-myplan-item.is-cancelled .np-tr-myplan-info {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.np-tr-myplan-item.is-cancelled .np-tr-myplan-badge.is-cancelled {
	text-decoration: none;
}

/* Date-Block (links): Wochentag + Tag.Monat + Zeit */
.np-tr-myplan-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 80px;
	padding: 8px 10px;
	background: color-mix( in srgb, var( --np-tr-primary ) 10%, var( --np-tr-card ) );
	border-radius: 8px;
	border: 1px solid color-mix( in srgb, var( --np-tr-primary ) 20%, transparent );
}
.np-tr-myplan-date-weekday {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var( --np-tr-primary );
}
.np-tr-myplan-date-day {
	font-size: 1rem;
	font-weight: 700;
	color: var( --np-tr-fg );
}
.np-tr-myplan-date-time {
	font-size: .78rem;
	color: var( --np-tr-muted );
	white-space: nowrap;
}

/* Info-Block (mittig) */
.np-tr-myplan-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	/* V1.27.5 — Langer Tisch-/System-Name darf jetzt sauber umbrechen statt
	 * die Spalte aufzublähen. `anywhere` ist aggressiver als `break-word`
	 * (bricht innerhalb von Wörtern), brauchen wir für lange Spielsystem-Strings. */
	overflow-wrap: anywhere;
}
.np-tr-myplan-info > * { min-width: 0; }
.np-tr-myplan-tisch {
	font-size: 1.02rem;
	color: var( --np-tr-fg );
	font-weight: 600;
}
.np-tr-myplan-system {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --np-tr-muted );
	font-size: .9rem;
}
.np-tr-myplan-system-icon { font-size: 1.05em; }
.np-tr-myplan-system em { font-style: normal; }

.np-tr-myplan-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: color-mix( in srgb, #22c55e 18%, var( --np-tr-card ) );
	color: #16a34a;
	font-size: .76rem;
	font-weight: 700;
	margin-right: 4px;
	margin-top: 2px;
	width: fit-content;
}
.np-tr-myplan-badge.is-cancelled {
	background: color-mix( in srgb, #ef4444 18%, var( --np-tr-card ) );
	color: #dc2626;
}
.np-tr-myplan-badge.is-league {
	background: color-mix( in srgb, #a855f7 16%, var( --np-tr-card ) );
	color: #7c3aed;
	border: 1px solid color-mix( in srgb, #a855f7 35%, transparent );
}
.np-tr-myplan-badge.is-league.is-clickable {
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.np-tr-myplan-badge.is-league.is-clickable:hover {
	background: color-mix( in srgb, #a855f7 28%, var( --np-tr-card ) );
	transform: translateY( -1px );
	box-shadow: 0 2px 8px rgba( 168, 85, 247, .25 );
}
.np-tr-myplan-badge.is-league.is-clickable:focus-visible {
	outline: 2px solid #a855f7;
	outline-offset: 2px;
}

/* Cancel-Button */
.np-tr-myplan-cancel {
	flex: 0 0 auto;
	font-size: .85rem;
	padding: 6px 12px;
}

/* Empty-State */
.np-tr-myplan-empty {
	margin: 12px 24px 24px;
	padding: 30px 20px;
	text-align: center;
	background: color-mix( in srgb, var( --np-tr-fg ) 3%, transparent );
	border: 1px dashed color-mix( in srgb, var( --np-tr-fg ) 20%, transparent );
	border-radius: 12px;
}
.np-tr-myplan-empty-icon {
	display: block;
	font-size: 2.5rem;
	margin-bottom: 8px;
}
.np-tr-myplan-empty p {
	margin: 0;
	color: var( --np-tr-muted );
}

/* MyPlan-Request-Form (E-Mail-Eingabe) */
.np-tr-myplan-request {
	display: flex;
	gap: 8px;
	padding: 0 24px 24px;
	flex-wrap: wrap;
}
.np-tr-myplan-request input {
	flex: 1;
	min-width: 220px;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 18%, transparent );
	background: var( --np-tr-card );
	color: var( --np-tr-fg );
	font-size: .95rem;
}
.np-tr-myplan-request input:focus {
	outline: none;
	border-color: var( --np-tr-primary );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --np-tr-primary ) 22%, transparent );
}

/* ---------- Manage-Card (Storno-Page aus Mails) ---------- */
.np-tr-manage-card {
	background: var( --np-tr-card );
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 12%, transparent );
	border-radius: var( --np-tr-radius );
	max-width: 680px;
	margin: 0 auto;
	overflow: hidden;
	box-shadow: var( --np-tr-shadow );
}
.np-tr-manage-info-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 24px 20px;
}
.np-tr-manage-info-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: color-mix( in srgb, var( --np-tr-fg ) 3%, var( --np-tr-card ) );
	border-radius: 8px;
}
.np-tr-manage-info-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: color-mix( in srgb, var( --np-tr-primary ) 15%, var( --np-tr-card ) );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
}
.np-tr-manage-info-text {
	flex: 1;
	min-width: 0;
}
.np-tr-manage-info-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --np-tr-muted );
}
.np-tr-manage-info-value {
	font-size: 1rem;
	font-weight: 600;
	color: var( --np-tr-fg );
}

/* Storno-Block prominent abgesetzt */
.np-tr-manage-storno {
	margin: 8px 24px 24px;
	padding: 18px 20px;
	background: color-mix( in srgb, #ef4444 6%, var( --np-tr-card ) );
	border: 1px dashed color-mix( in srgb, #ef4444 35%, transparent );
	border-radius: 10px;
}
.np-tr-manage-storno-title {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 700;
	color: #b91c1c;
}
.np-tr-manage-storno .np-tr-modal-actions {
	margin-top: 14px;
	justify-content: flex-end;
}

/* Cancelled-View nach Storno */
.np-tr-manage-card.np-tr-cancelled {
	text-align: center;
	padding-bottom: 28px;
}
.np-tr-cancelled-icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: linear-gradient( 135deg, #22c55e, #16a34a );
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	line-height: 64px;
	margin: 8px auto 14px;
	box-shadow: 0 6px 16px rgba( 34, 197, 94, .35 );
}
.np-tr-cancelled-title {
	margin: 0 0 8px;
	font-size: 1.3rem;
	font-weight: 700;
	color: var( --np-tr-fg );
}
.np-tr-cancelled-text {
	margin: 0 24px;
	color: var( --np-tr-muted );
}

/* ---------- Order-Card (Theken-Tab) ---------- */
.np-tr-order-card {
	background: var( --np-tr-card );
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 12%, transparent );
	border-radius: var( --np-tr-radius );
	max-width: 680px;
	margin: 0 auto;
	overflow: hidden;
	box-shadow: var( --np-tr-shadow );
}
.np-tr-order-card.np-tr-order-success {
	text-align: center;
	padding-bottom: 28px;
}

/* ---------- Radar (Schaufenster-Widget) ---------- */
.np-tr-radar-logo {
	display: inline-block;
	max-height: 22px;
	width: auto;
	margin-right: 8px;
	vertical-align: middle;
}

/* Mobile-Tweaks für MyPlan-Item */
@media ( max-width: 540px ) {
	.np-tr-myplan-item {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.np-tr-myplan-date {
		flex-direction: row;
		gap: 8px;
		min-width: 0;
		justify-content: flex-start;
		padding: 8px 12px;
	}
	.np-tr-myplan-cancel {
		justify-self: flex-end;
	}
}

/* ============================================================
 * Pagination-Bar (MyPlan + zukünftige Listen)
 * ============================================================ */
.np-tr-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 6px 24px 20px;
	padding: 10px 12px;
	background: color-mix( in srgb, var( --np-tr-fg ) 3%, transparent );
	border-radius: 10px;
}
.np-tr-page-btn {
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid color-mix( in srgb, var( --np-tr-fg ) 14%, transparent );
	background: var( --np-tr-card );
	color: var( --np-tr-fg );
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.np-tr-page-btn:hover:not(:disabled):not(.is-active) {
	border-color: var( --np-tr-primary );
	transform: translateY( -1px );
}
.np-tr-page-btn.is-active {
	background: var( --np-tr-primary );
	color: #fff;
	border-color: var( --np-tr-primary );
	cursor: default;
}
.np-tr-page-btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}
.np-tr-page-ellipsis {
	min-width: 24px;
	text-align: center;
	color: var( --np-tr-muted );
	user-select: none;
}
.np-tr-page-info {
	margin-left: auto;
	font-size: .82rem;
	color: var( --np-tr-muted );
	padding-left: 12px;
}

/* Auf Mobile: Info-Text unter die Buttons */
@media ( max-width: 540px ) {
	.np-tr-pagination { flex-direction: column; gap: 8px; }
	.np-tr-page-info { margin: 0; padding: 0; }
	.np-tr-pagination > *:not(.np-tr-page-info):not(.np-tr-page-prev):not(.np-tr-page-next):not(:first-child):not(:last-child) {
		display: none;
	}
}

/* ============================================================
 * PHASE 20.3 — Mobile-Polish (Living-Map + Modale)
 * ============================================================ */

/* Größere Touch-Targets auf Mobile */
@media ( max-width: 768px ) {
	/* Map: SVG nimmt mehr Platz ein, scrollbar wenn nötig */
	.np-tr-svg-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.np-tr-svg-wrap svg {
		min-width: 700px;  /* Mindestbreite, damit Tische klickbar bleiben */
	}

	/* Tisch-Tap-Targets: padding um die SVG-Tische */
	.np-tr-table {
		cursor: pointer;
	}

	/* Filter-Chips horizontal scrollable */
	.np-tr-filter-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;  /* Platz für Scrollbar */
		gap: 6px;
		scrollbar-width: thin;
	}
	.np-tr-filter-chips::-webkit-scrollbar {
		height: 4px;
	}
	.np-tr-filter-chips::-webkit-scrollbar-thumb {
		background: color-mix( in srgb, var( --np-tr-fg ) 25%, transparent );
		border-radius: 4px;
	}
	.np-tr-chip {
		flex: 0 0 auto;
		white-space: nowrap;
		min-height: 36px;
		padding: 8px 14px;
	}

	/* Suche: voller Breite + größeres Target */
	.np-tr-search-input {
		min-height: 44px;
		font-size: 16px;  /* iOS-Trick: verhindert automatisches Zoomen */
	}

	/* Buttons generell min 44×44 px */
	.np-tr-btn,
	.np-tr-view-pill,
	.np-tr-iso-toggle {
		min-height: 44px;
		padding: 8px 16px;
	}

	/* Modale: fullscreen auf Mobile */
	dialog.np-tr-modal {
		width: 100% !important;
		max-width: 100% !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		margin: 0;
		border-radius: 0;
		display: flex;
		flex-direction: column;
	}
	/* Close-Button auf Mobile: groß, fest oben rechts, immer sichtbar */
	dialog.np-tr-modal .np-tr-modal-close {
		position: fixed;
		top: env( safe-area-inset-top, 12px );
		top: calc( env( safe-area-inset-top, 0px ) + 12px );
		right: 12px;
		left: auto;
		float: none;
		margin: 0;
		width: 48px;
		height: 48px;
		font-size: 26px;
		background: var( --np-tr-card );
		box-shadow: 0 4px 14px rgba( 0, 0, 0, .25 );
		z-index: 100;
	}
	dialog.np-tr-modal .np-tr-modal-summary,
	dialog.np-tr-modal .np-tr-form,
	dialog.np-tr-modal .np-tr-modal-bookings,
	dialog.np-tr-modal .np-tr-snapshot-content,
	dialog.np-tr-modal .np-tr-help-list {
		max-height: none;
	}
	dialog.np-tr-modal .np-tr-modal-actions {
		position: sticky;
		bottom: 0;
		background: var( --np-tr-card );
		padding: 12px 24px;
		border-top: 1px solid color-mix( in srgb, var( --np-tr-fg ) 12%, transparent );
		margin: 0 -24px;
	}

	/* Header: kompakter */
	.np-tr-header {
		flex-wrap: wrap;
		gap: 10px;
	}
	.np-tr-logo { max-height: 36px; }
	.np-tr-title-block h2 { font-size: 1.2rem; }
	.np-tr-live-clock { font-size: .85rem; }

	/* Date/Start/Duration/Group: alle vollbreit */
	.np-tr-controls {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.np-tr-controls .np-tr-field input,
	.np-tr-controls .np-tr-field select {
		min-height: 44px;
		font-size: 16px;
	}

	/* View-Toggle: scrollable */
	.np-tr-view-toggle {
		overflow-x: auto;
		flex-wrap: nowrap;
		gap: 6px;
		padding-bottom: 4px;
	}
	.np-tr-view-pill { flex: 0 0 auto; white-space: nowrap; }

	/* Timeline: Lane-Label kompakter */
	.np-tr-tl-label { min-width: 90px; padding: 6px 8px; }
	.np-tr-tl-label strong { font-size: .85rem; }

	/* Switch + Wizard auf Mobile */
	.np-tr-switch-row {
		padding: 12px;
	}
	.np-tr-switch-title { font-size: .95rem; }
	.np-tr-switch-sub { font-size: .78rem; }

	/* MyPlan-Items vertikal */
	.np-tr-myplan-item {
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}
	.np-tr-myplan-cancel {
		align-self: flex-end;
		min-height: 36px;
	}
}

/* Sehr kleine Screens (iPhone SE etc.) */
@media ( max-width: 380px ) {
	.np-tr-controls {
		grid-template-columns: 1fr;
	}
	.np-tr-app-header-title { font-size: 1.2rem; }
}

/* Touch-Devices: deaktivere Hover-Lift (sieht auf Touch komisch aus) */
@media ( hover: none ) {
	.np-tr-table.is-free:hover {
		transform: none;
		filter: none;
	}
	.np-tr-myplan-item:hover {
		transform: none;
		box-shadow: none;
	}
}

/* ============================================================
 * Phase 20.11 — PWA-Install-Banner + Button + iOS-Hint
 * Smartphone-first: Sticky-Bottom (Daumen-Zone, safe-area für Notch).
 * Desktop: schmaler oben.
 * ============================================================ */

/* — Floating Action Button (FAB) — links unten, IMMER sichtbar wenn nicht installiert.
   V1.34.7: User-Wunsch — FAB nach links unten verlegt damit er nicht mit Scroll-To-Top-
   Pfeil + iOS-Home-Indicator + WhatsApp/Discord-Bubbles in der rechten Ecke kollidiert. */
.np-tr-pwa-fab {
	position: fixed;
	left: max( 16px, env( safe-area-inset-left, 0 ) );
	bottom: calc( 16px + env( safe-area-inset-bottom, 0 ) );
	z-index: 99996;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	min-height: 52px;
	background: linear-gradient( 135deg, #1f6feb 0%, #6a5acd 100% );
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba( 31, 111, 235, 0.4 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
.np-tr-pwa-fab:hover {
	transform: translateY( -2px );
	box-shadow: 0 10px 28px rgba( 31, 111, 235, 0.5 );
}
.np-tr-pwa-fab:active {
	transform: scale( 0.96 );
}
.np-tr-pwa-fab-icon {
	font-size: 22px;
	line-height: 1;
}
.np-tr-pwa-fab-label {
	white-space: nowrap;
}
/* V1.34.7 — Mobile: FAB ÜBER die Liga-OS/Sectorum-Bottom-Nav heben.
   Auf Smartphone-Browsern (max-width 768px) sitzt der FAB sonst direkt
   AUF dem fixen Bottom-Nav (Home/Liga/Match/Profil), Tap wird vom FAB
   abgefangen, User sieht den Home-Button nicht. Daher 80px Abstand zum
   unteren Rand (Bottom-Nav ist typisch ~60-70px hoch + 10px Luft). */
@media ( max-width: 768px ) {
	.np-tr-pwa-fab {
		bottom: calc( 80px + env( safe-area-inset-bottom, 0 ) );
	}
}
/* Auf sehr kleinen Screens (iPhone SE etc.): nur Icon, kompakter */
@media ( max-width: 380px ) {
	.np-tr-pwa-fab {
		padding: 14px;
		min-width: 56px;
		min-height: 56px;
		justify-content: center;
	}
	.np-tr-pwa-fab-label {
		display: none;
	}
}
/* Pulse-Animation (2× nach 800ms aktiviert) — zieht Aufmerksamkeit ohne nervig zu sein */
.np-tr-pwa-fab.has-pulse {
	animation: np-tr-pwa-fab-pulse 1.6s ease-out 2;
}
@keyframes np-tr-pwa-fab-pulse {
	0%   { box-shadow: 0 6px 20px rgba( 31, 111, 235, 0.4 ), 0 0 0 0 rgba( 31, 111, 235, 0.6 ); }
	70%  { box-shadow: 0 6px 20px rgba( 31, 111, 235, 0.4 ), 0 0 0 20px rgba( 31, 111, 235, 0 ); }
	100% { box-shadow: 0 6px 20px rgba( 31, 111, 235, 0.4 ), 0 0 0 0 rgba( 31, 111, 235, 0 ); }
}

/* — Legacy: Dezenter Install-Button (war in Shortcode-Containern, jetzt durch FAB ersetzt) — */
.np-tr-pwa-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	min-height: 40px;
	background: rgba( 31, 111, 235, 0.08 );
	color: var( --np-tr-primary, #1f6feb );
	border: 1px solid rgba( 31, 111, 235, 0.25 );
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
	margin: 8px;
}
.np-tr-pwa-btn:hover {
	background: rgba( 31, 111, 235, 0.18 );
}
.np-tr-pwa-btn:active {
	transform: scale( 0.96 );
}

/* — Sticky-Banner (nach erfolgreicher Buchung) — */
.np-tr-pwa-banner {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 99998;
	box-sizing: border-box;
	padding: 16px;
	background: linear-gradient( 135deg, #1f6feb 0%, #6a5acd 100% );
	color: #fff;
	box-shadow: 0 -8px 24px rgba( 0, 0, 0, 0.25 );
	transform: translateY( 100% );
	transition: transform 0.3s cubic-bezier( 0.2, 0.8, 0.2, 1 ), opacity 0.2s ease;
	opacity: 0;
}
.np-tr-pwa-banner.is-open {
	transform: translateY( 0 );
	opacity: 1;
}

/* Mobile = sticky unten in Daumen-Zone, mit safe-area für Notch */
.np-tr-pwa-banner.is-mobile {
	bottom: 0;
	padding-bottom: calc( 16px + env( safe-area-inset-bottom, 0 ) );
	padding-left: calc( 16px + env( safe-area-inset-left, 0 ) );
	padding-right: calc( 16px + env( safe-area-inset-right, 0 ) );
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

/* Desktop = oben rechts, kompakter */
.np-tr-pwa-banner.is-desktop {
	top: 20px;
	right: 20px;
	left: auto;
	max-width: 420px;
	border-radius: 12px;
	transform: translateY( -20px );
}
.np-tr-pwa-banner.is-desktop.is-open {
	transform: translateY( 0 );
}

.np-tr-pwa-banner-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 600px;
	margin: 0 auto;
}
.np-tr-pwa-banner.is-mobile .np-tr-pwa-banner-inner {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.np-tr-pwa-banner-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.np-tr-pwa-banner-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}
.np-tr-pwa-banner-body {
	font-size: 13px;
	line-height: 1.4;
	opacity: 0.95;
}

.np-tr-pwa-banner-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.np-tr-pwa-banner.is-mobile .np-tr-pwa-banner-actions {
	width: 100%;
}
.np-tr-pwa-banner-btn {
	flex: 1;
	min-height: 48px; /* Touch-Target */
	padding: 0 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	transition: background-color 0.15s ease, transform 0.1s ease;
}
.np-tr-pwa-banner-btn:active {
	transform: scale( 0.97 );
}
.np-tr-pwa-banner-btn-primary {
	background: #fff;
	color: #1f6feb;
}
.np-tr-pwa-banner-btn-primary:hover {
	background: #f5f9ff;
}
.np-tr-pwa-banner-btn-ghost {
	background: rgba( 255, 255, 255, 0.16 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
}
.np-tr-pwa-banner-btn-ghost:hover {
	background: rgba( 255, 255, 255, 0.24 );
}

.np-tr-pwa-banner-close {
	position: absolute;
	top: 6px;
	right: 10px;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
	border-radius: 50%;
}
.np-tr-pwa-banner-close:hover {
	opacity: 1;
	background: rgba( 255, 255, 255, 0.15 );
}

/* — iOS-Anleitungs-Modal — */
.np-tr-pwa-ios {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba( 0, 0, 0, 0.6 );
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	animation: np-tr-pwa-fade-in 0.2s ease both;
}
@keyframes np-tr-pwa-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.np-tr-pwa-ios-inner {
	background: #fff;
	color: #1a1a1a;
	width: 100%;
	max-width: 480px;
	padding: 24px;
	padding-bottom: calc( 24px + env( safe-area-inset-bottom, 0 ) );
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	animation: np-tr-pwa-slide-up 0.3s cubic-bezier( 0.2, 0.8, 0.2, 1 ) both;
}
@keyframes np-tr-pwa-slide-up {
	from { transform: translateY( 100% ); }
	to   { transform: translateY( 0 ); }
}
@media ( min-width: 600px ) {
	.np-tr-pwa-ios {
		align-items: center;
		padding: 20px;
	}
	.np-tr-pwa-ios-inner {
		border-radius: 16px;
	}
}
.np-tr-pwa-ios-title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
}
.np-tr-pwa-ios-steps {
	list-style: none;
	counter-reset: np-step;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.np-tr-pwa-ios-step {
	display: flex;
	align-items: center;
	gap: 14px;
	counter-increment: np-step;
	padding: 12px 14px;
	background: rgba( 31, 111, 235, 0.06 );
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.4;
}
.np-tr-pwa-ios-step::before {
	content: counter( np-step );
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --np-tr-primary, #1f6feb );
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 13px;
}
.np-tr-pwa-ios-step-icon {
	flex-shrink: 0;
	font-size: 24px;
	line-height: 1;
	width: 32px;
	text-align: center;
}
.np-tr-pwa-ios-step-text {
	flex: 1;
}
.np-tr-pwa-ios-close {
	display: block;
	width: 100%;
	min-height: 48px;
	background: var( --np-tr-primary, #1f6feb );
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.np-tr-pwa-ios-close:hover {
	filter: brightness( 1.1 );
}

/* — Toast nach erfolgreicher Installation — */
.np-tr-pwa-toast {
	position: fixed;
	bottom: calc( 20px + env( safe-area-inset-bottom, 0 ) );
	left: 50%;
	transform: translateX( -50% ) translateY( 20px );
	z-index: 99997;
	padding: 12px 20px;
	background: #16a34a;
	color: #fff;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.2 );
	opacity: 0;
	transition: transform 0.3s cubic-bezier( 0.2, 0.8, 0.2, 1 ), opacity 0.2s ease;
}
.np-tr-pwa-toast.is-open {
	transform: translateX( -50% ) translateY( 0 );
	opacity: 1;
}

/* ============================================================
 * Phase 21.6 — Tisch-Gruppierungs-Vorschlag-Modal + Group-Banner
 * ============================================================ */

dialog.np-tr-modal-group-suggest {
	max-width: 540px;
	border-radius: 14px;
	padding: 22px;
}
.np-tr-group-suggest-title {
	margin: 0 0 8px;
	font-size: 20px;
	color: var( --np-tr-primary, #1f6feb );
}
.np-tr-group-suggest-text {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
	color: var( --np-tr-fg );
}
.np-tr-group-suggest-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 16px;
}
.np-tr-group-suggest-card {
	padding: 14px;
	background: rgba( 31, 111, 235, 0.06 );
	border: 1px solid rgba( 31, 111, 235, 0.25 );
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-tr-group-suggest-card.is-primary {
	background: linear-gradient( 135deg, rgba(31,111,235,.12) 0%, rgba(106,90,205,.12) 100% );
	border-color: var( --np-tr-primary, #1f6feb );
}
.np-tr-group-suggest-kind {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	color: var( --np-tr-primary, #1f6feb );
}
.np-tr-group-suggest-label {
	font-size: 16px;
	font-weight: 600;
	color: var( --np-tr-fg );
}
.np-tr-group-suggest-meta {
	font-size: 13px;
	color: var( --np-tr-muted );
}
.np-tr-group-suggest-card .np-tr-btn {
	align-self: flex-start;
	margin-top: 6px;
}
.np-tr-group-suggest-empty {
	padding: 16px;
	background: rgba( 234, 179, 8, 0.1 );
	border: 1px dashed #eab308;
	border-radius: 10px;
	margin: 0 0 16px;
}
.np-tr-group-suggest-actions {
	margin-top: 8px;
}

/* Banner im Buchungs-Modal wenn eine Gruppe gebucht wird */
.np-tr-modal-group-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 8px 12px;
	background: linear-gradient( 135deg, rgba(31,111,235,.12) 0%, rgba(106,90,205,.12) 100% );
	border-left: 3px solid var( --np-tr-primary, #1f6feb );
	border-radius: 6px;
	font-size: 13px;
	color: var( --np-tr-fg );
}
.np-tr-modal-group-icon {
	font-size: 18px;
	flex-shrink: 0;
}

/* ============================================================
 * Phase 21.7 — Personen-Stepper im Buchungs-Modal
 * Prominenter sichtbar als Top-Selektor — User vergisst nicht mehr.
 * ============================================================ */
.np-tr-modal-people {
	margin: 12px 0 8px;
	padding: 14px 16px;
	background: rgba( 31, 111, 235, 0.06 );
	border: 1px solid rgba( 31, 111, 235, 0.2 );
	border-radius: 10px;
}
.np-tr-modal-people.is-group-locked {
	background: rgba( 168, 85, 247, 0.06 );
	border-color: rgba( 168, 85, 247, 0.25 );
}
.np-tr-modal-people-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.np-tr-modal-people-icon {
	font-size: 22px;
	line-height: 1;
}
.np-tr-modal-people-label {
	font-size: 15px;
	font-weight: 600;
	color: var( --np-tr-fg );
	flex: 1;
	min-width: 0;
}

/* Generischer Stepper (auch von anderen Modals nutzbar) */
.np-tr-stepper {
	display: inline-flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid var( --np-tr-border, #e0e4ea );
	border-radius: 8px;
	overflow: hidden;
}
.np-tr-stepper-btn {
	min-width: 44px;
	min-height: 44px;
	font-size: 22px;
	font-weight: 700;
	background: #fff;
	color: var( --np-tr-primary, #1f6feb );
	border: 0;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.np-tr-stepper-btn:hover:not(:disabled) {
	background: rgba( 31, 111, 235, 0.1 );
}
.np-tr-stepper-btn:active:not(:disabled) {
	background: rgba( 31, 111, 235, 0.2 );
}
.np-tr-stepper-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.np-tr-stepper-input {
	width: 56px;
	min-height: 44px;
	border: 0;
	border-left: 1px solid var( --np-tr-border, #e0e4ea );
	border-right: 1px solid var( --np-tr-border, #e0e4ea );
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	background: #fff;
	color: var( --np-tr-fg );
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.np-tr-stepper-input::-webkit-outer-spin-button,
.np-tr-stepper-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.np-tr-stepper-input:disabled {
	background: #f3f4f6;
	color: #6b7280;
}

/* Inline-Warning wenn Personen > Kapazität */
.np-tr-modal-people-warn {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
	padding: 10px 12px;
	background: rgba( 234, 179, 8, 0.12 );
	border-left: 3px solid #eab308;
	border-radius: 6px;
}
.np-tr-modal-people-warn-text {
	flex: 1;
	min-width: 200px;
	font-size: 13px;
	color: var( --np-tr-fg );
	line-height: 1.45;
}
.np-tr-btn-small {
	padding: 6px 12px;
	font-size: 13px;
}

@media ( max-width: 480px ) {
	.np-tr-modal-people-row {
		justify-content: space-between;
	}
}

/* — Sectorum-Brief #2: Extra-Pill mit optionalem Badge + Anchor-Stil — */
a.np-tr-view-pill,
a.np-tr-view-pill-extra {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
a.np-tr-view-pill:hover,
a.np-tr-view-pill-extra:hover {
	text-decoration: none;
}
.np-tr-view-pill-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	margin-left: 4px;
	background: rgba( 31, 111, 235, 0.18 );
	color: var( --np-tr-primary, #1f6feb );
	border-radius: 9px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
}
.np-tr-view-pill.is-active .np-tr-view-pill-badge {
	background: rgba( 255, 255, 255, 0.3 );
	color: #fff;
}

/* MyPlan Action-Box: Cancel + Extra-Buttons schön nebeneinander.
 * V1.27.5 — max-width damit Drittplugins (Filter `nopixels_booking_myplan_action_buttons`)
 * mit langen Button-Texten die Info-Spalte nicht aufblähen können. Auf engen
 * Containern stacken Buttons via flex-wrap untereinander statt nebeneinander. */
.np-tr-myplan-actions {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 6px;
	align-items: stretch;
	justify-content: flex-start;
	max-width: 220px;
	min-width: 0;
}
.np-tr-myplan-actions > * { white-space: normal; }
.np-tr-myplan-extra-action {
	text-decoration: none;
}
.np-tr-myplan-extra-action:hover {
	text-decoration: none;
}
@media ( max-width: 600px ) {
	.np-tr-myplan-actions {
		width: 100%;
		justify-content: flex-end;
	}
}

/* ============================================================
 * Phase 22.7 — Favoriten-Tische (Stern-Toggle)
 * ============================================================ */

/* Favoriten-Toggle-Button im Detail-Modal-Header */
.np-tr-fav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var( --np-tr-border, #e5e7eb );
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var( --np-tr-muted, #6b7280 );
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.np-tr-fav-toggle:hover {
	background: rgba( 250, 204, 21, 0.08 );
	border-color: #facc15;
	color: #b45309;
}
.np-tr-fav-toggle.is-active {
	background: rgba( 250, 204, 21, 0.18 );
	border-color: #facc15;
	color: #b45309;
}
.np-tr-fav-toggle-star {
	font-size: 16px;
	line-height: 1;
	transition: transform 0.2s;
}
.np-tr-fav-toggle.is-active .np-tr-fav-toggle-star {
	transform: scale( 1.15 );
}

/* Favoriten-Sternchen auf Tisch im Living-Map (subtiler Glow + ⭐ rechts oben) */
.np-tr-table.is-favorite .np-tr-table-shape {
	filter: drop-shadow( 0 0 6px rgba( 250, 204, 21, 0.6 ) );
}
.np-tr-table.is-favorite::after {
	/* Pseudo-Element nur für HTML-Elemente, nicht SVG <g>. Pragmatisch: 
	   wir rendern Stern als zusätzliches <text>-Element im JS — siehe unten. */
}

/* ============================================================
 * Phase 23.1 — Modal-Scrollbar dezent + Modal-Layout-Polish
 * Standard-OS-Scrollbar sieht hässlich aus rechts im Modal,
 * besonders im Dark-Mode. Custom-Scrollbar-Styling für Webkit
 * + Firefox-Variante.
 * ============================================================ */

/* Dezenter Scrollbar im Modal-Body */
dialog.np-tr-modal {
	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: rgba( 156, 163, 175, 0.5 ) transparent;
}
dialog.np-tr-modal::-webkit-scrollbar {
	width: 8px;
}
dialog.np-tr-modal::-webkit-scrollbar-track {
	background: transparent;
}
dialog.np-tr-modal::-webkit-scrollbar-thumb {
	background: rgba( 156, 163, 175, 0.35 );
	border-radius: 4px;
	transition: background-color 0.15s;
}
dialog.np-tr-modal::-webkit-scrollbar-thumb:hover {
	background: rgba( 156, 163, 175, 0.6 );
}
dialog.np-tr-modal::-webkit-scrollbar-thumb:active {
	background: rgba( 156, 163, 175, 0.8 );
}

/* Im Dark-Mode etwas hellere Thumb-Farbe */
.np-tr-dark dialog.np-tr-modal,
dialog.np-tr-modal:not(.np-tr-light) {
	scrollbar-color: rgba( 209, 213, 219, 0.3 ) transparent;
}
.np-tr-dark dialog.np-tr-modal::-webkit-scrollbar-thumb,
dialog.np-tr-modal:not(.np-tr-light)::-webkit-scrollbar-thumb {
	background: rgba( 209, 213, 219, 0.25 );
}
.np-tr-dark dialog.np-tr-modal::-webkit-scrollbar-thumb:hover,
dialog.np-tr-modal:not(.np-tr-light)::-webkit-scrollbar-thumb:hover {
	background: rgba( 209, 213, 219, 0.5 );
}

/* Mehr Bottom-Padding im Modal-Body damit die letzte Zeile nicht
   gegen den Rand klatscht — UX-Atemraum. */
dialog.np-tr-modal .np-tr-form {
	padding-bottom: 8px;
}

/* ============================================================
 * Phase 23.1 — Optional-Field-Rows mit Icon + Quick-Pick-Chips
 * Ersetzt die simplen formRow()-Felder im Mehr-Optionen-Block.
 * ============================================================ */
.np-tr-optfield {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: rgba( 31, 111, 235, 0.03 );
	border: 1px solid color-mix( in srgb, var( --np-tr-fg, #1a1a1a ) 8%, transparent );
	border-radius: 8px;
	transition: border-color 0.15s, background-color 0.15s;
}
.np-tr-optfield:focus-within {
	border-color: var( --np-tr-primary, #1f6feb );
	background: rgba( 31, 111, 235, 0.06 );
}

.np-tr-optfield-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	font-weight: 600;
	color: var( --np-tr-fg );
}
.np-tr-optfield-icon {
	font-size: 18px;
	line-height: 1;
}

/* Quick-Pick-Chip-Reihe */
.np-tr-optfield-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.np-tr-optfield-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	min-height: 28px;
	background: rgba( 31, 111, 235, 0.08 );
	color: var( --np-tr-primary, #1f6feb );
	border: 1px solid rgba( 31, 111, 235, 0.2 );
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color 0.12s, color 0.12s, transform 0.08s;
}
.np-tr-optfield-chip:hover {
	background: rgba( 31, 111, 235, 0.18 );
	border-color: rgba( 31, 111, 235, 0.35 );
}
.np-tr-optfield-chip:active {
	transform: scale( 0.96 );
}
.np-tr-optfield-chip.is-active {
	background: var( --np-tr-primary, #1f6feb );
	color: #fff;
	border-color: var( --np-tr-primary, #1f6feb );
}

/* Das eigentliche Input-Feld im Optfield: keine extra Border, Padding angepasst */
.np-tr-optfield input[type="text"] {
	width: 100%;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid color-mix( in srgb, var( --np-tr-fg, #1a1a1a ) 15%, transparent );
	border-radius: 6px;
	font-size: .95rem;
	color: #1a1a1a;
}
.np-tr-optfield input[type="text"]:focus {
	border-color: var( --np-tr-primary, #1f6feb );
	outline: 0;
	box-shadow: 0 0 0 3px rgba( 31, 111, 235, 0.15 );
}
.np-tr-dark .np-tr-optfield input[type="text"],
dialog.np-tr-modal:not(.np-tr-light) .np-tr-optfield input[type="text"] {
	background: #1f2937;
	color: #f9fafb;
	border-color: #4b5563;
}

/* ============================================================
 * Phase 23.2 — Neue Felder im Booking-Modal
 * Geburtstag-Toggle (prominent), Foto/Stream-OK-Check (DSGVO-Block)
 * ============================================================ */

/* Geburtstag-Toggle — auffälliger Pink-Gold-Akzent für „Wow"-Feel */
.np-tr-birthday-toggle {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 14px 0;
	padding: 12px 14px;
	background: linear-gradient(
		135deg,
		rgba( 236, 72, 153, 0.06 ) 0%,
		rgba( 250, 204, 21, 0.06 ) 100%
	);
	border: 1px solid rgba( 236, 72, 153, 0.2 );
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.np-tr-birthday-toggle:hover {
	border-color: rgba( 236, 72, 153, 0.4 );
}
.np-tr-birthday-toggle input[type="checkbox"] {
	margin: 2px 0 0;
	accent-color: #ec4899;
}
.np-tr-birthday-toggle-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.np-tr-birthday-toggle-text strong {
	font-size: .98rem;
	color: #be185d;
}
.np-tr-birthday-toggle-text small {
	font-size: .82rem;
	color: var( --np-tr-muted, #6b7280 );
}
.np-tr-birthday-toggle input:checked ~ .np-tr-birthday-toggle-text strong {
	color: #ec4899;
}
.np-tr-birthday-toggle:has( input:checked ) {
	background: linear-gradient(
		135deg,
		rgba( 236, 72, 153, 0.15 ) 0%,
		rgba( 250, 204, 21, 0.15 ) 100%
	);
	border-color: #ec4899;
	box-shadow: 0 0 0 3px rgba( 236, 72, 153, 0.15 );
}

/* Foto/Stream-Check im DSGVO-Block */
.np-tr-check-photo {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
	padding: 8px 10px;
	background: rgba( 96, 165, 250, 0.06 );
	border: 1px solid rgba( 96, 165, 250, 0.2 );
	border-radius: 6px;
}
.np-tr-check-photo input[type="checkbox"] {
	margin-top: 3px;
}
.np-tr-check-photo-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: .88rem;
}
.np-tr-check-photo-text small {
	font-size: .78rem;
	color: var( --np-tr-muted, #6b7280 );
}

/* — Phase 23.4d „NEU"-Badge für neue Felder — */
.np-tr-optfield-new-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	background: linear-gradient( 135deg, #1f6feb 0%, #6a5acd 100% );
	color: #fff;
	border-radius: 10px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .08em;
	vertical-align: middle;
	animation: np-tr-new-pulse 2s ease-in-out infinite;
}
@keyframes np-tr-new-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 31, 111, 235, 0.5 ); }
	50%      { box-shadow: 0 0 0 6px rgba( 31, 111, 235, 0 ); }
}

/* ============================================================
 * Phase 24.1 — Challenge-the-Staff Boss-Cards (Frontend-Modal)
 * Zwei selektierbare Cards (Alex + Beast). Click = chef gewählt.
 * Disabled = bereits in diesem Monat herausgefordert.
 * ============================================================ */
.np-tr-challenge-block {
	margin: 18px 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: linear-gradient( 135deg, rgba( 124, 58, 237, 0.06 ) 0%, rgba( 236, 72, 153, 0.06 ) 100% );
	border: 1px solid rgba( 124, 58, 237, 0.2 );
}
.np-tr-challenge-header { margin-bottom: 10px; }
.np-tr-challenge-title {
	display: block;
	font-size: 1.02rem;
	color: #7c3aed;
}
.np-tr-challenge-intro {
	margin: 4px 0 0;
	font-size: .85rem;
	color: var( --np-tr-muted, #6b7280 );
	line-height: 1.45;
}
.np-tr-challenge-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 10px;
}
.np-tr-challenge-card {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 12px;
	background: #fff;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
	font: inherit;
	color: inherit;
}
.np-tr-challenge-card:hover:not(.is-disabled) {
	border-color: #7c3aed;
	transform: translateY( -1px );
	box-shadow: 0 4px 12px rgba( 124, 58, 237, 0.15 );
}
.np-tr-challenge-card.is-selected {
	border-color: #7c3aed;
	background: linear-gradient( 135deg, rgba( 124, 58, 237, 0.08 ) 0%, rgba( 236, 72, 153, 0.08 ) 100% );
	box-shadow: 0 0 0 3px rgba( 124, 58, 237, 0.2 );
}
.np-tr-challenge-card.is-disabled {
	opacity: .55;
	cursor: not-allowed;
}
.np-tr-challenge-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: #f3f4f6;
}
.np-tr-challenge-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #9ca3af;
}
.np-tr-challenge-body {
	flex: 1;
	min-width: 0;
}
.np-tr-challenge-name {
	font-weight: 600;
	font-size: .98rem;
	color: #111827;
	margin-bottom: 2px;
}
.np-tr-challenge-bio {
	font-size: .82rem;
	color: var( --np-tr-muted, #6b7280 );
	line-height: 1.4;
	margin-bottom: 4px;
}
.np-tr-challenge-systems {
	font-size: .8rem;
	color: #374151;
	line-height: 1.35;
}
.np-tr-challenge-status {
	margin-top: 6px;
	padding: 4px 8px;
	border-radius: 6px;
	font-size: .78rem;
	background: rgba( 239, 68, 68, 0.1 );
	color: #b91c1c;
}
.np-tr-challenge-status-sub {
	margin-top: 2px;
	font-size: .75rem;
	color: var( --np-tr-muted, #6b7280 );
}

/* ============================================================
 * Phase 24.2 — [tisch_reservierung_anleitung] Landing-Section
 * Nutzt die gleichen Plugin-Variablen (--np-tr-*) wie alle anderen
 * Shortcodes — heißt: Dark-Mode + Branding-Farben kommen automatisch
 * und der gesamte Block fügt sich nahtlos ein.
 * ============================================================ */
.np-tr-guide {
	/* Branding-Variablen analog zu .np-tr-app — werden via JS-Konfig
	   bzw. inline-style aus PHP überschrieben (primary/accent). */
	--np-tr-primary: #1f6feb;
	--np-tr-accent:  #39d353;
	--np-tr-danger:  #f85149;
	--np-tr-bg:      #ffffff;
	--np-tr-fg:      #111827;
	--np-tr-muted:   #6b7280;
	--np-tr-card:    #ffffff;
	--np-tr-card-soft: #f9fafb;
	--np-tr-border:  #e5e7eb;
	--np-tr-shadow:  0 4px 14px rgba(0,0,0,.06);
	--np-tr-radius:  12px;
	--np-tr-radius-sm: 8px;

	max-width: 1100px;
	margin: 24px auto;
	padding: 0 16px;
	box-sizing: border-box;
	font-family: inherit;
	color: var( --np-tr-fg );
	line-height: 1.5;
}
.np-tr-guide *,
.np-tr-guide *::before,
.np-tr-guide *::after { box-sizing: border-box; }

/* Theme-Reset wie bei .np-tr-app — verhindert dass das umgebende
   Theme die Farben überschreibt. */
.np-tr-guide h1, .np-tr-guide h2, .np-tr-guide h3, .np-tr-guide h4,
.np-tr-guide p,  .np-tr-guide span, .np-tr-guide strong, .np-tr-guide em,
.np-tr-guide label, .np-tr-guide li, .np-tr-guide summary {
	color: inherit;
}

/* — Bridges für Primary-/Accent-Aliases (kompat mit alter Variable) — */
.np-tr-guide { --np-tr-guide-primary: var( --np-tr-primary ); --np-tr-guide-accent: var( --np-tr-accent ); }

/* ---------- Dark Mode (automatisch) ---------- */
@media ( prefers-color-scheme: dark ) {
	.np-tr-guide:not(.np-tr-light) {
		--np-tr-bg: #0d1117;
		--np-tr-fg: #e6edf3;
		--np-tr-muted: #8b949e;
		--np-tr-card: #161b22;
		--np-tr-card-soft: #1c222b;
		--np-tr-border: #30363d;
		--np-tr-shadow: 0 4px 14px rgba(0,0,0,.4);
	}
}
.np-tr-guide.np-tr-dark {
	--np-tr-bg: #0d1117;
	--np-tr-fg: #e6edf3;
	--np-tr-muted: #8b949e;
	--np-tr-card: #161b22;
	--np-tr-card-soft: #1c222b;
	--np-tr-border: #30363d;
	--np-tr-shadow: 0 4px 14px rgba(0,0,0,.4);
}

/* — HERO — */
.np-tr-guide-hero {
	text-align: center;
	padding: 36px 22px 30px;
	margin-bottom: 28px;
	border-radius: var( --np-tr-radius );
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	box-shadow: var( --np-tr-shadow );
	/* dezenter Branding-Akzent als Top-Border */
	border-top: 4px solid var( --np-tr-primary );
}
.np-tr-guide-logo {
	display: block;
	max-width: 120px;
	max-height: 60px;
	margin: 0 auto 16px;
	object-fit: contain;
}
.np-tr-guide-title {
	font-size: clamp( 1.4rem, 2vw + 1rem, 2.2rem );
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 10px;
	color: var( --np-tr-fg );
}
.np-tr-guide-subtitle {
	font-size: 1.02rem;
	color: var( --np-tr-muted );
	margin: 0 auto 18px;
	max-width: 640px;
	line-height: 1.55;
}
.np-tr-guide-hero-cta { margin-top: 16px; }

/* — Button — */
.np-tr-guide-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var( --np-tr-radius-sm );
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.np-tr-guide-btn-primary {
	background: var( --np-tr-primary );
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.np-tr-guide-btn-primary:hover,
.np-tr-guide-btn-primary:focus-visible {
	color: #fff !important;
	filter: brightness( 1.1 );
	transform: translateY( -1px );
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.np-tr-guide-btn-large {
	padding: 14px 28px;
	font-size: 1.05rem;
}

/* — Sections — */
.np-tr-guide-section { margin: 0 0 30px; }
.np-tr-guide-section-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: var( --np-tr-fg );
	margin: 0 0 18px;
	text-align: center;
}

/* — Steps — */
.np-tr-guide-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 16px;
}
.np-tr-guide-step {
	position: relative;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius );
	padding: 22px 16px 16px;
	text-align: center;
	box-shadow: var( --np-tr-shadow );
	transition: transform .2s ease, border-color .2s ease;
}
.np-tr-guide-step:hover {
	transform: translateY( -2px );
	border-color: var( --np-tr-primary );
}
.np-tr-guide-step-num {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX( -50% );
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	background: var( --np-tr-primary );
	color: #fff !important;
	border-radius: 999px;
	font-weight: 700;
	font-size: .85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.np-tr-guide-step-icon {
	display: block;
	font-size: 38px;
	line-height: 1;
	margin: 4px 0 10px;
}
.np-tr-guide-step-title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var( --np-tr-fg );
	margin-bottom: 4px;
}
.np-tr-guide-step-desc {
	margin: 0;
	font-size: .9rem;
	color: var( --np-tr-muted );
	line-height: 1.5;
}

/* — Features — */
.np-tr-guide-features {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 14px;
}
.np-tr-guide-feature {
	background: var( --np-tr-card-soft );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm );
	padding: 14px 16px;
	transition: border-color .15s ease, transform .15s ease;
}
.np-tr-guide-feature:hover {
	border-color: var( --np-tr-primary );
	transform: translateY( -1px );
}
.np-tr-guide-feature-icon {
	display: inline-block;
	font-size: 22px;
	line-height: 1;
	margin-right: 6px;
	vertical-align: middle;
}
.np-tr-guide-feature-title {
	font-size: .98rem;
	color: var( --np-tr-fg );
	font-weight: 600;
	display: inline;
	vertical-align: middle;
}
.np-tr-guide-feature-desc {
	margin: 6px 0 0;
	font-size: .88rem;
	color: var( --np-tr-muted );
	line-height: 1.55;
}

/* — FAQ — */
.np-tr-guide-faq {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.np-tr-guide-faq-item {
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm );
	overflow: hidden;
	transition: border-color .15s ease;
}
.np-tr-guide-faq-item[open] { border-color: var( --np-tr-primary ); }
.np-tr-guide-faq-item > summary {
	cursor: pointer;
	padding: 14px 18px;
	font-weight: 600;
	font-size: .98rem;
	color: var( --np-tr-fg );
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	list-style: none;
}
.np-tr-guide-faq-item > summary::-webkit-details-marker { display: none; }
.np-tr-guide-faq-item > summary::after {
	content: '+';
	font-size: 1.4rem;
	font-weight: 400;
	color: var( --np-tr-primary );
	flex-shrink: 0;
	transition: transform .2s ease;
}
.np-tr-guide-faq-item[open] > summary::after { content: '−'; }
.np-tr-guide-faq-body {
	padding: 0 18px 16px;
	color: var( --np-tr-muted );
	font-size: .95rem;
	line-height: 1.6;
}
.np-tr-guide-faq-body p { margin: 0; color: var( --np-tr-muted ); }

/* — CTA Block — */
.np-tr-guide-cta {
	text-align: center;
	padding: 32px 22px;
	border-radius: var( --np-tr-radius );
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	box-shadow: var( --np-tr-shadow );
	border-top: 4px solid var( --np-tr-accent );
}
.np-tr-guide-cta h3 {
	font-size: 1.4rem;
	margin: 0 0 6px;
	color: var( --np-tr-fg );
	font-weight: 800;
}
.np-tr-guide-cta p {
	margin: 0 0 18px;
	color: var( --np-tr-muted );
}

/* — Mobile — */
@media ( max-width: 560px ) {
	.np-tr-guide { padding: 0 12px; }
	.np-tr-guide-hero { padding: 28px 16px 22px; }
	.np-tr-guide-title { font-size: 1.5rem; }
	.np-tr-guide-subtitle { font-size: .95rem; }
	.np-tr-guide-section-title { font-size: 1.15rem; }
	.np-tr-guide-steps { grid-template-columns: 1fr; }
	.np-tr-guide-features { grid-template-columns: 1fr; }
}

/* ============================================================
 * Phase 24.3 — Sectorum-Gegner-Picker im Booking-Modal
 * Nutzt die Plugin-Variablen (--np-tr-*) damit Light/Dark + Branding
 * automatisch passen. Fraktion-Farbe kommt pro Option als CSS-Var
 * (--np-tr-sec-color) und färbt den Left-Border.
 * ============================================================ */
.np-tr-sectorum-block {
	/* V1.34.6 — prominenter Highlight (Liga-Brief 1945): vorher zu unscheinbar,
	   User hat den Block übersehen und Sectorum-Pfad nie aktiviert. Jetzt:
	   doppelt so dicker Border-Left, etwas mehr Padding, leichter Glow für
	   visuelle Hierarchie (Sectorum = Setting-Wahl, prominenter als Liga = nur
	   Wertungs-Aufsatz). */
	margin: 18px 0;
	padding: 18px 20px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius, 12px );
	border-left: 6px solid var( --np-tr-primary );
	box-shadow: 0 0 0 2px rgba( 31, 111, 235, .08 );
}
.np-tr-sectorum-header { margin-bottom: 10px; }
.np-tr-sectorum-title {
	display: block;
	color: var( --np-tr-fg );
	font-size: 1.15rem;
	font-weight: 700;
}
.np-tr-sectorum-intro {
	margin: 4px 0 0;
	font-size: .85rem;
	color: var( --np-tr-muted );
	line-height: 1.5;
}
.np-tr-sectorum-me {
	margin: 10px 0;
	padding: 8px 12px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	color: var( --np-tr-fg );
}
.np-tr-sectorum-me-icon { font-size: 18px; line-height: 1; }
.np-tr-sectorum-empty {
	margin: 8px 0 0;
	padding: 10px 12px;
	font-size: .88rem;
	color: var( --np-tr-muted );
	background: var( --np-tr-card );
	border: 1px dashed var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
}
.np-tr-sectorum-search {
	width: 100%;
	margin: 10px 0 8px;
	padding: 8px 12px;
	background: var( --np-tr-bg );
	color: var( --np-tr-fg );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	font-size: .92rem;
}
.np-tr-sectorum-search:focus {
	outline: none;
	border-color: var( --np-tr-primary );
	box-shadow: 0 0 0 3px rgba(31,111,235,.15);
}
.np-tr-sectorum-opts {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 280px;
	overflow-y: auto;
	padding-right: 4px;
}
.np-tr-sectorum-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-left: 3px solid var( --np-tr-sec-color, var( --np-tr-border ) );
	border-radius: var( --np-tr-radius-sm, 8px );
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.np-tr-sectorum-opt:hover {
	border-color: var( --np-tr-primary );
}
.np-tr-sectorum-opt:has( input:checked ) {
	border-color: var( --np-tr-primary );
	background: rgba(31,111,235,.06);
}
.np-tr-sectorum-opt input[type="radio"] {
	margin: 0;
	flex-shrink: 0;
	accent-color: var( --np-tr-primary );
}
.np-tr-sectorum-opt.is-none {
	border-left-color: var( --np-tr-border );
	font-style: italic;
	color: var( --np-tr-muted );
}
.np-tr-sectorum-opt-label {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: .92rem;
	color: var( --np-tr-fg );
	flex-wrap: wrap;
}
.np-tr-sectorum-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: var( --np-tr-card-soft, #f3f4f6 );
}
.np-tr-sectorum-icon {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}
.np-tr-sectorum-name {
	font-weight: 600;
}
.np-tr-sectorum-faction {
	color: var( --np-tr-muted );
	font-size: .85rem;
}
.np-tr-sectorum-stats {
	margin-left: auto;
	color: var( --np-tr-muted );
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}

/* MyPlan-Footer: „⚔ Sektor-Match: gegen Bob (Wupper-Korsaren)" */
.np-tr-sectorum-myplan-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: rgba(31,111,235,.08);
	border: 1px solid var( --np-tr-border );
	border-radius: 999px;
	font-size: .82rem;
	color: var( --np-tr-fg );
	text-decoration: none;
	margin-top: 6px;
}
.np-tr-sectorum-myplan-badge:hover {
	border-color: var( --np-tr-primary );
	background: rgba(31,111,235,.12);
}

/* ============================================================
 * Phase 24.4 — Liga-Match-Typ-Block + Spieler-Picker
 * Reuse Plugin-Variablen (--np-tr-*) für Light/Dark + Branding.
 * Struktur parallel zum Sectorum-Picker (Phase 24.3) damit beide
 * Sub-Blocks im League-OS-Block visuell konsistent sind.
 * ============================================================ */
.np-tr-league-type {
	margin: 10px 0;
	padding: 12px 14px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
}
.np-tr-league-type-title {
	display: block;
	color: var( --np-tr-fg );
	margin-bottom: 8px;
	font-size: .92rem;
}
.np-tr-league-type-opts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 8px;
}
.np-tr-league-type-opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.np-tr-league-type-opt:hover:not(.is-disabled) {
	border-color: var( --np-tr-primary );
}
.np-tr-league-type-opt:has( input:checked ) {
	border-color: var( --np-tr-primary );
	background: rgba(31,111,235,.06);
}
.np-tr-league-type-opt.is-disabled {
	opacity: .5;
	cursor: not-allowed;
}
.np-tr-league-type-opt input[type="radio"] {
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var( --np-tr-primary );
}
.np-tr-league-type-icon {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}
.np-tr-league-type-body {
	flex: 1;
	min-width: 0;
}
.np-tr-league-type-body strong {
	display: block;
	font-size: .95rem;
	color: var( --np-tr-fg );
	margin-bottom: 2px;
}
.np-tr-league-type-body small {
	font-size: .8rem;
	color: var( --np-tr-muted );
	line-height: 1.4;
}

/* — Spieler-Picker (analog Sectorum, Liga-spezifische Klassen) — */
.np-tr-league-picker {
	margin: 10px 0;
	padding: 12px 14px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
}
.np-tr-league-me {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 10px;
	padding: 8px 12px;
	background: var( --np-tr-card-soft, var( --np-tr-card ) );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	font-size: .9rem;
	color: var( --np-tr-fg );
}
.np-tr-league-me-meta { color: var( --np-tr-muted ); font-size: .85rem; }
.np-tr-league-search {
	width: 100%;
	margin: 6px 0;
	padding: 8px 12px;
	background: var( --np-tr-bg );
	color: var( --np-tr-fg );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	font-size: .92rem;
}
.np-tr-league-search:focus {
	outline: none;
	border-color: var( --np-tr-primary );
	box-shadow: 0 0 0 3px rgba(31,111,235,.15);
}
.np-tr-league-opts {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 260px;
	overflow-y: auto;
	padding-right: 4px;
}
.np-tr-league-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.np-tr-league-opt:hover { border-color: var( --np-tr-primary ); }
.np-tr-league-opt:has( input:checked ) {
	border-color: var( --np-tr-primary );
	background: rgba(31,111,235,.06);
}
.np-tr-league-opt.is-none {
	font-style: italic;
	color: var( --np-tr-muted );
}
.np-tr-league-opt input[type="radio"] {
	margin: 0;
	flex-shrink: 0;
	accent-color: var( --np-tr-primary );
}
.np-tr-league-opt-label {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: .92rem;
	color: var( --np-tr-fg );
	flex-wrap: wrap;
}
.np-tr-league-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: var( --np-tr-card-soft, #f3f4f6 );
}
.np-tr-league-name { font-weight: 600; }
.np-tr-league-faction { color: var( --np-tr-muted ); font-size: .85rem; }
.np-tr-league-rank {
	margin-left: auto;
	color: var( --np-tr-primary );
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 * Phase 24.5 — Match-Format-Picker + Multi-Slot-Layout
 * Eigene Variablen-Klasse (.np-tr-mp-*) für Layout, Farben aus
 * Plugin-Variablen (--np-tr-*) für Dark-Mode + Branding.
 * ============================================================ */
.np-tr-mp-format {
	margin: 10px 0;
	padding: 12px 14px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
}
.np-tr-mp-format-title {
	display: block;
	color: var( --np-tr-fg );
	font-size: .95rem;
	margin-bottom: 4px;
}
.np-tr-mp-format-hint {
	margin: 0 0 8px;
	font-size: .82rem;
	color: var( --np-tr-muted );
}
.np-tr-mp-format-opts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	gap: 6px;
}
.np-tr-mp-format-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
	font-size: .9rem;
	color: var( --np-tr-fg );
}
.np-tr-mp-format-opt:hover { border-color: var( --np-tr-primary ); }
.np-tr-mp-format-opt:has( input:checked ) {
	border-color: var( --np-tr-primary );
	background: rgba(31,111,235,.06);
}
.np-tr-mp-format-opt input[type="radio"] { accent-color: var( --np-tr-primary ); margin: 0; }
.np-tr-mp-format-icon { font-size: 18px; line-height: 1; }

/* — Extra-Slots-Container — */
.np-tr-mp-extra-slots {
	margin: 10px 0;
	padding: 12px 14px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.np-tr-mp-slot {
	padding: 10px 12px;
	background: var( --np-tr-card-soft, var( --np-tr-card ) );
	border: 1px solid var( --np-tr-border );
	border-left: 3px solid var( --np-tr-primary );
	border-radius: var( --np-tr-radius-sm, 8px );
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.np-tr-mp-slot-head {
	font-size: .9rem;
	color: var( --np-tr-fg );
}
.np-tr-mp-slot-select {
	width: 100%;
	padding: 8px 10px;
	background: var( --np-tr-bg );
	color: var( --np-tr-fg );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	font-size: .9rem;
}
.np-tr-mp-slot-select:focus {
	outline: none;
	border-color: var( --np-tr-primary );
}
.np-tr-mp-slot-guest {
	width: 100%;
	padding: 8px 10px;
	background: var( --np-tr-bg );
	color: var( --np-tr-fg );
	border: 1px dashed var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	font-size: .9rem;
}
.np-tr-mp-slot-guest:focus {
	outline: none;
	border-color: var( --np-tr-primary );
	border-style: solid;
}
.np-tr-mp-slot-guest-hint {
	font-size: .75rem;
	color: var( --np-tr-muted );
}

/* Buchender-Hinweis (Team A für 2v2) */
.np-tr-mp-self-hint {
	padding: 6px 12px;
	background: rgba(57,211,83,.08);
	border-left: 3px solid var( --np-tr-accent );
	border-radius: var( --np-tr-radius-sm, 8px );
	font-size: .85rem;
	color: var( --np-tr-fg );
}

/* ============================================================
 * Phase 24.7 — Sectorum-Battle-Pending-Badge (MyPlan)
 * Pulsierender Hinweis, dass der Spieler sein Sektor-Match-Ergebnis
 * in Sectorum eintragen soll. Verschwindet sobald sectorum_status='recorded'.
 * Plugin-Variablen für Light/Dark; Sectorum-Rot als Akzent.
 * ============================================================ */
.np-tr-sector-battle-badge {
	display: block;
	margin-top: 12px;
	padding: 12px 16px;
	background: linear-gradient( 135deg, #ef4444 0%, #dc2626 100% );
	color: #fff !important;
	border-radius: var( --np-tr-radius-sm, 8px );
	text-decoration: none !important;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba( 239, 68, 68, .3 );
	animation: np-tr-sector-pulse 2.4s ease-in-out infinite;
	transition: transform .15s ease, box-shadow .15s ease;
}
.np-tr-sector-battle-badge:hover {
	color: #fff !important;
	transform: translateY( -1px );
	box-shadow: 0 6px 18px rgba( 239, 68, 68, .45 );
}
.np-tr-sector-battle-badge strong {
	display: block;
	color: #fff !important;
	font-size: 1rem;
}
.np-tr-sector-battle-badge small {
	display: block;
	margin-top: 4px;
	font-weight: 400;
	font-size: .82rem;
	opacity: .92;
	color: #fff !important;
}
.np-tr-sector-battle-badge.is-no-link {
	cursor: default;
	animation: none;
	opacity: .85;
}
/* Phase 24.7.1 — Rejected-Variante: Admin hat das Ergebnis verworfen.
   Grauer Verlauf statt Sectorum-Rot, kein Pulse (dezenter — keine Panik,
   aber sichtbar genug damit der Spieler weiß: bitte neu eintragen). */
.np-tr-sector-battle-badge.is-rejected {
	background: linear-gradient( 135deg, #6b7280 0%, #4b5563 100% );
	box-shadow: 0 2px 8px rgba( 75, 85, 99, .25 );
	animation: none;
}
.np-tr-sector-battle-badge.is-rejected:hover {
	box-shadow: 0 4px 14px rgba( 75, 85, 99, .35 );
}
@keyframes np-tr-sector-pulse {
	0%, 100% { box-shadow: 0 4px 12px rgba( 239, 68, 68, .3 ); }
	50%      { box-shadow: 0 4px 24px rgba( 239, 68, 68, .55 ); }
}

/* Auf Mobile dezenter darstellen */
@media ( max-width: 560px ) {
	.np-tr-sector-battle-badge { padding: 10px 12px; }
	.np-tr-sector-battle-badge strong { font-size: .94rem; }
	.np-tr-sector-battle-badge small { font-size: .78rem; }
}

/* ============================================================
 * V1.27 — Multi-Match-Roster im MyPlan
 * Pro Booking-Card eine Liste aller Matches mit Status + Aktionen.
 * Plugin-Variablen für Light/Dark, Farben pro Status.
 * ============================================================ */
.np-tr-myplan-matches {
	/* V1.27.3 LAYOUT-FIX: Booking-Card ist ein 3-Spalten-Grid (Date | Info | Actions).
	 * Diese Matches-Box braucht eine eigene volle-Breite-Row UNTER der Card,
	 * sonst landet sie in der schmalen rechten Auto-Spalte und drückt die
	 * Info-Spalte mit Tisch-Name auf 30px (Bug-Report 28.05.2026). */
	grid-column: 1 / -1;
	margin: 12px 0 0;
	padding: 12px 14px;
	background: var( --np-tr-card-soft, var( --np-tr-card ) );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.np-tr-myplan-match {
	padding: 10px 12px;
	background: var( --np-tr-card );
	border: 1px solid var( --np-tr-border );
	border-left: 3px solid var( --np-tr-muted );
	border-radius: var( --np-tr-radius-sm, 8px );
	transition: border-color .15s ease;
}
.np-tr-myplan-match-pending     { border-left-color: #6b7280; }
.np-tr-myplan-match-in_progress { border-left-color: #ef4444; }
.np-tr-myplan-match-completed   { border-left-color: var( --np-tr-accent, #39d353 ); }
.np-tr-myplan-match-cancelled   { border-left-color: var( --np-tr-border ); opacity: .65; }
.np-tr-myplan-match-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	color: var( --np-tr-fg );
	flex-wrap: wrap;
}
.np-tr-myplan-match-status-icon {
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}
.np-tr-myplan-match-status-label {
	margin-left: auto;
	font-size: .78rem;
	color: var( --np-tr-muted );
	background: var( --np-tr-card-soft, var( --np-tr-card ) );
	padding: 2px 8px;
	border-radius: 999px;
}
.np-tr-myplan-match-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.np-tr-myplan-add-match {
	margin-top: 4px;
	align-self: flex-start;
}
.np-tr-myplan-add-match:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Modal für „Weiteres Match anlegen" */
.np-tr-modal-add-match {
	max-width: 460px;
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius );
	background: var( --np-tr-card );
	color: var( --np-tr-fg );
	padding: 22px 24px;
}
.np-tr-modal-add-match h2 { margin: 0 0 6px; color: var( --np-tr-fg ); font-size: 1.2rem; }
.np-tr-modal-add-match .np-tr-muted { font-size: .88rem; margin: 0 0 14px; color: var( --np-tr-muted ); }
.np-tr-modal-add-match select {
	width: 100%;
	padding: 8px 10px;
	background: var( --np-tr-bg );
	color: var( --np-tr-fg );
	border: 1px solid var( --np-tr-border );
	border-radius: var( --np-tr-radius-sm, 8px );
}