/* =========================================================================
   EisBär-Manager — Portal-Grundstil (Redesign 2026)
   Moderne CI-Farbwelt: Orange (Aktion) · Pantone 5415 „Eis-Blau" (Akzent) ·
   Schwarz/Grau. Schriften: Inter (Text) + Sora (Überschriften), selbstgehostet.
   Hell/Dunkel via [data-theme] + prefers-color-scheme. Wird von Kunden-Portal
   (layout.phtml) UND Admin-Backend (admin.phtml) geladen.

   Token-Namen aus der Alt-Version bleiben erhalten (--accent, --ink, --muted,
   --line, --blue …), damit bestehende Views/Regeln weiter funktionieren; neue
   Glas-/Feld-Tokens (--panel, --field, --ice …) kommen hinzu.
   ========================================================================= */

/* ============================== TOKENS: HELL ============================= */
:root {
	/* Marke */
	--accent:#e95b13;             /* CI-Orange (RGB 233,91,19) — Aktion */
	--accent-2:#ff7d3c;           /* Orange hell (Verlauf) */
	--accent-dk:#c84e0a;
	--accent-soft:rgba(233,91,19,.10);
	--ice:#5b7f95;                /* Pantone 5415 C — „Eis-Blau" */
	--ice-deep:#456579;
	--blue:var(--ice);            /* Alias für Alt-Code */
	--blue-soft:rgba(91,127,149,.12);
	--slate:#42454a;
	--slate-soft:rgba(66,69,74,.08);
	--navy:#1e2a33;
	--navy-soft:rgba(30,42,51,.08);

	/* Flächen */
	--bg:#eaedf0;                 /* Seitenhintergrund */
	--surface:#ffffff;            /* opake Kartenbasis (Alt-Views) */
	--bg-soft:#f4f6f8;
	--bg-soft2:#e7ebee;
	--panel:rgba(255,255,255,.72);          /* Glas-Panel */
	--panel-2:rgba(255,255,255,.55);
	--panel-border:rgba(16,21,26,.10);
	--field:rgba(255,255,255,.90);
	--field-border:rgba(16,21,26,.14);
	--field-focus:rgba(91,127,149,.14);

	/* Text */
	--ink:#10151a;
	--ink-2:#39424b;
	--muted:#697077;
	--faint:#959b9d;              /* CI-Grau */
	--head-ink:#10151a;
	--line:#e0e5ea;

	/* Status */
	--danger:#d64545;
	--err-bg:#fdecec;
	--err-border:#e6b8b8;
	--err-ink:#b02a2a;
	--ok:#1f9d43;
	--ok-soft:rgba(31,157,67,.12);

	/* Form/Effekt */
	--radius-lg:26px;
	--radius:18px;
	--radius-sm:12px;
	--glass-blur:16px;
	--shadow:0 24px 60px -28px rgba(16,21,26,.30);
	--shadow-sm:0 10px 30px -18px rgba(16,21,26,.22);

	--font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--font-head:"Sora",var(--font-sans);

	color-scheme:light;
}

/* ============================== TOKENS: DUNKEL =========================== */
:root[data-theme="dark"] {
	--accent:#ef6a24;
	--accent-2:#ff9350;
	--accent-dk:#e95b13;
	--accent-soft:rgba(239,106,36,.16);
	--ice:#7ea7bf;
	--ice-deep:#5b7f95;
	--blue-soft:rgba(126,167,191,.16);
	--slate:#3a4048;
	--navy:#0f1519;

	--bg:#05080b;
	--surface:#0f151b;
	--bg-soft:#0b1015;
	--bg-soft2:#161d25;
	--panel:rgba(255,255,255,.045);
	--panel-2:rgba(255,255,255,.03);
	--panel-border:rgba(255,255,255,.10);
	--field:rgba(255,255,255,.05);
	--field-border:rgba(255,255,255,.13);
	--field-focus:rgba(91,127,149,.16);

	--ink:#eef2f4;
	--ink-2:#c2cbd0;
	--muted:#959b9d;
	--faint:#6a7075;
	--head-ink:#eef2f4;
	--line:#242c34;

	--danger:#e46060;
	--err-bg:rgba(228,96,96,.14);
	--err-border:rgba(228,96,96,.40);
	--err-ink:#f0a0a0;
	--ok:#34c759;
	--ok-soft:rgba(52,199,89,.16);

	--shadow:0 30px 80px -30px rgba(0,0,0,.60);
	--shadow-sm:0 14px 40px -24px rgba(0,0,0,.50);
	color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--accent:#ef6a24;
		--accent-2:#ff9350;
		--accent-dk:#e95b13;
		--accent-soft:rgba(239,106,36,.16);
		--ice:#7ea7bf;
		--ice-deep:#5b7f95;
		--blue-soft:rgba(126,167,191,.16);
		--slate:#3a4048;
		--navy:#0f1519;

		--bg:#05080b;
		--surface:#0f151b;
		--bg-soft:#0b1015;
		--bg-soft2:#161d25;
		--panel:rgba(255,255,255,.045);
		--panel-2:rgba(255,255,255,.03);
		--panel-border:rgba(255,255,255,.10);
		--field:rgba(255,255,255,.05);
		--field-border:rgba(255,255,255,.13);
		--field-focus:rgba(91,127,149,.16);

		--ink:#eef2f4;
		--ink-2:#c2cbd0;
		--muted:#959b9d;
		--faint:#6a7075;
		--head-ink:#eef2f4;
		--line:#242c34;

		--danger:#e46060;
		--err-bg:rgba(228,96,96,.14);
		--err-border:rgba(228,96,96,.40);
		--err-ink:#f0a0a0;
		--ok:#34c759;
		--ok-soft:rgba(52,199,89,.16);

		--shadow:0 30px 80px -30px rgba(0,0,0,.60);
		--shadow-sm:0 14px 40px -24px rgba(0,0,0,.50);
		color-scheme:dark;
	}
}

/* ============================== RESET / BASE ============================= */
* { padding:0; margin:0; box-sizing:border-box; }

html, body { height:100%; }

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	transition: background .5s ease, color .35s ease;
}

/* Dezente Aurora im Seitenhintergrund (CI: Eis-Blau · Grau · Orange) */
body::before {
	content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
	background:
		radial-gradient(48% 40% at 12% -2%, rgba(91,127,149,.20), transparent 60%),
		radial-gradient(42% 36% at 92% 4%, rgba(233,91,19,.12), transparent 60%),
		radial-gradient(50% 45% at 78% 100%, rgba(91,127,149,.14), transparent 62%);
}
:root[data-theme="dark"] body::before {
	background:
		radial-gradient(50% 42% at 12% -2%, rgba(91,127,149,.28), transparent 60%),
		radial-gradient(44% 38% at 92% 4%, rgba(233,91,19,.16), transparent 60%),
		radial-gradient(52% 48% at 80% 100%, rgba(91,127,149,.18), transparent 62%);
}

h1, h2, h3, h4, .brand-name, legend { font-family: var(--font-head); }

a {
	color: var(--ice);
	text-decoration: none;
	transition: color .2s;
}
a:hover { color: var(--accent); text-decoration: underline; }

/* ============================== KOPFZEILE (Bar) ========================== */
#topbar {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 12px clamp(16px, 4vw, 40px);
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--panel-border);
}
#topbar .brand { display:flex; align-items:center; gap:12px; }
#topbar .brand a { display:flex; align-items:center; gap:12px; color: var(--head-ink); }
#topbar .brand a:hover { text-decoration:none; }
#topbar .brand .mark {
	width:40px; height:40px; border-radius:12px; overflow:hidden; display:grid; place-items:center; font-size:1.3rem;
	background: linear-gradient(150deg, var(--panel), var(--panel-2));
	border: 1px solid var(--panel-border);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
#topbar .brand .mark img { width:100%; height:100%; object-fit:cover; display:block; }
#topbar .brand-name { font-weight:800; font-size:1.12rem; letter-spacing:-.02em; }
#topbar .brand-name span { color: var(--accent); }

.head-actions { display:flex; align-items:center; gap:10px; }

/* Sprach-Pills (DE/EN) */
.seg { display:flex; gap:3px; padding:4px; border-radius:999px; background:var(--field); border:1px solid var(--field-border); }
.seg a, .seg button {
	border:none; background:transparent; color:var(--muted); font:inherit;
	font-size:.82rem; font-weight:600; padding:6px 13px; border-radius:999px;
	cursor:pointer; transition:.18s; line-height:1; text-decoration:none; display:inline-flex; align-items:center;
}
.seg a:hover, .seg button:hover { color:var(--ink); text-decoration:none; }
.seg a.on, .seg button.on { background:linear-gradient(135deg,var(--ice),var(--ice-deep)); color:#fff; }

/* Theme-Umschalter */
.theme-toggle, .tt {
	display:inline-flex; align-items:center; gap:8px;
	border:1px solid var(--field-border); background:var(--field); color:var(--ink);
	padding:8px 15px; border-radius:999px; font-family:inherit; font-size:.84rem; font-weight:600;
	cursor:pointer; transition:.2s; line-height:1;
}
.theme-toggle:hover, .tt:hover { border-color:var(--ice); color:var(--ink); transform:translateY(-1px); }

/* ============================== INHALTS-CONTAINER ======================== */
#content {
	position: relative; z-index: 1;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(22px, 4vw, 44px) clamp(16px, 4vw, 40px) 64px;
	color: var(--ink);
	text-align: left;
}
/* Legacy-Alias: alte Views setzten #content direkt mit .default */
#content.narrow { max-width: 640px; }

#stage { text-align:left; color:var(--ink); padding: 0; }
#stage h2 { font-weight:800; letter-spacing:-.02em; color:var(--head-ink); }

h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight:800; letter-spacing:-.02em; color: var(--head-ink); margin-bottom:14px; }
h3 { color: var(--head-ink); }
p { color: var(--ink-2); }

/* ============================== MOBILE-GRID (Legacy) ===================== */
#mygrid.fullscreen { position:fixed; top:0; left:0; width:100%; height:100%; }
html.fullscreen, html.fullscreen body, html.fullscreen iframe {
	width:100%; height:100%; padding:0; margin:0; border:none; overflow:hidden;
}

.columnicon { display:inline-block; width:16px; height:16px; }
.x-selectable, .x-selectable * { -moz-user-select:text!important; -khtml-user-select:text!important; }

/* ============================== SONSTIGE ELEMENTE ======================== */
.logout {
	float:right; display:inline-flex; align-items:center; height:32px; line-height:32px;
	padding-left:32px; color:var(--ink-2); text-decoration:none; cursor:pointer; font-weight:600;
}
.logout:hover { color:var(--accent); text-decoration:none; }

/* reservierte Codes (Tabelle) */
table.reserved_codes {
	width:500px; max-width:100%; margin:20px auto; border-collapse:collapse;
	border:1px solid var(--panel-border); border-radius:var(--radius-sm); overflow:hidden;
	box-shadow:var(--shadow-sm); background: var(--panel);
	backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
table.reserved_codes td {
	color:var(--ink-2); padding:11px 14px; border-bottom:1px solid var(--panel-border); text-align:left;
}
table.reserved_codes tr:first-child td {
	background:linear-gradient(135deg,var(--ice),var(--ice-deep)); color:#fff; font-weight:700;
	font-family:var(--font-head);
}
table.reserved_codes tr:last-child td { border-bottom:none; }

table.var-info { width:100%; }
table.var-info td { width:50%; padding:3px 0; }

/* Dezenter Hinweis auf das neue Kundenkonto (Portal-Startseite) */
.konto-hinweis {
	display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
	margin:0 0 22px; padding:12px 16px; font-size:13px; color:var(--muted);
	background: var(--accent-soft); border:1px solid var(--panel-border);
	border-left:3px solid var(--accent); border-radius:var(--radius-sm);
}
.konto-hinweis a { color:var(--accent); font-weight:700; text-decoration:none; white-space:nowrap; }
.konto-hinweis a:hover { text-decoration:underline; }