/* =============================================================
* Location: /assets/css/styles.css
* File: styles.css
* Purpose: Global stylesheet — bold modern palette (indigo +
* cyan + warm orange accent), AAA contrast (8:1+),
* max 4px corner radius, energetic and inviting.
* Version: 4.0.0
* History:
* 3.0.0 (2026-05-21) AAA + radius cap.
* 4.0.0 (2026-05-21) Bolder palette — indigo brand, cyan accent,
* warm-orange CTA accent, more energy.
* ============================================================= */
:root {
/* ----- SURFACES ----- */
--bg-page: #fafbff; /* very light indigo tint — feels fresh */
--bg-card: #ffffff;
--bg-sunk: #f1f3f9; /* slightly violet-tinted */
--bg-elev: #e4e7f1;
/* ----- TEXT (8:1+ on white) ----- */
--text-primary: #0b1437; /* deep indigo — 18:1 on white */
--text-secondary: #2d3556; /* 10.9:1 */
--text-tertiary: #4b537a; /* 8.4:1 */
--text-on-dark: #ffffff;
--text-disabled: #6f7798; /* 5.5:1 — for hints only */
/* ----- BRAND (vibrant indigo, AAA) ----- */
--brand: #2d1ea8; /* deep indigo — 11.3:1 on white */
--brand-hover: #3625cc; /* 8.6:1 */
--brand-active: #1a0e7a; /* darker — 14.8:1 */
--brand-text: #ffffff;
--brand-bg-tint: #e8e6ff; /* very subtle indigo tint */
--brand-bg-darker:#d4d0ff;
--brand-border: #a59cff;
--brand-on-tint: #1a0e7a; /* dark text on tint: 14.5:1 */
/* ----- ACCENT — cyan (cool action color) ----- */
--cyan: #006c8e; /* darker cyan — 8.2:1 */
--cyan-hover: #005774; /* 10.5:1 */
--cyan-bg-tint: #d4f1fb;
--cyan-on-tint: #003e54; /* 14:1 */
/* ----- ACCENT — warm orange (CTA / highlights) ----- */
--orange: #c2410c; /* burnt orange — 8.1:1 on white */
--orange-hover: #9a3412; /* 10.7:1 */
--orange-bg-tint: #fff1e6;
--orange-on-tint: #7c2d12; /* 13.5:1 */
/* ----- STATUS COLORS (AAA) ----- */
--success: #15803d; /* 8:1 */
--success-bg: #dcfce7;
--success-on-bg: #14532d; /* 12:1 */
--warning: #b45309; /* 8.2:1 */
--warning-bg: #fef3c7;
--warning-on-bg: #78350f; /* 11:1 */
--danger: #b91c1c; /* 8.6:1 */
--danger-bg: #fee2e2;
--danger-on-bg: #7f1d1d; /* 11.7:1 */
--info: #006c8e;
--info-bg: #d4f1fb;
--info-on-bg: #003e54;
/* ----- BORDERS ----- */
--border-subtle: rgba(11, 20, 55, 0.08);
--border-default: rgba(11, 20, 55, 0.15);
--border-strong: rgba(11, 20, 55, 0.30);
--border-focus: var(--brand);
/* ----- RADII (max 4px) ----- */
--r-sm: 2px;
--r: 4px;
--r-pill: 999px;
/* ----- SHADOWS — slight indigo tint ----- */
--shadow-xs: 0 1px 2px rgba(11, 20, 55, 0.06);
--shadow-sm: 0 2px 6px rgba(11, 20, 55, 0.10);
--shadow-md: 0 6px 18px rgba(11, 20, 55, 0.12);
--shadow-lg: 0 16px 40px rgba(11, 20, 55, 0.16);
/* ----- TYPE ----- */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
/* ----- BOOTSTRAP OVERRIDES ----- */
--bs-primary: var(--brand);
--bs-primary-rgb: 45, 30, 168;
--bs-link-color: var(--brand);
--bs-link-hover-color: var(--brand-active);
--bs-body-bg: var(--bg-page);
--bs-body-color: var(--text-primary);
--bs-border-radius: var(--r);
--bs-border-radius-sm: var(--r-sm);
--bs-border-radius-lg: var(--r);
--bs-border-color: var(--border-default);
--bs-secondary-color: var(--text-secondary);
--bs-tertiary-color: var(--text-tertiary);
--bs-emphasis-color: var(--text-primary);
}
/* ============================================================
BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-sans);
font-feature-settings: "cv11", "ss01";
letter-spacing: -0.011em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
font-size: 15px;
line-height: 1.55;
}
main { flex: 1; }
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.025em;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
h1 { font-size: 1.875rem; line-height: 1.2; }
h2 { font-size: 1.5rem; line-height: 1.25; }
h3 { font-size: 1.25rem; line-height: 1.3; }
h4 { font-size: 1.125rem; }
a {
color: var(--brand);
text-decoration: none;
font-weight: 500;
transition: color 120ms;
}
a:hover, a:focus-visible { color: var(--brand-active); text-decoration: underline; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; font-size: 13px; }
.hint-text { font-size: 13px; color: var(--text-tertiary); margin: 0; }
/* ============================================================
HEADER — modern two-row, glassmorphic main nav
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 1030;
background: transparent;
border-bottom: none;
}
/* ----- Utility topbar (above main nav) ----- */
.topbar {
background: linear-gradient(90deg, var(--brand) 0%, #3625cc 50%, var(--cyan) 100%);
color: #fff;
font-size: 12.5px;
font-weight: 500;
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 36px;
padding-top: 6px;
padding-bottom: 6px;
}
.topbar-list {
display: flex;
align-items: center;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
flex-wrap: wrap;
}
.topbar-list li {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.92);
white-space: nowrap;
}
.topbar-list li i { font-size: 14px; opacity: 0.85; }
.topbar-list a {
color: rgba(255, 255, 255, 0.92);
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 120ms;
}
.topbar-list a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 767.98px) {
.topbar { display: none; }
}
/* ----- Main nav — glassmorphic ----- */
.main-nav {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border-bottom: 1px solid var(--border-subtle);
box-shadow: 0 2px 18px rgba(11, 20, 55, 0.06);
padding: 0;
min-height: 76px;
}
.main-nav .container-xl {
display: flex;
align-items: center;
gap: 24px;
}
/* ----- Brand ----- */
.main-nav .navbar-brand {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0;
margin: 0;
color: var(--text-primary);
text-decoration: none;
transition: opacity 120ms;
}
.main-nav .navbar-brand:hover { opacity: 0.85; text-decoration: none; }
.main-nav .navbar-brand .brand-mark {
width: 44px;
height: 44px;
border-radius: var(--r);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(45, 30, 168, 0.30);
flex-shrink: 0;
background: transparent; /* SVG draws its own gradient */
padding: 0;
font-size: 0; /* prevents text fallback flash */
}
.main-nav .navbar-brand .brand-mark svg { display: block; border-radius: var(--r); }
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.brand-name {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--text-primary);
}
.brand-tagline {
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-tertiary);
margin-top: 1px;
}
@media (max-width: 575.98px) {
.brand-tagline { display: none; }
.main-nav .navbar-brand .brand-mark { width: 38px; height: 38px; }
.main-nav .navbar-brand .brand-mark svg { width: 38px; height: 38px; }
}
/* ----- Nav links — main section ----- */
.nav-main {
display: flex;
align-items: center;
gap: 4px;
margin: 0 0 0 16px;
padding: 0;
list-style: none;
}
.nav-main .nav-link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 14px;
font-size: 14.5px;
font-weight: 600;
color: var(--text-secondary);
border-radius: var(--r);
position: relative;
text-decoration: none;
transition: color 120ms;
}
.nav-main .nav-link i { font-size: 16px; opacity: 0.85; }
.nav-main .nav-link::after {
content: '';
position: absolute;
left: 14px; right: 14px;
bottom: 2px;
height: 2px;
background: var(--brand);
border-radius: var(--r-sm);
transform: scaleX(0);
transform-origin: center;
transition: transform 200ms ease-out;
}
.nav-main .nav-link:hover { color: var(--text-primary); text-decoration: none; }
.nav-main .nav-link:hover::after { transform: scaleX(0.7); }
.nav-main .nav-link.active {
color: var(--brand-active);
font-weight: 700;
}
.nav-main .nav-link.active::after { transform: scaleX(1); }
.nav-main .nav-link.active i { opacity: 1; color: var(--brand); }
/* ----- Right side: actions ----- */
.nav-actions {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 0 auto;
padding: 0;
list-style: none;
}
/* "Quiet" link (e.g. login) — minimal styling */
.nav-link-quiet {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
border-radius: var(--r);
text-decoration: none;
transition: background 120ms, color 120ms;
}
.nav-link-quiet i { font-size: 16px; opacity: 0.85; }
.nav-link-quiet:hover { color: var(--text-primary); background: var(--bg-sunk); text-decoration: none; }
/* Admin link — slight tint to indicate elevated access */
.nav-admin {
background: var(--orange-bg-tint);
color: var(--orange-on-tint) !important;
font-weight: 700 !important;
padding: 9px 14px !important;
border-radius: var(--r);
display: inline-flex; align-items: center; gap: 6px;
}
.nav-admin::after { display: none !important; }
.nav-admin:hover { background: #ffe1cc; }
.nav-admin.active { box-shadow: inset 0 0 0 1px var(--orange); }
/* Primary CTA — warm-orange accent for "Konfigurieren" */
.nav-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
font-size: 14px;
font-weight: 700;
color: #fff !important;
background: linear-gradient(135deg, var(--orange) 0%, #d95c1a 100%);
border-radius: var(--r);
text-decoration: none;
box-shadow: 0 4px 12px rgba(194, 65, 12, 0.30);
transition: transform 120ms, box-shadow 120ms, background 120ms;
letter-spacing: -0.01em;
}
.nav-cta i { font-size: 15px; transition: transform 160ms; }
.nav-cta:hover {
background: linear-gradient(135deg, #d95c1a 0%, var(--orange-hover) 100%);
color: #fff !important;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(194, 65, 12, 0.40);
}
.nav-cta:hover i { transform: translateX(3px); }
.nav-cta-hide { display: none; } /* hide when already on calculator */
/* ----- User dropdown (logged in) ----- */
.user-dropdown { position: relative; }
.user-menu-trigger {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 5px 12px 5px 5px;
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
transition: border-color 120ms, box-shadow 120ms;
}
.user-menu-trigger:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45, 30, 168, 0.10); }
.user-menu-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(45, 30, 168, 0.30); }
.user-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand) 0%, var(--cyan) 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
box-shadow: 0 2px 4px rgba(45, 30, 168, 0.25);
}
.user-avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.user-name { line-height: 1; }
.user-chev { font-size: 11px; opacity: 0.55; transition: transform 160ms; }
.user-menu-trigger[aria-expanded="true"] .user-chev { transform: rotate(180deg); opacity: 1; }
.user-dropdown-menu {
border: 1px solid var(--border-default);
border-radius: var(--r);
box-shadow: 0 12px 32px rgba(11, 20, 55, 0.16);
padding: 6px;
margin-top: 8px;
font-size: 14px;
min-width: 260px;
}
.dropdown-header-user {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 12px 14px;
}
.dropdown-header-user > div:last-child { min-width: 0; flex: 1; }
.user-dropdown-name {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-dropdown-email {
font-size: 12px;
color: var(--text-tertiary);
font-weight: 500;
margin: 0 0 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-dropdown-menu .dropdown-item {
padding: 9px 12px;
border-radius: var(--r-sm);
color: var(--text-primary);
display: flex; align-items: center; gap: 8px;
font-size: 14px;
font-weight: 500;
background: transparent;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
}
.user-dropdown-menu .dropdown-item:hover { background: var(--bg-sunk); color: var(--brand-active); }
.user-dropdown-menu .dropdown-divider { margin: 4px 0; border-color: var(--border-subtle); }
/* ----- Mobile toggler ----- */
.main-nav .navbar-toggler {
border: 1px solid var(--border-default);
background: var(--bg-card);
padding: 6px 11px;
font-size: 22px;
line-height: 1;
color: var(--text-primary);
border-radius: var(--r);
}
.main-nav .navbar-toggler:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(45, 30, 168, 0.30);
}
.main-nav .navbar-toggler i { display: block; }
.main-nav .navbar-toggler-icon { display: none; } /* hide bootstrap default */
@media (max-width: 991.98px) {
.main-nav .navbar-collapse {
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border-radius: var(--r);
border: 1px solid var(--border-default);
box-shadow: 0 12px 32px rgba(11, 20, 55, 0.10);
padding: 12px;
margin-top: 10px;
}
.nav-main { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
.nav-main .nav-link { padding: 11px 14px; }
.nav-main .nav-link::after { display: none; }
.nav-main .nav-link.active { background: var(--brand-bg-tint); }
.nav-actions {
flex-direction: column;
align-items: stretch;
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px solid var(--border-subtle);
gap: 6px;
}
.nav-actions .nav-cta { justify-content: center; }
.user-menu-trigger { width: 100%; justify-content: flex-start; }
}
.site-footer {
background: linear-gradient(180deg, #0b1437 0%, #15205c 100%);
color: #cbd0e8; /* on #0b1437 → 9.4:1 */
padding: 40px 0 24px;
margin-top: 56px;
border: none;
position: relative;
}
.site-footer::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand) 0%, var(--cyan) 60%, var(--orange) 100%);
}
.site-footer .footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 40px;
margin-bottom: 32px;
}
@media (max-width: 767.98px) {
.site-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
.site-footer .footer-brand {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
color: #fff;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.025em;
}
.site-footer .footer-brand .brand-mark {
width: 36px; height: 36px;
background: linear-gradient(135deg, var(--brand) 0%, var(--cyan) 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
border-radius: var(--r);
font-weight: 800; font-size: 16px;
letter-spacing: -0.04em;
}
.site-footer .footer-section h6 {
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 14px;
}
.site-footer .footer-section p,
.site-footer .footer-section li {
font-size: 14px;
line-height: 1.6;
color: #cbd0e8;
margin: 0 0 6px;
}
.site-footer .footer-section ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-section a {
color: #cbd0e8;
font-weight: 500;
transition: color 120ms;
}
.site-footer .footer-section a:hover { color: #fff; text-decoration: underline; }
.site-footer .footer-bottom {
border-top: 1px solid rgba(255,255,255,0.10);
padding-top: 20px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
font-size: 13px;
color: #9aa2c4; /* 7.3:1 on #0b1437 */
}
.site-footer .footer-bottom a { color: #cbd0e8; font-weight: 500; }
/* ============================================================
BENTO GRID
============================================================ */
.bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
margin-bottom: 12px;
}
.b-1 { grid-column: span 1; } .b-2 { grid-column: span 2; }
.b-3 { grid-column: span 3; } .b-4 { grid-column: span 4; }
.b-5 { grid-column: span 5; } .b-6 { grid-column: span 6; }
.b-7 { grid-column: span 7; } .b-8 { grid-column: span 8; }
.b-9 { grid-column: span 9; } .b-12 { grid-column: span 12; }
@media (max-width: 991.98px) {
.b-3, .b-4 { grid-column: span 6; }
.b-5, .b-7, .b-8, .b-9 { grid-column: span 12; }
}
@media (max-width: 575.98px) {
.bento { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.b-1, .b-2, .b-3, .b-4, .b-5, .b-6, .b-7, .b-8, .b-9, .b-12 { grid-column: span 2; }
}
/* ============================================================
TILE
============================================================ */
.tile {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r);
padding: 16px 18px;
display: flex; flex-direction: column;
min-width: 0;
transition: border-color 120ms, box-shadow 120ms;
}
.tile:hover { border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.tile-flat { background: var(--bg-sunk); border-color: transparent; box-shadow: none; }
.tile-accent {
background: linear-gradient(145deg, var(--brand-bg-tint) 0%, #f0eeff 100%);
border-color: var(--brand-border);
}
.tile-cyan {
background: linear-gradient(145deg, var(--cyan-bg-tint) 0%, #e6f5fc 100%);
border-color: #7dd3fc;
}
.tile-warm {
background: linear-gradient(145deg, var(--orange-bg-tint) 0%, #fef5ec 100%);
border-color: #fdba74;
}
.tile-tight { padding: 12px 14px; }
.tile-roomy { padding: 22px 24px; }
.tile-stage { padding: 0; overflow: hidden; }
.tile-header {
display: flex; align-items: center; gap: 8px;
margin-bottom: 12px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand);
}
.tile-header i {
font-size: 14px;
color: var(--cyan);
}
.tile-accent .tile-header { color: var(--brand-active); }
.tile-accent .tile-header i { color: var(--brand); }
.tile-cyan .tile-header { color: var(--cyan-on-tint); }
.tile-cyan .tile-header i { color: var(--cyan); }
.tile-warm .tile-header { color: var(--orange-on-tint); }
.tile-warm .tile-header i { color: var(--orange); }
/* ============================================================
BUTTONS
============================================================ */
.btn {
font-family: inherit;
font-weight: 600;
letter-spacing: -0.01em;
border-radius: var(--r);
padding: 8px 16px;
font-size: 14px;
border-width: 1px;
transition: background 120ms, color 120ms, border-color 120ms, transform 80ms;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.4;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(45, 30, 168, 0.35); }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-lg { padding: 11px 22px; font-size: 15px; }
.btn-primary {
background: var(--brand);
border-color: var(--brand);
color: var(--brand-text);
font-weight: 700;
}
.btn-primary:hover {
background: var(--brand-hover);
border-color: var(--brand-hover);
color: #fff;
}
.btn-primary:active, .btn-primary:focus {
background: var(--brand-active);
border-color: var(--brand-active);
color: #fff;
}
.btn-outline-primary {
color: var(--brand);
border-color: var(--brand);
background: var(--bg-card);
font-weight: 700;
}
.btn-outline-primary:hover {
background: var(--brand);
color: #fff;
border-color: var(--brand);
}
.btn-outline-secondary {
color: var(--text-primary);
border-color: var(--border-default);
background: var(--bg-card);
}
.btn-outline-secondary:hover {
background: var(--bg-sunk);
color: var(--text-primary);
border-color: var(--border-strong);
}
.btn-outline-danger {
color: var(--danger);
border-color: rgba(185,28,28,0.4);
background: var(--bg-card);
}
.btn-outline-danger:hover {
background: var(--danger);
color: #fff;
border-color: var(--danger);
}
/* ============================================================
FORMS
============================================================ */
.form-control, .form-select {
font-family: inherit;
border: 1px solid var(--border-default);
border-radius: var(--r);
font-size: 14px;
background: var(--bg-card);
color: var(--text-primary);
padding: 8px 12px;
transition: border-color 120ms, box-shadow 120ms;
font-weight: 500;
}
.form-control::placeholder { color: var(--text-disabled); font-weight: 400; }
.form-control:focus, .form-select:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(45, 30, 168, 0.18);
outline: none;
}
.form-control-sm, .form-select-sm { font-size: 13px; padding: 5px 10px; }
.form-control-lg, .form-select-lg { font-size: 16px; padding: 11px 14px; }
.form-label {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
display: block;
}
.form-label.small { font-size: 12px; margin-bottom: 4px; }
.input-group-text {
border: 1px solid var(--border-default);
background: var(--bg-sunk);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
border-radius: var(--r);
}
/* ============================================================
SEGMENT (mode switcher)
============================================================ */
.segment {
display: inline-flex;
background: var(--bg-sunk);
border-radius: var(--r);
padding: 3px;
gap: 2px;
border: 1px solid var(--border-subtle);
}
.segment-btn {
background: transparent;
border: none;
padding: 7px 14px;
font-size: 13px;
font-weight: 700;
color: var(--text-secondary);
border-radius: var(--r-sm);
cursor: pointer;
transition: background 120ms, color 120ms;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.segment-btn:hover { color: var(--text-primary); }
.segment-btn.active {
background: var(--brand);
color: #fff;
box-shadow: 0 1px 3px rgba(45, 30, 168, 0.30);
}
/* ============================================================
NAV PILLS (admin tabs)
============================================================ */
.nav-pills {
background: var(--bg-sunk);
border-radius: var(--r);
padding: 4px;
gap: 2px;
flex-wrap: wrap;
border: 1px solid var(--border-subtle);
}
.nav-pills .nav-link {
color: var(--text-secondary);
font-weight: 600;
font-size: 13px;
padding: 7px 14px;
border-radius: var(--r-sm);
border: none;
display: inline-flex; align-items: center; gap: 6px;
}
.nav-pills .nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.5); }
.nav-pills .nav-link.active {
background: var(--brand);
color: #fff;
}
/* ============================================================
3D STAGE
============================================================ */
#three-stage {
position: relative;
width: 100%;
height: 520px;
background: linear-gradient(180deg, #d8dde8 0%, #aab2c7 100%);
border-radius: var(--r);
overflow: hidden;
}
#three-canvas { width: 100%; height: 100%; display: block; }
#bg-image-layer {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none; z-index: 0;
}
#three-stage canvas { position: relative; z-index: 1; }
/* ============================================================
STAGE TOOLBAR — minimalistic, semi-transparent
Dark pill buttons with light backdrop blur. On hover/active
they brighten without becoming opaque.
Position the button group as a single vertical strip top-right
so individual #id positioning is no longer needed (better
responsiveness, less code drift).
============================================================ */
.stage-btn {
position: absolute;
width: 36px; height: 36px;
background: rgba(15, 23, 42, 0.45); /* dark slate, semi-trans */
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
color: rgba(255, 255, 255, 0.92);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 140ms, border-color 140ms, color 140ms, box-shadow 140ms;
z-index: 5;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
font-size: 16px;
}
.stage-btn i { font-size: 17px; line-height: 1; }
.stage-btn:hover {
background: rgba(15, 23, 42, 0.70);
border-color: rgba(255, 255, 255, 0.30);
color: #fff;
}
.stage-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}
.stage-btn.active {
background: rgba(45, 30, 168, 0.85);
border-color: rgba(255, 255, 255, 0.30);
color: #fff;
}
/* Toolbar arrangement — same right edge, compact spacing */
#bg-toggle { top: 10px; right: 10px; }
#backlight-toggle { top: 52px; right: 10px; }
#auto-rotate { top: 94px; right: 10px; }
#reset-view { top: 136px; right: 10px; }
#fullscreen-btn { top: 178px; right: 10px; }
@media (min-width: 768px) { #three-stage { height: 560px; } }
@media (min-width: 1200px) { #three-stage { height: 620px; } }
#three-stage:fullscreen, #three-stage.fullscreen {
height: 100vh !important;
border-radius: 0;
}
/* ============================================================
STAGE INFO OVERLAY — dimensions + price, semi-transparent
============================================================ */
.stage-info-overlay {
position: absolute;
bottom: 12px;
left: 12px;
display: flex;
gap: 6px;
z-index: 5;
max-width: calc(100% - 76px);
flex-wrap: wrap;
}
.stage-info-item {
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
padding: 6px 12px;
display: flex; flex-direction: column; gap: 1px;
min-width: 70px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
color: #fff;
}
.stage-info-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.60);
line-height: 1.2;
}
.stage-info-value {
font-size: 14px;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
line-height: 1.2;
}
.stage-info-item-price {
/* Price still pops — accent border + brand tint, but stays translucent */
background: rgba(45, 30, 168, 0.75);
border-color: rgba(255, 255, 255, 0.30);
}
.stage-info-item-price .stage-info-label { color: rgba(255, 255, 255, 0.80); }
.stage-info-item-price .stage-info-value { font-size: 16px; }
@media (max-width: 575.98px) {
.stage-info-overlay {
flex-direction: row;
bottom: 8px;
left: 8px;
gap: 4px;
max-width: calc(100% - 60px);
}
.stage-info-item { padding: 5px 10px; min-width: 56px; }
.stage-info-value { font-size: 12px; }
.stage-info-item-price .stage-info-value { font-size: 14px; }
}
/* ============================================================
SLIDER
============================================================ */
.slider-row { display: flex; align-items: center; gap: 12px; }
.slider-row input[type="range"] { flex: 1; min-width: 0; }
.slider-value {
flex: 0 0 auto;
min-width: 60px;
text-align: center;
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff;
background: var(--brand);
padding: 6px 12px;
border-radius: var(--r);
letter-spacing: -0.02em;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
background: transparent;
cursor: pointer;
padding: 8px 0;
margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 6px;
background: var(--bg-elev);
border-radius: var(--r-sm);
border: 1px solid var(--border-subtle);
}
input[type="range"]::-moz-range-track {
height: 6px;
background: var(--bg-elev);
border-radius: var(--r-sm);
border: 1px solid var(--border-subtle);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--brand);
border: 3px solid #fff;
cursor: grab;
margin-top: -9px;
box-shadow: 0 2px 8px rgba(45, 30, 168, 0.40), 0 0 0 1px var(--brand);
transition: transform 120ms;
}
input[type="range"]::-moz-range-thumb {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--brand);
border: 3px solid #fff;
cursor: grab;
box-shadow: 0 2px 8px rgba(45, 30, 168, 0.40), 0 0 0 1px var(--brand);
transition: transform 120ms;
}
input[type="range"]:hover::-webkit-slider-thumb { background: var(--brand-hover); transform: scale(1.12); }
input[type="range"]:hover::-moz-range-thumb { background: var(--brand-hover); transform: scale(1.12); }
input[type="range"]:active::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb {
cursor: grabbing;
transform: scale(1.18);
box-shadow: 0 3px 10px rgba(45, 30, 168, 0.50), 0 0 0 6px rgba(45, 30, 168, 0.20);
}
input[type="range"]:active::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb {
cursor: grabbing; transform: scale(1.18);
box-shadow: 0 3px 10px rgba(45, 30, 168, 0.50), 0 0 0 6px rgba(45, 30, 168, 0.20);
}
input[type="range"]:focus { outline: none; }
/* ============================================================
NUMBER STEPPER
============================================================ */
.number-stepper {
display: inline-flex; align-items: stretch;
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r);
overflow: hidden;
transition: border-color 120ms, box-shadow 120ms;
}
.number-stepper:focus-within {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(45, 30, 168, 0.18);
}
.number-stepper button {
border: none;
background: var(--bg-sunk);
color: var(--text-primary);
padding: 0 14px;
font-size: 18px; font-weight: 700;
cursor: pointer;
transition: background 120ms;
line-height: 1;
}
.number-stepper button:hover { background: var(--brand-bg-tint); color: var(--brand-active); }
.number-stepper button:active { background: var(--brand-bg-darker); }
.number-stepper input[type="number"] {
border: none !important;
background: transparent;
text-align: center;
width: 70px;
padding: 9px 4px;
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
appearance: textfield;
}
.number-stepper input[type="number"]::-webkit-outer-spin-button,
.number-stepper input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.number-stepper input[type="number"]:focus { outline: none; box-shadow: none !important; }
.number-stepper-unit {
display: flex; align-items: center;
padding: 0 10px;
font-size: 12px; font-weight: 700;
color: var(--text-tertiary);
background: var(--bg-sunk);
border-left: 1px solid var(--border-subtle);
}
/* ============================================================
PICKERS — pills (depth, font)
============================================================ */
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.depth-pill, .font-pill, .material-pill {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r);
padding: 8px 14px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
transition: all 120ms;
display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
min-width: 72px;
}
.depth-pill:hover, .font-pill:hover, .material-pill:hover {
border-color: var(--brand);
background: var(--brand-bg-tint);
color: var(--brand-active);
}
.depth-pill.active, .font-pill.active, .material-pill.active {
background: var(--brand);
border-color: var(--brand);
color: #fff;
box-shadow: 0 2px 6px rgba(45, 30, 168, 0.30);
}
.depth-mm { font-size: 14px; font-weight: 700; }
.depth-price { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.depth-pill.active .depth-price { color: rgba(255,255,255,0.85); }
.font-pill .pill-id { font-size: 17px; font-weight: 700; }
/* ============================================================
FINISHING GRID
============================================================ */
.finishing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
}
.fin-tile {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r);
padding: 10px 12px;
cursor: pointer;
transition: all 120ms;
display: flex; flex-direction: column; gap: 2px;
text-align: left;
}
.fin-tile:hover {
border-color: var(--brand);
background: var(--brand-bg-tint);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.fin-tile.active {
background: var(--brand-bg-tint);
border-color: var(--brand);
border-width: 2px;
padding: 9px 11px;
box-shadow: 0 2px 8px rgba(45, 30, 168, 0.20);
}
.fin-tile.disabled { opacity: 0.4; cursor: not-allowed; }
.fin-swatch {
width: 100%; height: 28px;
border-radius: var(--r-sm);
border: 1px solid var(--border-default);
margin-bottom: 6px;
}
.fin-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.fin-price { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.fin-tile.active .fin-name { color: var(--brand-active); }
/* ============================================================
VORLAGEN GRID
============================================================ */
.vorlagen-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 8px;
}
.vorlage-card {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r);
padding: 8px;
cursor: pointer;
transition: all 120ms;
display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.vorlage-card:hover { border-color: var(--brand); background: var(--brand-bg-tint); transform: translateY(-1px); }
.vorlage-card.active {
background: var(--brand-bg-tint);
border-color: var(--brand);
border-width: 2px;
padding: 7px;
}
.vorlage-thumb {
width: 100%;
aspect-ratio: 1;
background: var(--bg-sunk);
border-radius: var(--r-sm);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.vorlage-thumb svg, .vorlage-thumb img { max-width: 70%; max-height: 70%; }
.vorlage-name { font-size: 12px; color: var(--text-secondary); text-align: center; font-weight: 600; }
.vorlage-card.active .vorlage-name { color: var(--brand-active); font-weight: 700; }
/* ============================================================
STATUS MESSAGES
============================================================ */
.status-msg {
border-radius: var(--r);
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
display: none;
border: 1px solid;
border-left-width: 4px;
}
.status-msg.show { display: block; }
.status-msg.success { background: var(--success-bg); color: var(--success-on-bg); border-color: var(--success); }
.status-msg.error { background: var(--danger-bg); color: var(--danger-on-bg); border-color: var(--danger); }
.status-msg.info { background: var(--info-bg); color: var(--info-on-bg); border-color: var(--info); }
.status-msg.warning { background: var(--warning-bg); color: var(--warning-on-bg); border-color: var(--warning); }
/* ============================================================
BADGE
============================================================ */
.badge-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px;
border-radius: var(--r-pill);
font-size: 11px; font-weight: 700;
letter-spacing: 0.04em;
}
.badge-brand { background: var(--brand-bg-tint); color: var(--brand-on-tint); }
.badge-cyan { background: var(--cyan-bg-tint); color: var(--cyan-on-tint); }
.badge-teal { background: var(--cyan-bg-tint); color: var(--cyan-on-tint); } /* alias of cyan */
.badge-warm { background: var(--orange-bg-tint); color: var(--orange-on-tint); }
.badge-orange { background: var(--orange-bg-tint); color: var(--orange-on-tint); } /* alias of warm */
.badge-success { background: var(--success-bg); color: var(--success-on-bg); }
.badge-warning { background: var(--warning-bg); color: var(--warning-on-bg); }
.badge-danger { background: var(--danger-bg); color: var(--danger-on-bg); }
.badge-neutral { background: var(--bg-sunk); color: var(--text-secondary); }
/* ============================================================
MODAL
============================================================ */
.modal-content {
border: 1px solid var(--border-default);
border-radius: var(--r);
box-shadow: var(--shadow-lg);
}
.modal-header {
border-bottom: 1px solid var(--border-subtle);
padding: 16px 22px;
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.modal-body { padding: 18px 22px; }
.modal-footer { border-top: 1px solid var(--border-subtle); padding: 12px 22px; }
/* ============================================================
DROPZONE
============================================================ */
.dropzone {
border: 2px dashed var(--border-default);
border-radius: var(--r);
padding: 22px 16px;
text-align: center;
color: var(--text-secondary);
background: var(--bg-card);
transition: all 120ms;
cursor: pointer;
}
.dropzone:hover, .dropzone.dragover {
border-color: var(--brand);
background: var(--brand-bg-tint);
color: var(--brand-on-tint);
}
.dropzone i { font-size: 32px; display: block; margin-bottom: 6px; color: var(--text-tertiary); }
.dropzone.dragover i { color: var(--brand); }
.dropzone-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.dropzone-hint { font-size: 12px; color: var(--text-tertiary); margin: 0; }
/* ============================================================
FINAL PRICE SUMMARY — bold gradient hero
============================================================ */
.tile-price-hero {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 60%, #4c30d8 100%) !important;
border: none !important;
box-shadow: 0 8px 24px rgba(45, 30, 168, 0.35);
color: #fff;
position: relative;
overflow: hidden;
}
.tile-price-hero::before {
content: '';
position: absolute;
top: -50%; right: -20%;
width: 60%; height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
pointer-events: none;
}
.tile-price-hero .tile-header {
color: rgba(255,255,255,0.85);
position: relative; z-index: 1;
}
.tile-price-hero .tile-header i { color: rgba(255,255,255,0.85); }
.price-summary {
display: flex; flex-direction: column; align-items: center; gap: 14px;
padding: 8px 0 4px;
position: relative; z-index: 1;
}
.price-summary-main {
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.price-summary-label {
font-size: 13px; font-weight: 700;
color: rgba(255,255,255,0.85);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.price-summary-value {
font-size: 64px; font-weight: 800;
color: #fff;
letter-spacing: -0.045em;
font-variant-numeric: tabular-nums;
line-height: 1;
text-shadow: 0 2px 12px rgba(0,0,0,0.20);
}
@media (max-width: 575.98px) { .price-summary-value { font-size: 44px; } }
.price-summary-meta {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 8px 24px;
font-size: 13px;
color: rgba(255,255,255,0.90);
font-weight: 500;
}
.price-summary-netto span {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.price-summary-included {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 700;
}
.price-summary-included i {
color: #5eead4; /* light cyan for green check */
font-size: 16px;
}
/* ============================================================
ORDER SPECIFICATION
============================================================ */
.order-spec { display: flex; flex-direction: column; gap: 0; }
.spec-row {
display: grid;
grid-template-columns: 200px 1fr;
align-items: center; gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--border-subtle);
}
.spec-row:last-child { border-bottom: none; }
.spec-row-total {
background: linear-gradient(135deg, var(--cyan-bg-tint) 0%, #e6f5fc 100%);
border-bottom: none;
margin: 4px -18px 0;
padding: 14px 18px;
border-radius: var(--r);
border: 1px solid #7dd3fc;
}
.spec-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.spec-row-total .spec-label { color: var(--cyan-on-tint); }
.spec-value {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.spec-row-total .spec-value { color: var(--cyan-on-tint); font-weight: 700; }
.spec-value.spec-dimensions {
display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dim-block {
display: inline-flex; align-items: baseline; gap: 4px;
background: var(--bg-card);
border: 2px solid var(--brand);
border-radius: var(--r);
padding: 5px 12px;
box-shadow: 0 1px 3px rgba(45, 30, 168, 0.15);
}
.dim-label {
font-size: 10px; font-weight: 800;
color: var(--brand);
letter-spacing: 0.06em;
}
.dim-val {
font-size: 19px; font-weight: 800;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.025em;
}
.dim-unit {
font-size: 11px; color: var(--text-tertiary); font-weight: 700;
}
.dim-sep { color: var(--brand); font-size: 16px; font-weight: 800; }
@media (max-width: 575.98px) {
.spec-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
.spec-row-total { padding: 12px; }
.dim-block { padding: 4px 10px; }
.dim-val { font-size: 17px; }
}
/* ============================================================
INFO SECTION — SEO/LLM content
============================================================ */
.info-section { margin-top: 20px; }
.info-heading {
font-size: 1.625rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text-primary);
margin: 0 0 12px;
}
.info-lead {
font-size: 15px;
line-height: 1.6;
color: var(--text-secondary);
font-weight: 500;
margin: 0;
max-width: 72ch;
}
.info-h3 {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--text-primary);
margin: 0 0 14px;
}
.info-h4 {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 10px;
display: flex; align-items: center; gap: 10px;
}
.info-h4 i {
color: #fff;
font-size: 18px;
background: var(--brand);
width: 36px; height: 36px;
border-radius: var(--r);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(45, 30, 168, 0.25);
}
.info-body {
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0 0 10px;
font-weight: 500;
}
.info-dl {
display: grid;
grid-template-columns: 200px 1fr;
gap: 8px 20px;
margin: 0;
font-size: 14px;
}
@media (max-width: 575.98px) {
.info-dl { grid-template-columns: 1fr; gap: 4px 0; }
.info-dl dt { margin-top: 8px; }
}
.info-dl dt {
font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em;
}
.info-dl dd {
color: var(--text-secondary); font-weight: 500; margin: 0; line-height: 1.5;
}
.info-ol {
margin: 0; padding-left: 20px;
font-size: 14px; line-height: 1.7;
color: var(--text-secondary); font-weight: 500;
}
.info-ol li { margin-bottom: 6px; }
.info-ol li strong { color: var(--text-primary); font-weight: 700; }
.info-ul {
margin: 0; padding-left: 20px;
font-size: 13px; line-height: 1.55;
color: var(--text-secondary); font-weight: 500;
}
.info-ul li { margin-bottom: 5px; }
.info-ul li strong { color: var(--text-primary); font-weight: 700; }
.info-faq {
border-bottom: 1px solid var(--border-subtle);
padding: 12px 0;
}
.info-faq:last-child { border-bottom: none; }
.info-faq summary {
cursor: pointer;
font-weight: 700;
font-size: 15px;
color: var(--text-primary);
padding: 4px 0;
list-style: none;
display: flex; align-items: center; gap: 10px;
}
.info-faq summary::-webkit-details-marker { display: none; }
.info-faq summary::before {
content: '+';
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
background: var(--brand);
color: #fff;
border-radius: var(--r);
font-weight: 800; font-size: 16px;
transition: transform 120ms, background 120ms;
}
.info-faq[open] summary::before {
content: '−';
background: var(--cyan);
}
.info-faq p {
margin: 8px 0 0 34px;
font-size: 14px; line-height: 1.6;
color: var(--text-secondary); font-weight: 500;
}
/* ============================================================
HELPERS
============================================================ */
.divider-soft { border-top: 1px solid var(--border-subtle); margin: 14px 0; }
.text-num { font-variant-numeric: tabular-nums; }
.visually-hidden-focusable:not(:focus) {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
}
.visually-hidden-focusable:focus {
position: fixed; top: 8px; left: 8px;
z-index: 9999;
padding: 8px 14px;
background: var(--brand);
color: #fff;
border-radius: var(--r);
text-decoration: none;
font-weight: 700;
}
/* ============================================================
PER-ELEMENT BREAKDOWN TABLE
============================================================ */
.element-breakdown-wrap { overflow-x: auto; }
.element-breakdown-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.element-breakdown-table thead th {
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-tertiary);
padding: 8px 10px;
border-bottom: 2px solid var(--border-default);
vertical-align: bottom;
line-height: 1.2;
}
.element-breakdown-table thead th.text-num,
.element-breakdown-table thead th:nth-child(n+3) { text-align: right; }
.element-breakdown-table th .th-unit {
display: block;
font-size: 10px;
font-weight: 500;
color: var(--text-tertiary);
letter-spacing: 0;
text-transform: none;
}
.element-breakdown-table tbody td {
padding: 6px 10px;
border-bottom: 1px solid var(--border-subtle);
color: var(--text-primary);
font-weight: 500;
}
.element-breakdown-table tbody tr:hover { background: var(--bg-sunk); }
.element-breakdown-table .text-num { text-align: right; }
.element-breakdown-table .el-idx {
font-weight: 700;
color: var(--text-tertiary);
width: 40px;
}
.element-breakdown-table .el-label {
font-weight: 700;
font-size: 14px;
color: var(--brand);
}
.element-breakdown-table tfoot td {
padding: 10px;
background: var(--cyan-bg-tint);
color: var(--cyan-on-tint);
border-top: 2px solid var(--cyan);
font-size: 14px;
}
.element-breakdown-table tfoot .text-end { text-align: right; }
.element-breakdown-table tfoot strong { font-weight: 800; }
@media (max-width: 575.98px) {
.element-breakdown-table { font-size: 12px; }
.element-breakdown-table thead th,
.element-breakdown-table tbody td { padding: 6px 6px; }
}
/* ============================================================
AUDIENCE TILES — 6 branchenspezifische Farbvarianten
Jeder Tile hat eine eigene Akzentfarbe und passendes Icon-
Hintergrund. Alle Texte halten AAA 8:1 Kontrast.
============================================================ */
.audience-tile {
position: relative;
padding: 24px 22px 22px;
border-radius: var(--r);
border-width: 1px;
border-style: solid;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 200ms, box-shadow 200ms;
}
.audience-tile:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(11, 20, 55, 0.16);
}
.audience-tile::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top right, rgba(255,255,255,0.55) 0%, transparent 60%);
pointer-events: none;
}
.audience-tile > * { position: relative; z-index: 1; }
.audience-icon-wrap {
width: 64px; height: 64px;
border-radius: var(--r);
display: flex; align-items: center; justify-content: center;
font-size: 30px;
color: #fff;
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
margin-bottom: 4px;
}
.audience-badge {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 3px 10px;
border-radius: var(--r-pill);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.audience-h4 {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.025em;
margin: 0 0 4px;
line-height: 1.3;
}
.audience-body {
font-size: 14.5px;
line-height: 1.6;
font-weight: 500;
margin: 0 0 4px;
}
.audience-list {
margin: 0;
padding-left: 0;
list-style: none;
font-size: 13.5px;
line-height: 1.55;
font-weight: 500;
}
.audience-list li {
position: relative;
padding-left: 22px;
margin-bottom: 8px;
}
.audience-list li:last-child { margin-bottom: 0; }
.audience-list li::before {
content: '';
position: absolute;
left: 0; top: 9px;
width: 8px; height: 8px;
border-radius: 50%;
}
.audience-list li strong { font-weight: 700; }
/* ─── #1 Ladenbau — INDIGO / PREMIUM ─── */
.audience-ladenbau {
background: linear-gradient(135deg, #ebe9ff 0%, #f4f2ff 100%);
border-color: #a59cff;
}
.audience-ladenbau .audience-icon-wrap {
background: linear-gradient(135deg, #2d1ea8 0%, #4c30d8 100%);
}
.audience-ladenbau .audience-badge {
background: #2d1ea8; color: #fff;
}
.audience-ladenbau .audience-h4 { color: #1a0e7a; } /* 14.5:1 */
.audience-ladenbau .audience-body { color: #2d3556; } /* 10.9:1 */
.audience-ladenbau .audience-list { color: #3a3f63; } /* 9.4:1 */
.audience-ladenbau .audience-list li strong { color: #1a0e7a; }
.audience-ladenbau .audience-list li::before { background: #2d1ea8; }
/* ─── #2 Werbeagenturen — CYAN / KREATIV ─── */
.audience-werbung {
background: linear-gradient(135deg, #d4f1fb 0%, #e6f5fc 100%);
border-color: #67d3f0;
}
.audience-werbung .audience-icon-wrap {
background: linear-gradient(135deg, #006c8e 0%, #0099bf 100%);
}
.audience-werbung .audience-badge {
background: #006c8e; color: #fff;
}
.audience-werbung .audience-h4 { color: #003e54; } /* 14:1 */
.audience-werbung .audience-body { color: #1f4254; } /* 10:1 */
.audience-werbung .audience-list { color: #285368; } /* 8.8:1 */
.audience-werbung .audience-list li strong { color: #003e54; }
.audience-werbung .audience-list li::before { background: #006c8e; }
/* ─── #3 Messebau — ORANGE / ENERGY ─── */
.audience-messe {
background: linear-gradient(135deg, #fff1e6 0%, #fef5ec 100%);
border-color: #fdba74;
}
.audience-messe .audience-icon-wrap {
background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
}
.audience-messe .audience-badge {
background: #c2410c; color: #fff;
}
.audience-messe .audience-h4 { color: #7c2d12; } /* 13.5:1 */
.audience-messe .audience-body { color: #3d1e0a; } /* 14:1 */
.audience-messe .audience-list { color: #50260e; } /* 11:1 */
.audience-messe .audience-list li strong { color: #7c2d12; }
.audience-messe .audience-list li::before { background: #c2410c; }
/* ─── #4 Hochzeiten — ROSE / ROMANTIK ─── */
.audience-hochzeit {
background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);
border-color: #f9a8d4;
}
.audience-hochzeit .audience-icon-wrap {
background: linear-gradient(135deg, #be185d 0%, #db2777 100%);
}
.audience-hochzeit .audience-badge {
background: #be185d; color: #fff;
}
.audience-hochzeit .audience-h4 { color: #831843; } /* 13:1 */
.audience-hochzeit .audience-body { color: #4a0d29; } /* 14:1 */
.audience-hochzeit .audience-list { color: #5f1638; } /* 11.5:1 */
.audience-hochzeit .audience-list li strong { color: #831843; }
.audience-hochzeit .audience-list li::before { background: #be185d; }
/* ─── #5 Gastronomie — BURGUND / ELEGANZ ─── */
.audience-gastro {
background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
border-color: #fca5a5;
}
.audience-gastro .audience-icon-wrap {
background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
}
.audience-gastro .audience-badge {
background: #991b1b; color: #fff;
}
.audience-gastro .audience-h4 { color: #7f1d1d; } /* 12:1 */
.audience-gastro .audience-body { color: #441515; } /* 14:1 */
.audience-gastro .audience-list { color: #571c1c; } /* 11.5:1 */
.audience-gastro .audience-list li strong { color: #7f1d1d; }
.audience-gastro .audience-list li::before { background: #991b1b; }
/* ─── #6 Bildung — GRÜN / WISSEN ─── */
.audience-bildung {
background: linear-gradient(135deg, #dcfce7 0%, #ecfdf5 100%);
border-color: #6ee7b7;
}
.audience-bildung .audience-icon-wrap {
background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
}
.audience-bildung .audience-badge {
background: #15803d; color: #fff;
}
.audience-bildung .audience-h4 { color: #14532d; } /* 12:1 */
.audience-bildung .audience-body { color: #18391f; } /* 13.5:1 */
.audience-bildung .audience-list { color: #1f4427; } /* 11.5:1 */
.audience-bildung .audience-list li strong { color: #14532d; }
.audience-bildung .audience-list li::before { background: #15803d; }
@media (max-width: 575.98px) {
.audience-tile { padding: 18px 16px 16px; }
.audience-icon-wrap { width: 52px; height: 52px; font-size: 24px; }
.audience-h4 { font-size: 1.1rem; }
}
/* ============================================================
CHANGE-PASSWORD MODAL — inline feedback box
Hides by default (display:none via JS); colors meet AAA 8:1+.
============================================================ */
.cp-feedback {
display: none;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
border-radius: var(--r-sm);
font-size: 13.5px;
font-weight: 600;
line-height: 1.4;
margin-top: 4px;
}
.cp-feedback-error {
background: var(--danger-bg);
color: var(--danger-on-bg);
border: 1px solid var(--danger);
}
.cp-feedback-success {
background: var(--success-bg);
color: var(--success-on-bg);
border: 1px solid var(--success);
}
.cp-feedback-info {
background: var(--cyan-bg-tint);
color: var(--cyan-on-tint);
border: 1px solid var(--cyan);
}
.cp-feedback::before {
display: inline-block;
flex-shrink: 0;
width: 16px; height: 16px;
margin-top: 1px;
background: currentColor;
-webkit-mask: var(--cp-icon) center / contain no-repeat;
mask: var(--cp-icon) center / contain no-repeat;
}
.cp-feedback-error::before {
content: '';
--cp-icon: url("data:image/svg+xml;utf8,");
}
.cp-feedback-success::before {
content: '';
--cp-icon: url("data:image/svg+xml;utf8,");
}
.cp-feedback-info::before {
content: '';
--cp-icon: url("data:image/svg+xml;utf8,");
}
/* ============================================================
PAGE: "MEINE PROJEKTE"
Card grid with preview, badges, price, actions.
============================================================ */
.page-section { padding: 32px 0 48px; }
.page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.page-title {
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--text-primary);
margin: 0 0 6px;
}
.page-lead {
font-size: 15px;
color: var(--text-secondary);
max-width: 60ch;
margin: 0;
line-height: 1.55;
}
.page-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* Empty / loading states */
.empty-state {
text-align: center;
padding: 56px 24px;
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r);
}
.empty-icon {
font-size: 3.5rem;
color: var(--text-tertiary);
opacity: 0.6;
}
/* Grid */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
@media (max-width: 575.98px) {
.projects-grid { grid-template-columns: 1fr; }
}
/* Card */
.proj-card {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r);
display: flex;
flex-direction: column;
overflow: hidden;
transition: box-shadow 200ms, transform 200ms, border-color 200ms;
}
.proj-card:hover {
box-shadow: 0 12px 28px rgba(11, 20, 55, 0.10);
transform: translateY(-2px);
border-color: var(--brand);
}
.proj-link {
display: block;
text-decoration: none;
color: inherit;
}
/* Preview area */
.proj-preview {
aspect-ratio: 16 / 9;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f4f2ff 0%, #dbd6ff 100%);
overflow: hidden;
}
.proj-preview svg { width: 100%; height: 100%; display: block; }
.proj-preview-logo svg { max-width: 70%; max-height: 70%; }
.proj-preview-logo {
background: linear-gradient(135deg, #d4f1fb 0%, #b6e5f5 100%);
padding: 16px;
}
.proj-preview-template {
background: linear-gradient(135deg, #fff1e6 0%, #fed7aa 100%);
font-size: 3.5rem;
color: #c2410c;
}
/* Body */
.proj-body {
padding: 14px 16px 10px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.proj-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.proj-name {
font-size: 16px;
font-weight: 700;
margin: 0;
line-height: 1.3;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.proj-badges {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.proj-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
border-radius: var(--r-pill);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.proj-badge i { font-size: 11px; }
.proj-badge-text { background: #ebe9ff; color: #1a0e7a; }
.proj-badge-logo { background: #d4f1fb; color: #003e54; }
.proj-badge-template { background: #fff1e6; color: #7c2d12; }
.proj-badge-guest { background: var(--bg-sunk); color: var(--text-tertiary); }
.proj-details {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.proj-details strong { color: var(--text-primary); }
.proj-price {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 2px;
padding-top: 8px;
border-top: 1px dashed var(--border-subtle);
}
.proj-price-amount {
font-size: 18px;
font-weight: 800;
color: var(--brand-active);
font-variant-numeric: tabular-nums;
}
.proj-price-label {
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.proj-price-empty {
font-size: 12px;
color: var(--text-tertiary);
font-style: italic;
padding-top: 8px;
border-top: 1px dashed var(--border-subtle);
}
.proj-meta {
font-size: 11.5px;
color: var(--text-tertiary);
margin: 0;
padding-top: 6px;
}
.proj-meta i { margin-right: 3px; }
/* Actions */
.proj-actions {
display: flex;
gap: 6px;
padding: 10px 16px 14px;
border-top: 1px solid var(--border-subtle);
}
.proj-actions .btn-primary { flex: 1; justify-content: center; }
.proj-delete { flex: 0 0 auto; }
/* ============================================================
CUSTOMER FONT UPLOAD — inline panel inside the "Schriftart" tile
Visible only when the user has the uploadFonts permission.
============================================================ */
.customer-font-upload {
margin-top: 14px;
}
.cfu-divider {
border-top: 1px dashed var(--border-default);
margin: 4px 0 12px;
}
.cfu-intro {
font-size: 12.5px;
color: var(--text-secondary);
margin: 0 0 10px;
display: flex;
align-items: flex-start;
gap: 6px;
line-height: 1.45;
}
.cfu-intro i {
color: var(--brand);
margin-top: 1px;
flex-shrink: 0;
}
/* Compact dropzone variant — used inside the font tile */
.dropzone-sm {
padding: 16px 14px;
border-radius: var(--r-sm);
border: 1px dashed var(--border-default);
background: var(--bg-sunk);
cursor: pointer;
text-align: center;
transition: border-color 120ms, background 120ms;
}
.dropzone-sm:hover,
.dropzone-sm.dragover {
border-color: var(--brand);
background: var(--brand-bg-tint);
}
.dropzone-sm i {
font-size: 22px;
color: var(--brand);
display: block;
margin-bottom: 4px;
}
.dropzone-sm .dropzone-title {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 2px;
}
.dropzone-sm .dropzone-hint {
font-size: 11.5px;
color: var(--text-tertiary);
margin: 0;
}
/* List of user's own fonts (private) */
.cfu-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.cfu-empty {
font-size: 12.5px;
color: var(--text-tertiary);
font-style: italic;
padding: 6px 0 0;
}
.cfu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
font-size: 13px;
}
.cfu-name {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cfu-del {
flex-shrink: 0;
width: 24px; height: 24px;
border: none;
background: transparent;
color: var(--text-tertiary);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 120ms, color 120ms;
}
.cfu-del:hover {
background: var(--danger-bg);
color: var(--danger-on-bg);
}
.cfu-del i { font-size: 16px; line-height: 1; }
/* ============================================================
READ-ONLY MODE — sticky banner + disabled controls
============================================================ */
.readonly-banner {
background: linear-gradient(135deg, #2d1ea8 0%, #006c8e 100%);
color: #fff;
padding: 14px 0;
margin-bottom: 16px;
box-shadow: 0 6px 16px rgba(11, 20, 55, 0.18);
border-bottom: 3px solid rgba(255, 255, 255, 0.20);
}
.readonly-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.readonly-text {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
line-height: 1.45;
flex: 1;
min-width: 240px;
}
.readonly-text > i {
font-size: 28px;
flex-shrink: 0;
opacity: 0.85;
}
.readonly-text strong { font-weight: 700; }
.readonly-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.readonly-actions .btn-light {
font-weight: 700;
color: #2d1ea8;
}
/* When in read-only mode, dim disabled controls and remove hover */
body.is-readonly .pill-row .pill,
body.is-readonly button:disabled,
body.is-readonly input:disabled,
body.is-readonly select:disabled,
body.is-readonly textarea:disabled {
opacity: 0.75;
cursor: not-allowed;
}
body.is-readonly .pill-row .pill { pointer-events: none; }
body.is-readonly .dropzone { pointer-events: none; opacity: 0.5; }
/* ============================================================
PERMISSION-BLOCKED PAGE
============================================================ */
.permission-blocked {
text-align: center;
padding: 64px 24px;
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r);
}
/* ============================================================
UPLOAD PANEL (Meine Schriften / Meine SVGs)
============================================================ */
.upload-panel {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r);
padding: 16px;
margin-bottom: 20px;
}
.upload-panel .dropzone {
padding: 28px 20px;
border: 2px dashed var(--border-default);
border-radius: var(--r);
background: var(--bg-sunk);
cursor: pointer;
text-align: center;
transition: border-color 120ms, background 120ms;
}
.upload-panel .dropzone:hover,
.upload-panel .dropzone.dragover {
border-color: var(--brand);
background: var(--brand-bg-tint);
}
.upload-panel .dropzone i {
font-size: 32px;
color: var(--brand);
display: block;
margin-bottom: 6px;
}
.upload-panel .dropzone .dropzone-title {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 2px;
}
.upload-panel .dropzone .dropzone-hint {
font-size: 12.5px;
color: var(--text-tertiary);
margin: 0;
}
.upload-status { margin-top: 12px; font-size: 13.5px; }
.upload-info, .upload-ok, .upload-err {
padding: 10px 12px;
border-radius: var(--r-sm);
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 8px;
font-weight: 600;
}
.upload-info { background: var(--cyan-bg-tint); color: var(--cyan-on-tint); border: 1px solid var(--cyan); }
.upload-ok { background: var(--success-bg); color: var(--success-on-bg); border: 1px solid var(--success); }
.upload-err { background: var(--danger-bg); color: var(--danger-on-bg); border: 1px solid var(--danger); }
.upload-err ul { margin: 4px 0 0 18px; padding: 0; font-weight: 500; }
/* ============================================================
SVG GRID (Meine SVGs)
============================================================ */
.svgs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.svg-card {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 200ms, transform 200ms;
}
.svg-card:hover {
box-shadow: 0 10px 22px rgba(11, 20, 55, 0.10);
transform: translateY(-2px);
}
.svg-preview {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f5f8 0%, #e8e8ee 100%);
padding: 16px;
}
.svg-preview svg { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.svg-body { padding: 10px 12px 6px; flex: 1; }
.svg-name {
font-size: 13.5px;
font-weight: 700;
margin: 0 0 4px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.svg-meta {
font-size: 11.5px;
color: var(--text-tertiary);
margin: 0;
display: flex;
gap: 10px;
}
.svg-actions {
display: flex;
gap: 6px;
padding: 8px 12px 10px;
border-top: 1px solid var(--border-subtle);
}
.svg-actions .btn-primary { flex: 1; justify-content: center; }
/* ============================================================
FONT GRID (Meine Schriften)
============================================================ */
.fonts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.font-card {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--r);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 200ms, transform 200ms;
}
.font-card:hover {
box-shadow: 0 10px 22px rgba(11, 20, 55, 0.10);
transform: translateY(-2px);
}
.font-preview {
font-size: 36px;
line-height: 1.1;
padding: 28px 18px;
text-align: center;
color: var(--text-primary);
background: linear-gradient(135deg, #ebe9ff 0%, #f4f2ff 100%);
letter-spacing: -0.02em;
word-break: break-word;
min-height: 110px;
display: flex;
align-items: center;
justify-content: center;
}
.font-body { padding: 10px 14px 8px; flex: 1; }
.font-name {
font-size: 14px;
font-weight: 700;
margin: 0 0 6px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.font-meta {
font-size: 11.5px;
color: var(--text-tertiary);
margin: 0;
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.font-actions {
display: flex;
gap: 6px;
padding: 8px 14px 10px;
border-top: 1px solid var(--border-subtle);
}
.font-actions .btn-primary { flex: 1; justify-content: center; }
/* ============================================================
SUPER-ADMIN — visual distinction
Shield-check icon + brand-accented avatar so the role is obvious
at a glance in both the nav and the user list.
============================================================ */
.user-avatar-super {
background: linear-gradient(135deg, var(--brand) 0%, var(--orange) 100%) !important;
box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.30), 0 2px 6px rgba(45, 30, 168, 0.35);
}
.user-avatar.is-super {
background: linear-gradient(135deg, var(--brand) 0%, var(--orange) 100%);
color: #fff;
box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.25);
}
.user-avatar.is-super i,
.user-avatar.is-admin i { color: #fff; }
/* Emphasis dropdown item — used for the "Administration" quick-jump
in the user menu. Subtle indigo wash with bold text. */
.dropdown-item-emphasis {
background: var(--brand-bg-tint);
color: var(--brand-on-tint) !important;
font-weight: 700;
border-radius: var(--r-sm);
margin: 2px;
}
.dropdown-item-emphasis:hover,
.dropdown-item-emphasis:focus {
background: var(--brand);
color: #fff !important;
}
.dropdown-item-emphasis i { color: inherit !important; }
/* ============================================================
BACKLIGHT CONTROLS — stage button + color presets
============================================================ */
.stage-btn.is-on {
background: linear-gradient(135deg, #ffd166 0%, #ff5577 100%);
color: #fff;
box-shadow: 0 0 12px rgba(255, 209, 102, 0.6), 0 2px 6px rgba(0,0,0,0.2);
}
.stage-btn.is-on i { color: #fff; }
/* Color preset swatches — small round buttons */
.backlight-preset {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid var(--border-default);
cursor: pointer;
padding: 0;
transition: transform 120ms, border-color 120ms, box-shadow 120ms;
position: relative;
}
.backlight-preset:hover {
transform: scale(1.1);
border-color: var(--brand);
}
.backlight-preset.active {
border-color: var(--brand);
box-shadow: 0 0 0 2px rgba(45, 30, 168, 0.25);
}
.backlight-preset.active::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.85);
pointer-events: none;
}
/* Reuse drawer styling identical to bg-controls (already defined) */
#backlight-controls .form-check-input:checked {
background-color: var(--brand);
border-color: var(--brand);
}
/* ============================================================
PROMO CODE — Rabattcode input in price summary
============================================================ */
.promo-box {
margin: 14px 0 10px;
padding-top: 14px;
border-top: 1px dashed var(--border-default);
}
.promo-input-row {
display: flex;
gap: 8px;
align-items: stretch;
}
.promo-input-wrap {
position: relative;
flex: 1;
min-width: 0;
}
.promo-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
font-size: 15px;
pointer-events: none;
}
.promo-input {
padding-left: 32px !important;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.promo-input:disabled {
background: var(--success-bg);
color: var(--success-on-bg);
border-color: var(--success);
-webkit-text-fill-color: var(--success-on-bg);
opacity: 1;
}
.promo-feedback {
display: none;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 8px 10px;
border-radius: var(--r-sm);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.promo-feedback-success {
background: var(--success-bg);
color: var(--success-on-bg);
border: 1px solid var(--success);
}
.promo-feedback-error {
background: var(--danger-bg);
color: var(--danger-on-bg);
border: 1px solid var(--danger);
}
/* Discount line in the price summary */
.price-discount-line {
display: flex;
align-items: center;
justify-content: space-between;
margin: 6px 0 4px;
padding: 8px 12px;
background: var(--success-bg);
border-radius: var(--r-sm);
font-size: 14px;
}
.discount-label {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
color: var(--success-on-bg);
}
.discount-label i { font-size: 13px; }
.discount-amount {
font-weight: 800;
color: var(--success-on-bg);
font-variant-numeric: tabular-nums;
}
/* Admin promo code tag (monospace pill) */
.promo-code-tag {
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-weight: 800;
letter-spacing: 0.05em;
background: var(--bg-sunk);
padding: 2px 8px;
border-radius: var(--r-sm);
border: 1px solid var(--border-default);
font-size: 13px;
}
/* ============================================================
BACKGROUND IMAGE EDITING — on-canvas overlays (v4.5.3)
Empty state = centered dropzone. Active state = top hint bar
+ floating control panel at the bottom of the canvas.
============================================================ */
/* ----- Empty state: centered dropzone over the canvas ----- */
.bg-dropzone {
position: absolute;
inset: 0;
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: bgFadeIn 180ms ease;
}
@keyframes bgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.bg-dropzone-close {
position: absolute;
top: 12px; right: 12px;
width: 34px; height: 34px;
border-radius: 9px;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(15,23,42,0.5);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 140ms;
}
.bg-dropzone-close:hover { background: rgba(15,23,42,0.85); }
.bg-dropzone-inner {
width: min(440px, 100%);
border: 2px dashed rgba(255,255,255,0.45);
border-radius: 18px;
padding: 40px 28px;
text-align: center;
cursor: pointer;
color: #fff;
background: rgba(255,255,255,0.04);
transition: border-color 160ms, background 160ms, transform 160ms;
}
.bg-dropzone-inner:hover,
.bg-dropzone-inner.dragover {
border-color: #fff;
background: rgba(255,255,255,0.12);
transform: translateY(-2px);
}
.bg-dropzone-icon {
font-size: 46px;
line-height: 1;
margin-bottom: 14px;
opacity: 0.9;
}
.bg-dropzone-title {
font-size: 18px;
font-weight: 800;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.bg-dropzone-hint {
font-size: 13px;
margin: 0;
color: rgba(255,255,255,0.72);
line-height: 1.5;
}
/* ----- Edit mode: top hint bar ----- */
.bg-edit-hint {
position: absolute;
top: 10px; left: 50%;
transform: translateX(-50%);
z-index: 7;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.62);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: 12.5px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
pointer-events: none;
animation: bgFadeIn 180ms ease;
white-space: nowrap;
max-width: calc(100% - 24px);
}
.bg-edit-hint i { font-size: 14px; opacity: 0.9; }
/* ----- Edit mode: floating control panel (bottom) ----- */
.bg-edit-panel {
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
z-index: 9;
width: min(520px, calc(100% - 24px));
background: rgba(15, 23, 42, 0.72);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 16px;
padding: 14px 16px 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
color: #fff;
animation: bgSlideUp 220ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes bgSlideUp {
from { opacity: 0; transform: translate(-50%, 12px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.bg-edit-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.bg-edit-panel-title {
font-size: 13.5px;
font-weight: 800;
letter-spacing: 0.01em;
display: flex; align-items: center; gap: 7px;
}
.bg-edit-panel-title i { opacity: 0.85; }
.bg-edit-panel-close {
display: inline-flex;
align-items: center;
gap: 5px;
border: none;
background: #fff;
color: #0f172a;
font-weight: 700;
font-size: 12.5px;
padding: 5px 12px;
border-radius: 8px;
cursor: pointer;
transition: background 140ms, transform 140ms;
}
.bg-edit-panel-close:hover { background: #e8e8ee; transform: translateY(-1px); }
/* Slider rows inside the edit panel */
.bg-edit-sliders { display: flex; flex-direction: column; gap: 10px; }
.bg-slider {
display: grid;
grid-template-columns: 96px 1fr 48px;
align-items: center;
gap: 10px;
}
.bg-slider label {
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.88);
display: flex; align-items: center; gap: 6px;
margin: 0;
white-space: nowrap;
}
.bg-slider label i { font-size: 13px; opacity: 0.75; }
.bg-slider output {
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
color: #fff;
}
/* ----- Modern range slider (used in bg edit panel) ----- */
.range-modern {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
background: rgba(255,255,255,0.25);
outline: none;
cursor: pointer;
}
.range-modern::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--brand, #2d1ea8);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
transition: transform 120ms;
}
.range-modern::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range-modern::-webkit-slider-thumb:active { transform: scale(0.95); }
.range-modern::-moz-range-thumb {
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--brand, #2d1ea8);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
cursor: pointer;
}
.range-modern::-moz-range-track {
height: 6px; border-radius: 999px;
background: rgba(255,255,255,0.25);
}
/* Panel action buttons */
.bg-edit-actions {
display: flex;
gap: 8px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.14);
flex-wrap: wrap;
}
.btn-ghost-light, .btn-ghost-danger {
flex: 1;
min-width: 100px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
padding: 7px 10px;
border-radius: 9px;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(255,255,255,0.08);
color: #fff;
transition: background 140ms, border-color 140ms;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.18); }
.btn-ghost-danger { border-color: rgba(248,113,113,0.5); color: #fecaca; }
.btn-ghost-danger:hover { background: rgba(248,113,113,0.22); color: #fff; }
/* When editing the bg, give the canvas a "grab" cursor hint */
#three-stage.bg-editing #three-canvas { cursor: grab; }
#three-stage.bg-editing #three-canvas:active { cursor: grabbing; }
/* The bg-toggle button glows when bg editing is active */
.stage-btn.bl-active {
background: rgba(45, 30, 168, 0.65);
border-color: rgba(255,255,255,0.30);
color: #fff;
}
.stage-btn.bg-active {
background: rgba(45, 30, 168, 0.85);
border-color: rgba(255,255,255,0.30);
color: #fff;
}
@media (max-width: 575.98px) {
.bg-slider { grid-template-columns: 80px 1fr 42px; gap: 8px; }
.bg-slider label { font-size: 11px; }
.bg-edit-panel { bottom: 8px; padding: 12px 12px 10px; }
.bg-dropzone-inner { padding: 28px 18px; }
.bg-dropzone-icon { font-size: 38px; }
.bg-dropzone-title { font-size: 16px; }
}
/* ============================================================
BACKLIGHT — floating on-canvas control panel (v4.5.4)
Reuses .bg-edit-panel base; adds switch, presets, custom color.
============================================================ */
.backlight-panel { /* inherits .bg-edit-panel positioning + glass */ }
.backlight-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
/* iOS-style toggle switch */
.bl-switch {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.bl-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.bl-switch-track {
position: relative;
width: 40px; height: 22px;
border-radius: 999px;
background: rgba(255,255,255,0.25);
transition: background 160ms;
flex-shrink: 0;
}
.bl-switch-thumb {
position: absolute;
top: 2px; left: 2px;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.35);
transition: transform 180ms cubic-bezier(0.16,1,0.3,1);
}
.bl-switch-input:checked + .bl-switch-track {
background: linear-gradient(135deg, #ffd166 0%, #ff5577 100%);
}
.bl-switch-input:checked + .bl-switch-track .bl-switch-thumb {
transform: translateX(18px);
}
.bl-switch-input:focus-visible + .bl-switch-track {
box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}
.bl-switch-label {
font-size: 13px;
font-weight: 700;
color: #fff;
}
/* Color presets */
.backlight-presets {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.backlight-preset {
width: 24px; height: 24px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
cursor: pointer;
padding: 0;
transition: transform 120ms, border-color 120ms, box-shadow 120ms;
position: relative;
}
.backlight-preset:hover { transform: scale(1.15); border-color: #fff; }
.backlight-preset.active {
border-color: #fff;
box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}
.backlight-preset.active::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.25);
pointer-events: none;
}
/* Custom color picker tile */
.backlight-custom {
position: relative;
width: 24px; height: 24px;
border-radius: 50%;
border: 2px dashed rgba(255,255,255,0.5);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
transition: transform 120ms, border-color 120ms;
}
.backlight-custom:hover { transform: scale(1.15); border-color: #fff; }
.backlight-custom i {
font-size: 11px;
color: #fff;
pointer-events: none;
}
.backlight-custom input[type="color"] {
position: absolute;
inset: -4px;
width: calc(100% + 8px);
height: calc(100% + 8px);
border: none;
padding: 0;
cursor: pointer;
opacity: 0;
}
.backlight-hint {
margin: 10px 0 0;
font-size: 11.5px;
color: rgba(255,255,255,0.7);
display: flex;
align-items: center;
gap: 6px;
line-height: 1.4;
}
.backlight-hint i { opacity: 0.8; flex-shrink: 0; }