/* ============================================================
   EVENTS — Übersicht, Details, Tabs
   ============================================================ */
/* ===== Überschriften-Design ===== */
.event-section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 7px 12px;
	margin-top: 5px;
	margin-bottom: 10px;
	border-radius: 3px;
	border-left: 3px solid #6e6e6e;
	border-right: 1px solid #20222f;
	border-top: 1px solid #20222f;
	border-bottom: 1px solid #20222f;

	color: #f5f5f5;
	background-color: rgba(30, 30, 40, 0.3);
	font-size: 14px;
	font-weight: 500;
}

/* Kommende Events – Section-Titel */
.event-section-title.upcoming {
	border-left: 4px solid #5DCAA5;
	border-right: 1px solid rgba(93,202,165,0.35);
	border-top: 1px solid rgba(93,202,165,0.35);
	border-bottom: 1px solid rgba(93,202,165,0.35);
	background: linear-gradient(90deg, rgba(93,202,165,0.10) 0%, rgba(30,30,40,0.3) 100%);
	color: #e8fff8;
}

.event-section-title .upcoming-badge {
	font-size: 11px;
	background: rgba(93,202,165,0.2);
	color: #5DCAA5;
	border: 1px solid rgba(93,202,165,0.35);
	padding: 2px 8px;
	border-radius: 20px;
	font-weight: 500;
	white-space: nowrap;
}

/* ===== Event-Listen (kommende + laufende) ===== */
.event-list {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px;
	margin-bottom: 10px;
}

.event-list tr {
	display: flex;
	align-items: center;
	gap: 4px;
	border: 1px solid #080b10;
	background-color: rgba(30,30,40,0.3);
	border-radius: 6px;
	padding: 14px 16px;
	transition: background 0.3s, transform 0.2s;
	cursor: pointer;
	position: relative;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.event-list tr:hover {
	background-color: rgba(40,40,50,0.5);
	transform: translateY(-2px);
}

/* Kommende Events – Zeilen */
.event-list tr.upcoming-row {
	border: 1px solid rgba(93,202,165,0.4);
	background-color: rgba(93,202,165,0.07);
}

.event-list tr.upcoming-row::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: #5DCAA5;
	border-radius: 6px 0 0 6px;
}

.event-list tr.upcoming-row:hover {
	background-color: rgba(93,202,165,0.15);
	transform: translateY(-2px);
}

/* ===== Spalten (Desktop) ===== */
.event-col-name {
	flex: 2;
	font-weight: bold;
	color: #e0e0e0;
	font-size: 13px;
	padding: 0 8px;
	word-break: break-word;
}

.event-list tr.upcoming-row .event-col-name {
	color: #f0fff8;
}

.event-col-date {
	flex: 1;
	padding: 0 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.event-col-days {
	flex: 0 0 55px;
	padding: 0 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.event-col-guest {
	flex: 1;
	padding: 0 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.event-col-guests-compact {
	flex: 1;
	font-size: 12px;
	color: #cccccc;
	padding: 0 8px;
	text-align: right;
}

/* Beschriftung + Wert */
.col-lbl {
	font-size: 12px;
	color: #666e7a;
	margin-bottom: 2px;
	white-space: nowrap;
}

.event-list tr.upcoming-row .col-lbl {
	color: #6a8e88;
}

.col-val {
	font-size: 15px;
	color: #aaaaaa;
	font-weight: bold;
}

.event-list tr.upcoming-row .col-val {
	color: #b0d0c8;
}

.col-val.days      { color: #777; }
.col-val.unpaid    { color: #e8a44a; }
.col-val.reserved  { color: #5DCAA5; }
.col-val.free      { color: #7eb8ff; }

.event-list tr.upcoming-row .col-val.days { color: #7a9e98; }

.event-list a {
	text-decoration: none;
	color: inherit;
}

/* ===== Event Cards für vergangene Events ===== */
.event-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 15px;
	margin-top: 10px;
}

.event-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-decoration: none;
	color: inherit;

	padding: 10px;
	border-radius: 6px;
	border: 1px solid #080b10;
	background-color: rgba(30,30,40,0.3);
	transition: background 0.3s, transform 0.2s;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.event-card:hover {
	transform: translateY(-2px);
	background-color: rgba(40,40,50,0.5);
}

.event-title {
	font-weight: bold;
	margin-bottom: 6px;
	font-size: 1.05em;
}

.event-dates, .event-guests {
	font-size: 0.9em;
	margin-bottom: 4px;
	color: #cccccc;
}

.event-card a {
	text-decoration: none;
	color: inherit;
	display: block;
	height: 100%;
}

/* ===== Mobile ===== */
@media (max-width: 600px) {

	/*
	 * 3-zeiliges Layout:
	 * Zeile 1: Name (breit) | Tage (schmal)
	 * Zeile 2: Von          | Bis
	 * Zeile 3: Angemeldet   | Reserviert | Freie Plätze
	 */
	.event-list tr {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto auto;
		row-gap: 8px;
		column-gap: 6px;
		padding: 12px 14px 12px 18px;
		align-items: start;
	}

	/* Zeile 1 */
	.event-col-name {
		grid-column: 1 / span 2;
		grid-row: 1;
		padding: 0;
		font-size: 13px;
		align-self: center;
	}

	.event-col-days {
		grid-column: 3;
		grid-row: 1;
		flex: none;
		padding: 0;
		align-items: flex-start;
		text-align: left;
		align-self: center;
	}

	/* Zeile 2 */
	.event-col-date:nth-of-type(2) {
		grid-column: 1;
		grid-row: 2;
		padding: 0;
		align-items: flex-start;
		text-align: left;
	}

	.event-col-date:nth-of-type(3) {
		grid-column: 2;
		grid-row: 2;
		padding: 0;
		align-items: flex-start;
		text-align: left;
	}

	/* Zeile 3: Gäste-Spalten */
	.event-col-guest:nth-of-type(5) {
		grid-column: 1;
		grid-row: 3;
		padding: 0;
		align-items: flex-start;
		text-align: left;
	}

	.event-col-guest:nth-of-type(6) {
		grid-column: 2;
		grid-row: 3;
		padding: 0;
		align-items: flex-start;
		text-align: left;
	}

	.event-col-guest:nth-of-type(7) {
		grid-column: 3;
		grid-row: 3;
		padding: 0;
		align-items: flex-start;
		text-align: left;
	}

	/* Kompakte Gäste (laufende Events) */
	.event-col-guests-compact {
		grid-column: 1 / span 3;
		grid-row: 3;
		padding: 0;
		text-align: left;
	}

	.event-container {
		grid-template-columns: 1fr;
	}
}


/* ---- aus details_location.php ---- */
.event-map {
    height: 600px;
    border-radius: 8px;
}

.leaflet-popup-content {
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
}

/* ---- aus details_join.php: siehe Block "TICKET-KAUF-FLOW" weiter unten ---- */
.product-info-box { background:rgba(60,60,75,0.7); padding:12px; border-radius:6px; border:1px solid #555; color:#ddd; }
.receipt-item, .summary-item { display:flex; justify-content:space-between; padding:6px 4px; border-bottom:1px dashed #555; background:rgba(60,60,75,0.5); border-radius:4px; margin-bottom:4px; color:#ddd; font-size:0.9em; }
.receipt-item span:first-child, .summary-item span:first-child { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.receipt-item span:last-child, .summary-item span:last-child { min-width:70px; text-align:right; font-weight:bold; color:#66cc66; }
.summary-day { margin-top:12px; margin-bottom:6px; font-weight:bold; color:#fff; font-size:1em; border-bottom:2px solid #444; padding-bottom:4px; letter-spacing:0.5px; text-transform:uppercase; }
.summary-day:first-of-type { color:#ffcc66; font-size:1.05em; }
#summaryTotal { font-size:1.1em; font-weight:bold; color:#fff; text-align:right; margin-top:8px; }
.summary-item:hover { background:rgba(80,80,95,0.7); }
/* .order-summary, .terms-box sind reine Modifier-Klassen auf .summary-box
   für den semantischen Bezug – Layout kommt vollständig von .step3-grid */
.event-terms { max-height:500px; overflow-y:auto; background:rgba(0,0,0,0.1); padding:8px; border-radius:6px; font-size:0.9em; color:#ddd; }
.terms-label { display:flex; align-items:center; gap:6px; margin-top:6px; cursor:pointer; }
.join-error { color:#ff5555; margin-top:6px; }

/* Flex-Label-Zeile (z.B. details_general.php) – eigener Name, damit sie
   nicht mehr mit der Karten-Variante .event-info-box weiter unten kollidiert */
.event-info-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
}

.event-info-label {
    font-weight: bold;
    min-width: 80px;
    color: #aaa;
    flex-shrink: 0;
}
/* ============================================================
   AUS LIVE-CSS ÜBERNOMMEN (Sektion 25 STATUS/EVENT)
   ============================================================ */
/* .status-content → global in basis.css */

/* Status-Hero */
.status-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid var(--border-card);
    background: var(--bg-gray-transparent);
}
.status-hero__icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
}
.status-hero__title { font-weight: 700; font-size: 15px; color: var(--text-primary); }
.status-hero__hint  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.status-hero.status--open     { border-color: rgba(224,90,60,0.35);  background: rgba(224,90,60,0.08); }
.status-hero.status--open     .status-hero__icon { background: rgba(224,90,60,0.15); }
.status-hero.status--open     .status-hero__title { color: #ff8478; }

.status-hero.status--warning,
.status-hero.status--partial  { border-color: rgba(232,164,74,0.35); background: rgba(232,164,74,0.08); }
.status-hero.status--warning  .status-hero__icon,
.status-hero.status--partial  .status-hero__icon { background: rgba(232,164,74,0.15); }
.status-hero.status--warning  .status-hero__title,
.status-hero.status--partial  .status-hero__title { color: #f0c987; }

.status-hero.status--paid     { border-color: rgba(93,202,165,0.35); background: rgba(93,202,165,0.08); }
.status-hero.status--paid     .status-hero__icon { background: rgba(93,202,165,0.15); }
.status-hero.status--paid     .status-hero__title { color: #5DCAA5; }

/* 2-Spalten-Grid: Zahlungsübersicht | Zahlungsinformationen */
.status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.status-box {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    padding: 14px;
}
.status-box--dashed { border-style: dashed; }
.status-box__title { color: var(--text-primary); font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.status-box__text { font-size: 12px; color: var(--text-muted); line-height: 1.7; }

/* .status-row / .status-label / .status-value → global in basis.css */

@media (max-width: 700px) {
    .status-grid { grid-template-columns: 1fr; }
}

.orga-subtabs        { display: flex; gap: 8px; margin-bottom: 10px; }
.orga-subtabs button { padding: 6px 10px; border: none; background: var(--bg-raised); color: var(--text-primary); border-radius: var(--radius); cursor: pointer; }
.orga-subtabs button.active { background: var(--accent); color: var(--accent-text); }
.orga-subtab        { display: none; }
.orga-subtab.active { display: block; }

.participants-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 20px; }
.participant-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: var(--radius);
    background-color: rgba(60,60,80,0.35);
    border: 1px solid var(--border-card);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: #fff;
    min-width: 80px;
}
.participant-card:hover { background-color: rgba(70,70,100,0.45); transform: translateY(-2px); }
.participant-avatar { width: 45px; height: 45px; border-radius: 5px; object-fit: cover; margin-bottom: 6px; border: 2px solid var(--border-strong); }
.participant-name   { font-size: 0.9em; font-weight: 500; text-align: center; word-break: break-word; }
.participants-grid.paid .participant-card { border-color: rgba(93,202,165,0.4); }
.participants-grid.unpaid .participant-card { border-color: var(--border-card); }

/* ============================================================
   EVENT-DETAILS — allgemeines Layout
   ============================================================ */
.event-content { display: flex; flex-direction: column; }

.event-info-box {
    padding: 16px;
    background: var(--bg-gray-transparent);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    line-height: 1.6;
}
.event-info-box.joined { border-color: rgba(76,175,80,0.4); background: rgba(76,175,80,0.08); color: #7fd88a; }

.event-map { width: 100%; height: 600px; border-radius: var(--radius); overflow: hidden; }

.status--hint    { color: var(--text-muted); font-weight: 400; font-size: 0.9em; }
.status--open    { color: #e8a44a; }
.status--paid    { color: #5DCAA5; }
.status--over    { color: #7eb8ff; font-size: 0.85em; margin-left: 6px; }
.status--warning { color: #e8a44a; }
.status--partial { color: #7eb8ff; }

.unjoin-form { margin-top: 12px; }

.event-info-label { color: var(--text-muted); font-weight: 600; margin-right: 6px; }

/* ============================================================
   TICKET-KAUF-FLOW (details_join.php) — 4 Schritte
   ============================================================ */
.event-join-container { width: 100%; }

.join-step { display: flex; flex-direction: column; gap: 16px; }
.join-step--hidden { display: none; }

/* Aus Inline-Styles ausgelagert (details_join.php) */
.join-step-intro    { margin: 0 0 4px; }
.join-step-hint      { margin: 0; color: var(--text-muted); font-size: 13px; }
.join-seat-legend    { margin-top: 12px; }
.seat-held-infobox {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.5;
}
.join-seat-wrapper   { margin-top: 12px; }
.join-seat-label     { color: var(--text-muted); }
.join-seat-summary-row { margin: 4px 0; }
.join-error-msg      { color: #e74c3c; padding: 20px; }

.join-landing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}
.join-landing-welcome { display: flex; flex-direction: column; justify-content: center; }
.join-landing-choices {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (max-width: 640px) {
    .join-landing-grid { grid-template-columns: 1fr; }
}

.join-type-box {
    background: var(--bg-raised);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.join-type-box:hover { border-color: var(--border-strong); }
.join-type-box.selected {
    border-color: #99ff00;
    background: rgba(153,255,0,0.08);
}
.join-type-title { margin: 0 0 4px; font-size: 15px; }
.join-type-price { margin: 8px 0 0; font-size: 20px; font-weight: 600; }

/* .join-button → global in basis.css */

.join-error {
    color: #ff8478;
    background: rgba(231,76,60,0.08);
    border: 1px solid rgba(231,76,60,0.3);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 13px;
    margin-top: 8px;
}

.selection-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}
.product-selection-column { display: flex; flex-direction: column; gap: 12px; }

.product-info-box {
    padding: 12px 14px;
    background: rgba(224,177,63,0.06);
    border: 1px solid rgba(224,177,63,0.25);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.6;
}

.ticket-box, .product-box {
    padding: 14px;
    background: var(--bg-gray-transparent);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
}
.ticket-box p, .product-box > p { margin: 0 0 10px; }

.counter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.counter-controls button {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--border-card);
    background: var(--bg-raised);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.counter-controls button:hover { background: rgba(224,177,63,0.12); border-color: rgba(224,177,63,0.4); color: var(--accent); }
.product-count { min-width: 20px; text-align: center; font-weight: 600; font-size: 15px; }

.product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--border-card);
    font-size: 13px;
}
.product-item:first-of-type { border-top: none; }

.product-item-info, .product-counter .product-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.product-item-name { font-size: 13px; }
.product-item-price { font-size: 12px; color: var(--text-muted); }

/* Flatrate-Box, jede Tages-Box und die Summary-Box sind gleichberechtigte
   Kacheln in einem gemeinsamen responsiven Grid – so viele pro Reihe wie
   Platz vorhanden ist (natürlich 3-4 / 2 / 1 je nach Breite). Auf Mobile
   fällt alles in eine Spalte, Summary-Box landet dabei automatisch am
   Ende (letztes Element im Markup). */
/* Äußeres Layout: Content-Bereich (Boxen-Grid) links, Summary-Box als
   eigenständige Sidebar rechts – völlig unabhängige Höhe, wächst die
   Summary-Box (mehr Positionen), werden die anderen Boxen NICHT mit
   gestreckt, da sie in einem eigenen, separaten Grid liegen. */
.product-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}
.product-box-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .product-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .product-box-grid { grid-template-columns: 1fr; }
}

.product-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--border-card);
    font-size: 13px;
}
.product-counter:first-of-type { border-top: none; }

/* .switch → global in basis.css */

.receipt-box {
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
}
.receipt-box hr, .summary-box hr { border: none; border-top: 1px solid var(--border-card); margin: 10px 0; }
.summary-day { margin-top: 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.summary-day:first-child { margin-top: 0; }
.receipt-item, .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.step-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.step3-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.summary-box {
    padding: 16px;
    background: var(--bg-gray-transparent);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
}
.summary-box h4 { margin: 0 0 10px; color: var(--text-primary); }

.event-terms {
    max-height: 240px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.6;
    padding-right: 6px;
    margin-bottom: 12px;
}
.terms-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

@media (max-width: 700px) {
    .selection-grid, .step3-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ORGA: TEILNEHMER-VERWALTUNG (details_orga_guests.php)
   ============================================================ */
.overview-sums {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 10px;
}
.overview-sums b { color: var(--text-primary); }
.overview-sums .sum-paid { color: #5DCAA5; }
.overview-sums .sum-open { color: #e8a44a; }

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--bg-raised);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar { height: 100%; background: #5DCAA5; transition: width .4s ease; }

.user-progress-container {
    width: 100%;
    height: 5px;
    background: var(--bg-raised);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.user-progress-bar { height: 100%; background: #5DCAA5; transition: width .3s ease; }

.guests-table-wrap { overflow-x: auto; padding: 0; }
.guests-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.guests-table col.col-name       { width: 20%; }
.guests-table col.col-registered { width: 11%; }
.guests-table col.col-paid       { width: 16%; }
.guests-table col.col-open       { width: 13%; }
.guests-table col.col-status     { width: 7%; }
.guests-table col.col-agb        { width: 12%; }
.guests-table col.col-action     { width: 21%; }
.guests-table td.col-action, .guests-table th.col-action { text-align: right; }
.guests-table td.status, .guests-table th[data-sort="status"] { text-align: center; }
.guests-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-card);
}
.guests-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.guests-table th.sortable:hover { color: var(--text-primary); }
.guests-table th.sortable.sorted { color: var(--accent); }
.guests-table .sort-arrow { font-size: 9px; margin-left: 3px; }
.guests-table td {
    padding: 10px 12px;
    border-top: 1px solid var(--border-card);
    color: var(--text-secondary);
}
.guests-table tr.alt-row td { background: rgba(255,255,255,0.015); }
.guests-table tr:hover td { background: rgba(255,255,255,0.03); }

.guest-user-cell { display: flex; align-items: center; gap: 8px; }
.guest-avatar { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.cart-user-link { color: var(--text-primary); font-weight: 600; cursor: pointer; }
.cart-user-link:hover { color: var(--accent); }

.paid-input-group { display: flex; align-items: center; gap: 6px; }
.paid-input {
    width: 80px !important;
    height: 30px !important;
    padding: 0 6px;
    border: 1px solid var(--border-card);
    border-radius: 3px !important;
    background: rgba(0,0,0,0.3);
    color: #5DCAA5;
    font-weight: 600;
    text-align: right;
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
}
.paid-input:hover, .paid-input:focus { background: rgba(0,0,0,0.45); border-color: var(--accent); outline: none; }

.ok-btn {
    height: 30px;
    padding: 0 10px;
    border-radius: 3px;
    border: 1px solid rgba(224,177,63,0.4);
    background: rgba(224,177,63,0.12);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity .15s, background .15s;
}
.ok-btn:hover:not(:disabled) { background: rgba(224,177,63,0.22); }
.ok-btn:disabled { opacity: 0.35; cursor: default; }

.agb-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius);
    white-space: nowrap;
}
.agb-ok {
    background: rgba(93,202,165,0.12);
    border: 1px solid rgba(93,202,165,0.35);
    color: #5DCAA5;
}
.agb-missing {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-card);
    color: var(--text-muted);
}

.total-amount.white { color: var(--text-primary); }
.total-amount.red   { color: #e8a44a; }
.total-amount.green { color: #5DCAA5; }
.missing.red   { color: #e8a44a; font-weight: 600; margin-left: 4px; }
.missing.green { color: #5DCAA5; font-weight: 600; margin-left: 4px; }

.action-btn {
    padding: 6px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-card);
    background: var(--bg-raised);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.action-btn:hover { background: rgba(224,177,63,0.12); border-color: rgba(224,177,63,0.4); color: var(--accent); }

@media (max-width: 650px) {
    .guests-table th, .guests-table td { font-size: 12px; padding: 8px; }
    .paid-input { width: 60px; }
}

.guest-table-cart td { background: rgba(0,0,0,0.2); padding: 14px 16px; }
.user-cart-container { color: var(--text-secondary); font-size: 13px; }

/* ============================================================
   ORGA: CATERING-ÜBERSICHT (details_orga_catering.php)
   ============================================================ */
.catering-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 15px;
}
@media (max-width: 1100px) {
    .catering-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .catering-wrapper { grid-template-columns: 1fr; }
}

.catering-block {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    padding: 14px;
}

.catering-block__title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid var(--border-card);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.catering-block__title--accent { color: var(--accent); }

.catering-table { width: 100%; border-collapse: collapse; }
.catering-table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    text-align: center;
    padding: 0 6px 6px;
}
.catering-table th.catering-table__name { text-align: left; }
.catering-table td {
    padding: 7px 6px;
    border-top: 1px solid var(--border-card);
    font-size: 13px;
}
.catering-table tr:first-child td { border-top: none; }
.catering-table__name { color: var(--text-secondary); text-align: left; }
.catering-table__val { text-align: center; font-weight: 600; }
.catering-table__val--paid   { color: #5DCAA5; }
.catering-table__val--unpaid { color: #e8a44a; }
.catering-table__val--total  { color: var(--text-secondary); }

/* ============================================================
   ORGA: RUNDMAIL (details_orga_mail.php)
   ============================================================ */
.roundmail-form { display: block; gap: 16px; }
.roundmail-form .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.roundmail-form label { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.roundmail-form input,
.roundmail-form select {
    padding: 9px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-card);
    background: rgba(0,0,0,0.3);
    color: var(--text-primary);
}
.roundmail-form small { color: var(--text-muted); font-size: 11px; }

/* Empfänger-Karten: anklickbar zum Auswählen/Abwählen */
.mail-user-card { cursor: pointer; border: 2px solid transparent; }
.mail-user-card.selected {
    border-color: rgba(224,177,63,0.6);
    background: rgba(224,177,63,0.08);
}

.quill-editor-wrapper { display: flex; flex-direction: column; }

.success-message {
    padding: 12px 16px;
    background: rgba(93,202,165,0.08);
    border: 1px solid rgba(93,202,165,0.35);
    border-radius: var(--radius);
    color: #5DCAA5;
    margin-bottom: 16px;
}
.error {
    padding: 12px 16px;
    background: rgba(231,76,60,0.08);
    border: 1px solid rgba(231,76,60,0.3);
    border-radius: var(--radius);
    color: #ff8478;
    margin-bottom: 16px;
}

.mail-recipient-modes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mail-mode {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-card);
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.mail-mode:has(input:checked) {
    background: rgba(224,177,63,0.12);
    border-color: rgba(224,177,63,0.4);
    color: var(--accent);
}
.mail-mode input { accent-color: var(--accent); }
/* ============================================================
   SITZPLAN — gemeinsam für Sitzplan-Tab und Sitzplatz-Auswahl
   im Bestellprozess (details_seatplan.php + details_join.php)
   ============================================================ */
/* ===============================
   WRAPPER & SCROLL
================================ */
.seatplan-wrapper {
    background: rgba(0,0,0,0.3);
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}
.seatplan-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================
   GRID
================================ */
.seatplan-grid {
    display: grid;
    gap: 0;
    width: 100%;
}

.seatplan-loading { color: #888; padding: 40px; text-align: center; }

/* ===============================
   SEATS
================================ */
.seat {
    width: 100%;
    aspect-ratio: 1 / 1; /* bleibt quadratisch */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(8px, 1vw, 11px);
    font-weight: 700;
    cursor: default;
    transition: transform 0.12s, background 0.12s;
    position: relative;
    user-select: none;
}

.seat--free {
    background: rgba(46,204,113,0.15);
    color: #2ecc71;
    cursor: pointer;
}
.seat--free:hover {
    background: rgba(46,204,113,0.3);
    transform: scale(1.12);
}
.seat--free.seat--selectable:hover { background: rgba(108,123,255,0.2); }

.seat--economy {
    background: rgba(52,152,219,0.15);
    color: #3498db;
    cursor: pointer;
}
.seat--economy:hover {
    background: rgba(52,152,219,0.3);
    transform: scale(1.12);
}

/* Vorgemerkt (unbezahlt, mehrere User möglich) – additive Markierung
   zusätzlich zu frei/Sparplatz, blockiert nichts, nur ein Hinweis */
.seat--held::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f39c12;
}

.seat--mine {
    background: #99ff00;
    color: #1a1a1a;
    cursor: pointer;
}
.seat--mine:hover {
    background: #85e000;
    transform: scale(1.1);
}

.seat--occupied {
    background: #ff1a1a;
    color: #fff;
    cursor: default;
}

.seat--vip {
    background: rgba(241,196,15,0.15);
    color: #f1c40f;
    cursor: pointer;
}
.seat--vip:hover     { background: rgba(241,196,15,0.3); transform: scale(1.1); }
.seat--vip.seat--occupied {
    background: rgba(241,196,15,0.1);
    color: rgba(241,196,15,0.4);
    cursor: default;
}
.seat--vip-occupied {
    background: rgba(241,196,15,0.08);
    color: rgba(241,196,15,0.4);
    cursor: default;
}

.seat--blocked {
    background: rgba(255,255,255,0.04);
    color: #444;
    cursor: not-allowed;
}

.seat--stage {
    background: rgba(52,152,219,0.1);
    color: #3498db;
    cursor: default;
    font-size: 9px;
    letter-spacing: 0.05em;
}

.seat--wall {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.4);
    cursor: default;
}

.seat--table {
    background: rgba(139,90,43,0.25);
    color: rgba(210,160,100,0.9);
    font-size: 14px;
    cursor: default;
}

.seat--door {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    cursor: default;
}

.seat--aisle {
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.15);
    cursor: default;
}

.seat--label {
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-size: clamp(8px, 1.2vw, 13px);
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: default;
}

.seat--empty { background: transparent; cursor: default; }

/* Admin: ausgewählt */
.seat--admin-selected {
    outline: 3px solid #f39c12;
    outline-offset: 2px;
}

/* ===============================
   LEGENDE
================================ */
.seatplan-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #aaa;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.seat-demo {
    width: 20px; height: 20px;
    position: relative;
}
.seat-demo.seat--free     { background: rgba(46,204,113,0.15); }
.seat-demo.seat--economy  { background: rgba(52,152,219,0.15); }
.seat-demo.seat--mine     { background: #99ff00; }
.seat-demo.seat--occupied { background: #ff1a1a; }
.seat-demo.seat--vip      { background: rgba(241,196,15,0.15); }
.seat-demo.seat--blocked  { background: rgba(255,255,255,0.04); }
.seat-demo.seat--stage    { background: rgba(52,152,219,0.1); }

/* ===============================
   STATUS BAR
================================ */
.seatplan-status-bar {
    padding: 10px 16px;
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.seatplan-status-bar.status--ok      { background: rgba(46,204,113,0.1); color: #2ecc71; }
.seatplan-status-bar.status--warn    { background: rgba(241,196,15,0.1); color: #f1c40f; }
.seatplan-status-bar.status--locked  { background: rgba(231,76,60,0.1);  color: #e74c3c; }

/* ===============================
   TOOLTIP
================================ */
.seat-tooltip {
    position: fixed;
    background: rgba(20,20,30,0.95);
    padding: 8px 12px;
    font-size: 12px;
    color: #ddd;
    pointer-events: none;
    z-index: 9999;
    max-width: 180px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* ===============================
   ADMIN GUEST PANEL
================================ */
.admin-guest-panel {
    background: rgba(255,255,255,0.03);
    padding: 14px;
    margin-bottom: 14px;
}
.admin-guest-panel-title { font-size: 13px; font-weight: 600; color: #aaa; margin-bottom: 10px; }
.admin-guest-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-y: auto;
}
.admin-guest-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.05);
    font-size: 12px;
    color: #ddd;
    cursor: pointer;
    transition: 0.15s;
    user-select: none;
}
.admin-guest-chip:hover           { background: rgba(108,123,255,0.15); }
.admin-guest-chip.selected        { background: rgba(108,123,255,0.3); color: #fff; }
.admin-guest-chip .chip-badge {
    background: #6c7bff;
    color: #fff;
    padding: 1px 6px;
    font-size: 10px;
}
.admin-guest-chip .chip-remain {
    background: rgba(46,204,113,0.3);
    color: #2ecc71;
    padding: 1px 6px;
    font-size: 10px;
}
.admin-guest-chip .chip-remain.none { background: rgba(231,76,60,0.2); color: #e74c3c; }

.guest-group-header {
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    color: #2ecc71;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 2px 2px;
    margin-top: 4px;
}
.guest-group-header--unpaid { color: #e67e22; }

.admin-guest-chip--unpaid {
    opacity: 0.65;
    background: rgba(230,126,34,0.06);
}
.admin-guest-chip--unpaid:hover {
    background: rgba(230,126,34,0.1);
}
.chip-badge--unpaid { background: rgba(230,126,34,0.5); }
.chip-unpaid {
    background: rgba(230,126,34,0.2);
    color: #e67e22;
    padding: 1px 6px;
    font-size: 10px;
}

/* Vollhöhen-Variante des Sitzplan-Containers (Sitzplan-Übersichts-Tab) */
.seatplan_content2 {
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
}