/* ============================================================================
* TRICOMA ENERGY ? Bootstrap 5.3 Theme (v2)
* ============================================================================
*
* Erweitert die bestehende tricoma_energy_theme.css.
* - ?bernimmt alle vorhandenen Tokens, erg?nzt fehlende
* - Verfeinert ALLE bestehenden Komponenten (Card, Table, Badge, Button,
* Form, Alert, Progress, Navbar, Subnav, Footer, ?) auf das neue
* Designniveau
* - F?gt neue, Bootstrap-kompatible Komponenten hinzu:
* .te-page-header / .te-greeting
* .te-stat (Stat-Card)
* .te-filter-chip
* .te-session (Session-Card mit Status / Live-Progress)
* .te-detail-hero
* .te-data-list (Key/Value-Liste)
* .te-step (Step-Card mit Mini-Mockup)
* .te-faq
* .te-cta
* .te-tabbar (Bottom Navigation)
* .te-mock-* (Mockup-Bausteine f?r Anleitung)
*
* Verwendung:
*
*
*
* ============================================================================ */
/* ============================================================================
1. CSS CUSTOM PROPERTIES (Tokens)
============================================================================ */
:root,
[data-bs-theme="light"] {
/* Brand */
--te-primary: #0086dd;
--te-primary-hover: #0073bd;
--te-primary-active: #005d99;
--te-primary-subtle: #dbeafe;
--te-primary-tint: #f3f9fd;
--te-secondary: #ff992b;
--te-secondary-hover: #e8861c;
--te-secondary-subtle: #fff3e6;
/* Neutral palette (Slate) */
--te-gray-50: #f8fafc;
--te-gray-100: #f1f5f9;
--te-gray-200: #e2e8f0;
--te-gray-300: #cbd5e1;
--te-gray-400: #94a3b8;
--te-gray-500: #64748b;
--te-gray-600: #475569;
--te-gray-700: #334155;
--te-gray-800: #1e293b;
--te-gray-900: #0f172a;
/* Energy semantic */
--te-solar: #f59e0b;
--te-solar-light: #fef3c7;
--te-battery: #10b981;
--te-battery-light: #d1fae5;
--te-grid-import: #ef4444;
--te-grid-import-light: rgba(239, 68, 68, 0.1);
--te-grid-export: #22c55e;
--te-consumption: #8b5cf6;
--te-consumption-light: rgba(139, 92, 246, 0.1);
/* Surfaces */
--te-body-bg: var(--te-gray-50);
--te-card-bg: #ffffff;
--te-card-border: var(--te-gray-200);
--te-text-primary: var(--te-gray-900);
--te-text-secondary: var(--te-gray-600);
--te-text-muted: var(--te-gray-500);
/* Shadows ? bewusst dezent */
--te-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--te-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--te-shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
--te-shadow-lg: 0 10px 20px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.03);
/* Radius */
--te-radius-sm: 6px;
--te-radius: 8px;
--te-radius-lg: 12px;
--te-radius-xl: 16px;
--te-radius-pill: 100px;
/* Spacing helpers */
--te-section-gap: 1.5rem;
/* --- Bootstrap variable overrides --- */
--bs-body-bg: var(--te-body-bg);
--bs-body-color: var(--te-text-primary);
--bs-body-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--bs-border-color: var(--te-gray-200);
--bs-border-color-translucent: var(--te-gray-200);
--bs-border-radius: var(--te-radius);
--bs-border-radius-sm: var(--te-radius-sm);
--bs-border-radius-lg: var(--te-radius-lg);
--bs-border-radius-xl: var(--te-radius-xl);
--bs-primary: var(--te-primary);
--bs-primary-rgb: 0, 134, 221;
--bs-secondary: var(--te-text-secondary);
--bs-secondary-rgb: 71, 85, 105;
--bs-success: var(--te-battery);
--bs-success-rgb: 16, 185, 129;
--bs-warning: var(--te-solar);
--bs-warning-rgb: 245, 158, 11;
--bs-danger: var(--te-grid-import);
--bs-danger-rgb: 239, 68, 68;
--bs-info: var(--te-primary);
--bs-link-color: var(--te-primary);
--bs-link-hover-color: var(--te-primary-hover);
--bs-focus-ring-color: rgba(0, 134, 221, 0.25);
}
[data-bs-theme="dark"] {
--te-body-bg: #0f172a;
--te-card-bg: #1e293b;
--te-card-border: #334155;
--te-text-primary: #f1f5f9;
--te-text-secondary: #94a3b8;
--te-text-muted: #64748b;
--te-primary-subtle: rgba(0, 134, 221, 0.15);
--te-primary-tint: rgba(0, 134, 221, 0.08);
--te-secondary-subtle: rgba(255, 153, 43, 0.15);
--te-solar-light: rgba(245, 158, 11, 0.15);
--te-battery-light: rgba(16, 185, 129, 0.15);
--te-grid-import-light: rgba(239, 68, 68, 0.15);
--te-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--te-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
--te-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--te-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
--bs-body-bg: var(--te-body-bg);
--bs-body-color: var(--te-text-primary);
--bs-border-color: var(--te-card-border);
--bs-border-color-translucent: var(--te-card-border);
}
/* ============================================================================
2. BASE
============================================================================ */
body {
font-family: var(--bs-body-font-family);
font-size: 0.9375rem;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.015em;
font-weight: 700;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* ============================================================================
3. NAVBAR (.navbar.navbar-te)
============================================================================ */
.navbar-te {
background: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--te-card-border);
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
[data-bs-theme="dark"] .navbar-te {
background: rgba(15, 23, 42, 0.92) !important;
border-bottom-color: var(--te-card-border);
}
.navbar-te .navbar-brand {
font-weight: 700;
font-size: 1.125rem;
letter-spacing: -0.01em;
color: var(--te-text-primary);
display: inline-flex;
align-items: baseline;
gap: 0;
}
.navbar-te .navbar-brand b { font-weight: 800; }
.navbar-te .navbar-brand .dot,
.navbar-te .navbar-brand .te-brand-energy { color: var(--te-primary); }
.navbar-te .navbar-brand .te-brand-energy { font-weight: 600; }
.navbar-te .nav-link {
color: var(--te-text-secondary);
font-weight: 600;
font-size: 0.875rem;
padding: 0.5rem 0.875rem;
margin: 0.125rem;
border-radius: var(--te-radius);
transition: all 0.15s ease;
}
.navbar-te .nav-link:hover {
color: var(--te-text-primary);
background: var(--te-gray-100);
}
[data-bs-theme="dark"] .navbar-te .nav-link:hover { background: var(--te-gray-800); }
.navbar-te .nav-link.active {
color: var(--te-primary);
background: var(--te-primary-subtle);
}
/* BETA-Badge im Brand */
.badge-beta {
background: var(--te-primary-subtle);
color: var(--te-primary);
font-size: 0.625rem;
font-weight: 700;
padding: 0.15rem 0.45rem;
border-radius: var(--te-radius-sm);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-left: 0.4rem;
vertical-align: middle;
}
/* Navbar Toggler ? vollst?ndig ?berschrieben.
Bootstrap-Default (Border + Hamburger-Background-Image + Focus-Ring) wird
ersetzt durch ein abgerundetes Icon-Quadrat mit eigenem 3-Linien-Icon
(Variante-1-Look). */
.navbar-toggler {
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: var(--te-radius-lg);
background: var(--te-gray-100);
color: var(--te-text-primary);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
}
.navbar-toggler:hover { background: var(--te-gray-200); }
.navbar-toggler:focus,
.navbar-toggler:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 134, 221, 0.15);
outline: 0;
}
[data-bs-theme="dark"] .navbar-toggler {
background: var(--te-gray-800);
color: var(--te-text-primary);
}
[data-bs-theme="dark"] .navbar-toggler:hover { background: var(--te-gray-700); }
/* Bootstrap-Default-Hamburger entfernen, eigene 3-Linien zeichnen.
Die mittlere Linie wird ?ber box-shadow auf ::before erzeugt ? funktioniert
auch ohne inneres (Bootstrap-Default-Markup). */
.navbar-toggler-icon {
width: 18px;
height: 12px;
background-image: none;
position: relative;
display: inline-block;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
content: '';
position: absolute;
left: 0;
height: 1.75px;
background: currentColor;
border-radius: 2px;
}
.navbar-toggler-icon::before {
top: 0;
right: 0;
box-shadow: 0 5px 0 currentColor; /* mittlere Linie */
}
.navbar-toggler-icon::after {
bottom: 0;
right: 4px; /* untere Linie etwas k?rzer */
}
/* ============================================================================
4. SUBNAV
============================================================================ */
.subnav-te {
background: var(--te-primary);
padding: 0;
}
.subnav-te .nav-link {
color: rgba(255, 255, 255, 0.82);
font-size: 0.875rem;
font-weight: 600;
padding: 0.625rem 1rem;
border-radius: var(--te-radius);
margin: 0.5rem 0.25rem;
transition: all 0.15s ease;
}
.subnav-te .nav-link:hover {
color: white;
background: rgba(255, 255, 255, 0.12);
}
.subnav-te .nav-link.active {
color: white;
background: rgba(255, 255, 255, 0.22);
}
/* Subnav: Desktop / Mobile */
.subnav-te .subnav-desktop {
display: flex;
align-items: center;
justify-content: space-between;
}
.subnav-te .subnav-desktop .nav { display: flex; gap: 0.25rem; }
.subnav-te .subnav-mobile { display: none; }
.subnav-collapse-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 1rem;
}
.subnav-collapse-current {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
font-weight: 600;
font-size: 0.9375rem;
}
.subnav-collapse-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.875rem;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--te-radius);
color: white;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.subnav-collapse-toggle:hover { background: rgba(255, 255, 255, 0.25); }
.subnav-collapse-toggle i { transition: transform 0.2s ease; }
.subnav-collapse-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.subnav-collapse-body {
background: rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.subnav-collapse-body .nav {
padding: 0.5rem;
flex-direction: column;
gap: 0.125rem;
}
.subnav-collapse-body .nav-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.875rem;
margin: 0;
font-size: 0.9375rem;
}
.subnav-collapse-body .nav-link i { width: 20px; text-align: center; opacity: 0.7; }
.subnav-collapse-body .nav-link.active i { opacity: 1; }
/* ============================================================================
5. CARDS
============================================================================ */
.card {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-xl);
box-shadow: var(--te-shadow-sm);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { box-shadow: var(--te-shadow); }
.card-header {
background: transparent;
border-bottom: 1px solid var(--te-card-border);
padding: 1rem 1.25rem;
font-weight: 700;
letter-spacing: -0.005em;
}
.card-body { padding: 1.25rem; }
.card-footer {
background: var(--te-gray-50);
border-top: 1px solid var(--te-card-border);
padding: 0.875rem 1.25rem;
}
[data-bs-theme="dark"] .card-footer { background: rgba(0, 0, 0, 0.2); }
.card-title {
font-size: 1rem;
font-weight: 700;
color: var(--te-text-primary);
margin-bottom: 0.25rem;
letter-spacing: -0.01em;
}
.card-subtitle {
font-size: 0.8125rem;
color: var(--te-text-muted);
font-weight: 500;
}
/* Active / highlighted card */
.card.active,
.card.is-active {
border-color: var(--te-primary);
box-shadow: 0 0 0 3px rgba(0, 134, 221, 0.08), var(--te-shadow-sm);
}
.card.active .card-title,
.card.is-active .card-title { color: var(--te-primary); }
/* ============================================================================
6. STAT CARDS (.card.card-stat OR .te-stat)
============================================================================ */
.card-stat,
.te-stat {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-xl);
padding: 1rem;
box-shadow: var(--te-shadow-sm);
}
.card-stat .stat-icon,
.te-stat .stat-icon {
width: 40px;
height: 40px;
border-radius: var(--te-radius-lg);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
margin-bottom: 0.75rem;
}
.card-stat .stat-icon.solar,
.te-stat .stat-icon.solar { background: var(--te-solar-light); color: var(--te-solar); }
.card-stat .stat-icon.battery,
.te-stat .stat-icon.battery { background: var(--te-battery-light); color: var(--te-battery); }
.card-stat .stat-icon.grid,
.te-stat .stat-icon.grid { background: var(--te-grid-import-light); color: var(--te-grid-import); }
.card-stat .stat-icon.consumption,
.te-stat .stat-icon.consumption { background: var(--te-consumption-light); color: var(--te-consumption); }
.card-stat .stat-icon.primary,
.te-stat .stat-icon.primary { background: var(--te-primary-subtle); color: var(--te-primary); }
.card-stat .stat-label,
.te-stat .stat-label {
font-size: 0.75rem;
color: var(--te-text-secondary);
margin-bottom: 0.125rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.card-stat .stat-value,
.te-stat .stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--te-text-primary);
line-height: 1.1;
letter-spacing: -0.015em;
}
.card-stat .stat-value small,
.te-stat .stat-value small {
font-size: 0.875rem;
font-weight: 600;
color: var(--te-text-muted);
margin-left: 0.125rem;
}
.card-stat .stat-meta,
.te-stat .stat-meta {
font-size: 0.75rem;
color: var(--te-text-muted);
margin-top: 0.25rem;
font-weight: 500;
}
.te-stat .stat-meta.up { color: var(--te-battery); }
.te-stat .stat-meta.down { color: var(--te-grid-import); }
/* ============================================================================
7. TABLES (.table-te)
============================================================================ */
.table-te {
--bs-table-bg: transparent;
font-size: 0.875rem;
margin-bottom: 0;
border-radius: var(--te-radius-xl);
overflow: hidden;
}
.table-te thead th {
background: var(--te-gray-50);
color: var(--te-text-secondary);
font-weight: 700;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--te-card-border);
white-space: nowrap;
}
.table-te thead th:first-child { border-top-left-radius: var(--te-radius-xl); }
.table-te thead th:last-child { border-top-right-radius: var(--te-radius-xl); }
[data-bs-theme="dark"] .table-te thead th { background: var(--te-gray-800); }
.table-te tbody td {
padding: 0.875rem 1rem;
vertical-align: middle;
border-bottom: 1px solid var(--te-card-border);
color: var(--te-text-primary);
}
.table-te tbody tr:last-child td { border-bottom: none; }
.table-te tbody tr:last-child td:first-child { border-bottom-left-radius: var(--te-radius-xl); }
.table-te tbody tr:last-child td:last-child { border-bottom-right-radius: var(--te-radius-xl); }
.table-te tbody tr:hover { background: var(--te-gray-50); }
[data-bs-theme="dark"] .table-te tbody tr:hover { background: var(--te-gray-800); }
.table-te .cell-mono {
font-family: 'SF Mono', 'Fira Code', Menlo, monospace;
font-size: 0.8125rem;
}
.table-te .cell-number { text-align: right; font-variant-numeric: tabular-nums; }
.table-te .cell-actions { text-align: right; white-space: nowrap; }
.table-te.table-clickable tbody tr {
cursor: pointer;
transition: background 0.15s ease;
}
/* ============================================================================
8. BUTTONS
============================================================================ */
.btn {
font-weight: 600;
border-radius: var(--te-radius);
padding: 0.55rem 1rem;
font-size: 0.875rem;
letter-spacing: 0;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
border-radius: var(--te-radius-sm);
}
.btn-lg {
padding: 0.75rem 1.25rem;
font-size: 0.9375rem;
border-radius: var(--te-radius-lg);
}
.btn-primary {
background: var(--te-primary);
border-color: var(--te-primary);
color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
background: var(--te-primary-hover);
border-color: var(--te-primary-hover);
color: #fff;
}
.btn-primary:active { background: var(--te-primary-active) !important; }
.btn-secondary {
background: var(--te-secondary);
border-color: var(--te-secondary);
color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus {
background: var(--te-secondary-hover);
border-color: var(--te-secondary-hover);
color: #fff;
}
.btn-dark {
background: var(--te-text-primary);
border-color: var(--te-text-primary);
color: #fff;
}
.btn-outline-primary {
color: var(--te-primary);
border-color: var(--te-primary);
background: transparent;
}
.btn-outline-primary:hover {
background: var(--te-primary);
color: #fff;
}
.btn-outline-secondary {
color: var(--te-text-secondary);
border-color: var(--te-gray-300);
background: transparent;
}
.btn-outline-secondary:hover {
background: var(--te-gray-100);
border-color: var(--te-gray-400);
color: var(--te-text-primary);
}
[data-bs-theme="dark"] .btn-outline-secondary { border-color: var(--te-gray-600); }
[data-bs-theme="dark"] .btn-outline-secondary:hover {
background: var(--te-gray-700);
border-color: var(--te-gray-500);
}
.btn-ghost {
background: transparent;
border: none;
color: var(--te-text-secondary);
}
.btn-ghost:hover {
background: var(--te-gray-100);
color: var(--te-text-primary);
}
[data-bs-theme="dark"] .btn-ghost:hover { background: var(--te-gray-700); }
.btn-icon {
width: 38px;
height: 38px;
padding: 0;
}
.btn-icon.btn-sm { width: 32px; height: 32px; }
/* Floating "Wizard"-Pill */
.btn-wizard {
font-weight: 600;
border: none;
border-radius: var(--te-radius-pill);
padding: 0.5rem 1rem;
font-size: 0.875rem;
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.btn-wizard:hover { background: rgba(255, 255, 255, 0.28); }
/* ============================================================================
9. FORMS
============================================================================ */
.form-label {
font-size: 0.75rem;
font-weight: 700;
color: var(--te-text-secondary);
margin-bottom: 0.4rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Standard inputs (Bootstrap + Legacy "Feld") */
.form-control,
.form-select,
.Feld,
input[type="text"], input[type="email"], input[type="number"],
input[type="tel"], input[type="password"], input[type="url"],
input[type="search"], input[type="date"], input[type="time"],
textarea, select {
border: 1px solid var(--te-gray-300);
border-radius: var(--te-radius);
padding: 0.625rem 0.875rem;
font-size: 0.9375rem;
font-weight: 500;
color: var(--te-text-primary);
background-color: var(--te-card-bg);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
font-family: inherit;
}
.form-control:hover,
.form-select:hover,
.Feld:hover { border-color: var(--te-gray-400); }
.form-control:focus,
.form-select:focus,
.Feld:focus {
border-color: var(--te-primary);
box-shadow: 0 0 0 3px rgba(0, 134, 221, 0.15);
outline: none;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .Feld {
border-color: var(--te-gray-600);
background-color: var(--te-gray-800);
}
.form-control::placeholder,
.Feld::placeholder { color: var(--te-text-muted); font-weight: 500; }
.form-control-sm {
padding: 0.45rem 0.7rem !important;
font-size: 0.8125rem !important;
border-radius: var(--te-radius-sm) !important;
}
.form-control-lg {
padding: 0.75rem 1rem;
font-size: 0.9375rem;
border-radius: var(--te-radius-lg);
}
.input-group-text {
background: var(--te-gray-100);
border-color: var(--te-gray-300);
color: var(--te-text-secondary);
font-size: 0.875rem;
font-weight: 600;
}
[data-bs-theme="dark"] .input-group-text {
background: var(--te-gray-700);
border-color: var(--te-gray-600);
}
.form-check-input {
width: 1.125rem;
height: 1.125rem;
margin-top: 0.18rem;
border-color: var(--te-gray-400);
cursor: pointer;
}
.form-check-input:checked {
background-color: var(--te-primary);
border-color: var(--te-primary);
}
.form-check-input:focus {
box-shadow: 0 0 0 3px rgba(0, 134, 221, 0.15);
border-color: var(--te-primary);
}
.form-check-label {
font-size: 0.9375rem;
color: var(--te-text-primary);
cursor: pointer;
}
.form-switch .form-check-input {
width: 2.5rem;
height: 1.375rem;
border-radius: 50rem;
}
.form-text {
font-size: 0.8125rem;
color: var(--te-text-muted);
margin-top: 0.375rem;
}
.is-invalid { border-color: var(--te-grid-import) !important; }
.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important; }
.invalid-feedback {
font-size: 0.8125rem;
color: var(--te-grid-import);
font-weight: 500;
}
.is-valid { border-color: var(--te-battery) !important; }
.is-valid:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important; }
/* ============================================================================
10. BADGES
============================================================================ */
.badge {
font-weight: 700;
font-size: 0.6875rem;
padding: 0.3rem 0.55rem;
border-radius: var(--te-radius-pill);
letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.badge-te-success,
.badge-te-battery { background: var(--te-battery-light); color: #065f46; }
.badge-te-warning,
.badge-te-solar { background: var(--te-solar-light); color: #92400e; }
.badge-te-danger { background: var(--te-grid-import-light); color: #991b1b; }
.badge-te-info,
.badge-te-primary { background: var(--te-primary-subtle); color: var(--te-primary); }
.badge-te-secondary { background: var(--te-secondary-subtle); color: #b95f00; }
.badge-te-neutral { background: var(--te-gray-100); color: var(--te-text-secondary); }
.badge-te-live {
background: var(--te-battery);
color: #fff;
}
[data-bs-theme="dark"] .badge-te-success,
[data-bs-theme="dark"] .badge-te-battery { background: rgba(16, 185, 129, 0.2); color: #34d399; }
[data-bs-theme="dark"] .badge-te-warning,
[data-bs-theme="dark"] .badge-te-solar { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
[data-bs-theme="dark"] .badge-te-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; }
[data-bs-theme="dark"] .badge-te-secondary{ background: rgba(255, 153, 43, 0.2); color: #fdba74; }
[data-bs-theme="dark"] .badge-te-neutral { background: var(--te-gray-700); color: var(--te-text-secondary); }
/* Status dot */
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.status-dot.online { background: var(--te-battery); }
.status-dot.offline { background: var(--te-gray-400); }
.status-dot.warning { background: var(--te-solar); }
.status-dot.error { background: var(--te-grid-import); }
.status-dot.pulse { animation: te-pulse 1.5s infinite; }
@keyframes te-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ============================================================================
11. ALERTS
============================================================================ */
.alert {
border-radius: var(--te-radius-lg);
border: 1px solid transparent;
font-size: 0.9375rem;
padding: 0.875rem 1rem;
}
.alert-te-info {
background: var(--te-primary-subtle);
border-color: rgba(0, 134, 221, 0.25);
color: #1e40af;
}
.alert-te-success {
background: var(--te-battery-light);
border-color: rgba(16, 185, 129, 0.3);
color: #065f46;
}
.alert-te-warning {
background: var(--te-solar-light);
border-color: rgba(245, 158, 11, 0.3);
color: #92400e;
}
.alert-te-danger {
background: var(--te-grid-import-light);
border-color: rgba(239, 68, 68, 0.3);
color: #991b1b;
}
/* ============================================================================
12. PROGRESS
============================================================================ */
.progress {
height: 0.5rem;
border-radius: var(--te-radius-pill);
background: var(--te-gray-100);
overflow: hidden;
}
[data-bs-theme="dark"] .progress { background: var(--te-gray-700); }
.progress-bar {
border-radius: var(--te-radius-pill);
background: var(--te-primary);
position: relative;
}
.progress-bar-solar { background: linear-gradient(90deg, var(--te-solar), #fbbf24); }
.progress-bar-battery { background: linear-gradient(90deg, #059669, var(--te-battery)); }
.progress-bar-animated::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: te-shimmer 1.8s infinite;
}
@keyframes te-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ============================================================================
12b. CLOSE BUTTON, DROPDOWN, MODAL, LIST-GROUP, ACCORDION,
PAGINATION, BREADCRUMB, NAV-TABS, NAV-PILLS, TOAST, OFFCANVAS,
TOOLTIP, POPOVER
============================================================================ */
/* --- close button --- */
.btn-close {
width: 28px;
height: 28px;
padding: 0;
border-radius: var(--te-radius);
background: var(--te-gray-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23475569'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center / 12px no-repeat;
opacity: 1;
border: 0;
transition: background-color 0.15s ease;
}
.btn-close:hover { background-color: var(--te-gray-200); }
.btn-close:focus { box-shadow: 0 0 0 3px rgba(0, 134, 221, 0.15); }
[data-bs-theme="dark"] .btn-close {
background-color: var(--te-gray-800);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cbd5e1'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
}
/* --- dropdown --- */
.dropdown-menu {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-lg);
box-shadow: var(--te-shadow-md);
padding: 0.4rem;
font-size: 0.875rem;
}
.dropdown-item {
border-radius: var(--te-radius-sm);
padding: 0.45rem 0.7rem;
font-weight: 500;
color: var(--te-text-primary);
transition: background 0.1s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: var(--te-gray-100);
color: var(--te-text-primary);
}
.dropdown-item.active,
.dropdown-item:active {
background: var(--te-primary-subtle);
color: var(--te-primary);
}
.dropdown-item.disabled,
.dropdown-item:disabled {
color: var(--te-text-muted);
}
.dropdown-divider {
border-top: 1px solid var(--te-card-border);
margin: 0.4rem 0;
}
.dropdown-header {
font-size: 0.6875rem;
font-weight: 700;
color: var(--te-text-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.4rem 0.7rem 0.2rem;
}
[data-bs-theme="dark"] .dropdown-item:hover { background: var(--te-gray-700); }
/* --- modal --- */
.modal-content {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-xl);
box-shadow: var(--te-shadow-lg);
}
.modal-header {
border-bottom: 1px solid var(--te-card-border);
padding: 1rem 1.25rem;
}
.modal-title {
font-weight: 700;
font-size: 1rem;
letter-spacing: -0.01em;
}
.modal-body { padding: 1.25rem; }
.modal-footer {
border-top: 1px solid var(--te-card-border);
padding: 0.875rem 1.25rem;
background: var(--te-gray-50);
border-bottom-left-radius: var(--te-radius-xl);
border-bottom-right-radius: var(--te-radius-xl);
}
[data-bs-theme="dark"] .modal-footer { background: rgba(0, 0, 0, 0.2); }
.modal-backdrop.show { opacity: 0.55; }
/* --- list-group --- */
.list-group {
border-radius: var(--te-radius-xl);
overflow: hidden;
border: 1px solid var(--te-card-border);
}
.list-group-item {
background: var(--te-card-bg);
border: 0;
border-bottom: 1px solid var(--te-card-border);
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: var(--te-text-primary);
}
.list-group-item:last-child { border-bottom: 0; }
.list-group-item.active {
background: var(--te-primary-subtle);
color: var(--te-primary);
border-color: var(--te-card-border);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
background: var(--te-gray-50);
color: var(--te-text-primary);
}
[data-bs-theme="dark"] .list-group-item-action:hover { background: var(--te-gray-800); }
.list-group-flush > .list-group-item { border-radius: 0; }
/* --- accordion --- */
.accordion {
--bs-accordion-bg: var(--te-card-bg);
--bs-accordion-border-color: var(--te-card-border);
--bs-accordion-border-radius: var(--te-radius-lg);
--bs-accordion-active-bg: var(--te-primary-tint);
--bs-accordion-active-color: var(--te-primary);
--bs-accordion-btn-focus-border-color: var(--te-primary);
--bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(0, 134, 221, 0.15);
}
.accordion-item {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
margin-bottom: 0.5rem;
border-radius: var(--te-radius-lg) !important;
overflow: hidden;
}
.accordion-button {
font-weight: 700;
font-size: 0.875rem;
padding: 0.875rem 1rem;
color: var(--te-text-primary);
background: var(--te-card-bg);
letter-spacing: -0.005em;
}
.accordion-button:not(.collapsed) {
background: var(--te-primary-tint);
color: var(--te-primary);
box-shadow: none;
}
.accordion-button:focus {
border-color: var(--te-primary);
box-shadow: 0 0 0 3px rgba(0, 134, 221, 0.15);
}
.accordion-body {
padding: 0.75rem 1rem 1rem;
font-size: 0.8125rem;
color: var(--te-text-secondary);
line-height: 1.55;
}
/* --- pagination --- */
.pagination {
--bs-pagination-color: var(--te-text-secondary);
--bs-pagination-bg: var(--te-card-bg);
--bs-pagination-border-color: var(--te-card-border);
--bs-pagination-hover-color: var(--te-text-primary);
--bs-pagination-hover-bg: var(--te-gray-100);
--bs-pagination-hover-border-color: var(--te-gray-300);
--bs-pagination-active-color: #fff;
--bs-pagination-active-bg: var(--te-primary);
--bs-pagination-active-border-color: var(--te-primary);
--bs-pagination-focus-box-shadow: 0 0 0 3px rgba(0, 134, 221, 0.15);
--bs-pagination-border-radius: var(--te-radius);
gap: 0.25rem;
}
.page-link {
font-weight: 600;
font-size: 0.875rem;
border-radius: var(--te-radius) !important;
border: 1px solid var(--te-card-border) !important;
padding: 0.45rem 0.75rem;
}
/* --- breadcrumb --- */
.breadcrumb {
font-size: 0.8125rem;
margin-bottom: 0.75rem;
}
.breadcrumb-item {
color: var(--te-text-muted);
font-weight: 500;
}
.breadcrumb-item a {
color: var(--te-text-secondary);
text-decoration: none;
}
.breadcrumb-item a:hover { color: var(--te-primary); text-decoration: none; }
.breadcrumb-item.active { color: var(--te-text-primary); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--te-text-muted); }
/* --- nav-tabs --- */
.nav-tabs {
border-bottom: 1px solid var(--te-card-border);
gap: 0.125rem;
}
.nav-tabs .nav-link {
border: 0;
border-bottom: 2px solid transparent;
color: var(--te-text-secondary);
font-weight: 600;
font-size: 0.875rem;
padding: 0.625rem 1rem;
border-radius: 0;
margin-bottom: -1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-tabs .nav-link:hover {
color: var(--te-text-primary);
border-color: transparent;
background: transparent;
}
.nav-tabs .nav-link.active {
color: var(--te-primary);
border-bottom-color: var(--te-primary);
background: transparent;
}
/* --- nav-pills --- */
.nav-pills {
--bs-nav-pills-link-active-bg: var(--te-primary);
--bs-nav-pills-border-radius: var(--te-radius);
gap: 0.25rem;
}
.nav-pills .nav-link {
color: var(--te-text-secondary);
font-weight: 600;
font-size: 0.875rem;
padding: 0.45rem 0.875rem;
}
.nav-pills .nav-link:hover {
background: var(--te-gray-100);
color: var(--te-text-primary);
}
.nav-pills .nav-link.active { color: #fff; }
/* --- toast --- */
.toast {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-lg);
box-shadow: var(--te-shadow-md);
font-size: 0.875rem;
}
.toast-header {
background: transparent;
border-bottom: 1px solid var(--te-card-border);
font-weight: 700;
color: var(--te-text-primary);
padding: 0.625rem 0.875rem;
}
.toast-body { padding: 0.75rem 0.875rem; color: var(--te-text-secondary); }
/* --- offcanvas --- */
.offcanvas {
background: var(--te-card-bg);
border-color: var(--te-card-border);
}
.offcanvas-header {
border-bottom: 1px solid var(--te-card-border);
padding: 1rem 1.25rem;
}
.offcanvas-title { font-weight: 700; letter-spacing: -0.01em; }
.offcanvas-body { padding: 1.25rem; }
/* --- tooltip --- */
.tooltip {
--bs-tooltip-bg: var(--te-gray-900);
--bs-tooltip-color: #fff;
--bs-tooltip-padding-y: 0.4rem;
--bs-tooltip-padding-x: 0.6rem;
--bs-tooltip-border-radius: var(--te-radius);
--bs-tooltip-font-size: 0.75rem;
font-weight: 600;
}
[data-bs-theme="dark"] .tooltip { --bs-tooltip-bg: var(--te-gray-700); }
/* --- popover --- */
.popover {
--bs-popover-bg: var(--te-card-bg);
--bs-popover-border-color: var(--te-card-border);
--bs-popover-border-radius: var(--te-radius-lg);
--bs-popover-box-shadow: var(--te-shadow-md);
--bs-popover-header-bg: var(--te-gray-50);
--bs-popover-header-color: var(--te-text-primary);
--bs-popover-body-color: var(--te-text-secondary);
font-family: var(--bs-body-font-family);
}
[data-bs-theme="dark"] .popover { --bs-popover-header-bg: var(--te-gray-800); }
/* --- spinner --- */
.spinner-border, .spinner-grow { color: var(--te-primary); }
/* --- range slider --- */
.form-range::-webkit-slider-thumb { background-color: var(--te-primary); }
.form-range::-moz-range-thumb { background-color: var(--te-primary); }
.form-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(0, 134, 221, 0.2);
}
/* ============================================================================
13. PAGE HEADER (.te-page-header)
============================================================================ */
.te-page-header {
padding: 1.5rem 0 1rem;
}
.te-page-header .te-greeting {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 0.5rem;
}
.te-page-header .te-greeting-label {
font-size: 0.6875rem;
font-weight: 700;
color: var(--te-primary);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.te-page-header .te-greeting-line {
flex: 1;
height: 1px;
background: var(--te-card-border);
}
.te-page-header .te-page-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--te-text-primary);
margin-bottom: 0.25rem;
letter-spacing: -0.02em;
line-height: 1.2;
}
.te-page-header .te-page-title strong { color: var(--te-primary); font-weight: 800; }
.te-page-header .te-page-subtitle {
font-size: 0.875rem;
color: var(--te-text-secondary);
line-height: 1.55;
margin: 0;
}
/* Larger desktop variant */
@media (min-width: 768px) {
.te-page-header .te-page-title { font-size: 1.75rem; }
.te-page-header .te-page-subtitle { font-size: 1rem; }
}
/* Section Headers */
.section-header-te { margin-bottom: 1rem; }
.section-header-te .section-title {
font-size: 1rem;
font-weight: 700;
color: var(--te-text-primary);
margin-bottom: 0.125rem;
letter-spacing: -0.01em;
}
.section-header-te .section-subtitle {
font-size: 0.8125rem;
color: var(--te-text-secondary);
}
/* ============================================================================
14. FILTER CHIPS (.te-filter, .te-filter-chip)
============================================================================ */
.te-filter {
display: flex;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 0.25rem;
}
.te-filter::-webkit-scrollbar { display: none; }
.te-filter-chip {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-pill);
padding: 0.4rem 0.875rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--te-text-secondary);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.375rem;
transition: all 0.15s ease;
text-decoration: none;
}
.te-filter-chip:hover {
color: var(--te-text-primary);
border-color: var(--te-gray-400);
text-decoration: none;
}
.te-filter-chip.active {
background: var(--te-primary);
color: #fff;
border-color: var(--te-primary);
}
.te-filter-chip .count {
background: var(--te-gray-100);
color: var(--te-text-muted);
padding: 0.06rem 0.4rem;
border-radius: var(--te-radius-pill);
font-size: 0.6875rem;
font-weight: 700;
}
.te-filter-chip.active .count {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* ============================================================================
15. DATE GROUP HEADER (.te-date-header)
============================================================================ */
.te-date-header {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.25rem 0.375rem;
margin-top: 0.75rem;
}
.te-date-header .te-date-label {
font-size: 0.6875rem;
font-weight: 700;
color: var(--te-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.te-date-header .te-date-line {
flex: 1;
height: 1px;
background: var(--te-card-border);
}
.te-date-header .te-date-total {
font-size: 0.6875rem;
color: var(--te-text-secondary);
font-weight: 600;
}
/* ============================================================================
16. SESSION CARD (.te-session)
============================================================================ */
.te-session {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-xl);
padding: 0.875rem;
cursor: pointer;
box-shadow: var(--te-shadow-sm);
transition: box-shadow 0.15s ease, border-color 0.15s ease;
display: block;
text-decoration: none;
color: inherit;
}
.te-session:hover {
box-shadow: var(--te-shadow);
text-decoration: none;
color: inherit;
}
.te-session.is-live {
border-color: var(--te-battery);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08), var(--te-shadow-sm);
}
.te-session-head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.625rem;
}
.te-session-icon {
width: 40px;
height: 40px;
border-radius: var(--te-radius-lg);
background: var(--te-primary-subtle);
color: var(--te-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
.te-session-icon.solar { background: var(--te-solar-light); color: var(--te-solar); }
.te-session-icon.live { background: var(--te-battery-light); color: var(--te-battery); }
.te-session-icon.live::after {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--te-battery);
border: 2px solid var(--te-card-bg);
animation: te-pulse 1.6s infinite;
}
.te-session-icon.canceled { background: var(--te-gray-100); color: var(--te-text-muted); }
.te-session-title-block { flex: 1; min-width: 0; }
.te-session-title-row {
display: flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.125rem;
flex-wrap: wrap;
}
.te-session-title {
font-size: 0.875rem;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--te-text-primary);
}
.te-session-time {
font-size: 0.6875rem;
color: var(--te-text-muted);
font-weight: 500;
}
.te-session-price {
font-size: 1rem;
font-weight: 700;
text-align: right;
color: var(--te-text-primary);
flex-shrink: 0;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.te-session-price.live { color: var(--te-battery); }
.te-session-price.canceled { color: var(--te-text-muted); font-weight: 600; }
.te-session-body {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.625rem;
padding-top: 0.625rem;
border-top: 1px solid var(--te-card-border);
}
.te-session-body .k {
font-size: 0.625rem;
color: var(--te-text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 0.125rem;
}
.te-session-body .v {
font-size: 0.8125rem;
font-weight: 700;
color: var(--te-text-primary);
letter-spacing: -0.005em;
}
.te-session-body .v small {
font-weight: 500;
color: var(--te-text-muted);
font-size: 0.6875rem;
margin-left: 0.0625rem;
}
/* Live progress block inside session */
.te-session-live {
margin-top: 0.75rem;
padding-top: 0.625rem;
border-top: 1px solid var(--te-card-border);
}
.te-session-live-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.375rem;
font-size: 0.6875rem;
}
.te-session-live-row .lbl {
color: var(--te-text-secondary);
font-weight: 600;
}
.te-session-live-row .val {
color: var(--te-text-primary);
font-weight: 700;
}
/* ============================================================================
17. EMPTY STATE
============================================================================ */
.empty-state,
.te-empty {
text-align: center;
padding: 1.5rem 1rem;
background: var(--te-card-bg);
border: 1px dashed var(--te-card-border);
border-radius: var(--te-radius-xl);
}
.te-empty .icon,
.empty-state-icon {
width: 48px;
height: 48px;
margin: 0 auto 0.625rem;
background: var(--te-gray-100);
border-radius: var(--te-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--te-text-muted);
}
.te-empty .title,
.empty-state-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--te-text-primary);
margin-bottom: 0.25rem;
}
.te-empty .text,
.empty-state-text {
font-size: 0.8125rem;
color: var(--te-text-secondary);
max-width: 320px;
margin: 0 auto;
line-height: 1.45;
}
/* ============================================================================
17b. PAGE-COMPONENTS (Startseite, Ladevorgang, Detail)
============================================================================ */
/* QR-Card ? blauer Hero auf der Startseite ----------------------------------- */
.te-qr-card {
background: var(--te-primary);
color: #fff;
border: 0;
border-radius: var(--te-radius-xl);
position: relative;
overflow: hidden;
}
.te-qr-card:hover { box-shadow: var(--te-shadow); }
.te-qr-card::before {
content: '';
position: absolute;
top: -60px;
right: -40px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.te-qr-card::after {
content: '';
position: absolute;
bottom: -100px;
right: 30px;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
pointer-events: none;
}
.te-qr-card .card-body { position: relative; padding: 1.5rem; }
.te-qr-card .card-title { color: #fff; font-weight: 700; font-size: 1.1rem; }
.te-qr-card .text-white-75 { color: rgba(255, 255, 255, 0.85); }
.te-qr-icon {
width: 48px;
height: 48px;
border-radius: var(--te-radius-lg);
background: rgba(255, 255, 255, 0.18);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.875rem;
color: #fff;
font-size: 1.5rem;
}
.te-qr-btn {
background: #fff;
color: var(--te-primary);
border: 0;
font-weight: 700;
padding: 0.6rem 1rem;
border-radius: var(--te-radius);
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.te-qr-btn:hover { background: rgba(255, 255, 255, 0.92); color: var(--te-primary); }
/* Trust-Badges (H?kchen-Pills) ---------------------------------------------- */
.te-trust-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--te-text-secondary);
background: var(--te-gray-100);
padding: 0.3rem 0.625rem;
border-radius: var(--te-radius-pill);
}
.te-trust-badge i { color: var(--te-battery); font-size: 0.875rem; }
/* Key/Value-Inline (innerhalb von Cards) ------------------------------------ */
.te-kv-label {
font-size: 0.625rem;
font-weight: 700;
color: var(--te-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.125rem;
}
.te-kv-value {
font-size: 0.875rem;
font-weight: 700;
color: var(--te-text-primary);
letter-spacing: -0.005em;
}
/* Tarif-Liste --------------------------------------------------------------- */
.te-tariff-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.te-tariff {
background: var(--te-card-bg);
border: 1.5px solid var(--te-card-border);
border-radius: var(--te-radius-lg);
padding: 0.75rem;
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
margin: 0;
transition: border-color 0.15s ease, background 0.15s ease;
}
.te-tariff:hover { border-color: var(--te-gray-300); }
.te-tariff.active {
border-color: var(--te-primary);
background: var(--te-primary-tint);
}
.te-tariff-icon {
width: 40px;
height: 40px;
border-radius: var(--te-radius);
background: var(--te-gray-100);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--te-text-secondary);
font-size: 1.125rem;
}
.te-tariff.active .te-tariff-icon {
background: var(--te-primary);
color: #fff;
}
.te-tariff-info { flex: 1; min-width: 0; }
.te-tariff-name {
font-weight: 700;
font-size: 0.875rem;
letter-spacing: -0.005em;
margin-bottom: 0.125rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
.te-tariff-price {
font-size: 0.6875rem;
color: var(--te-text-secondary);
font-weight: 500;
}
.te-tariff-radio {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1.5px solid var(--te-card-border);
flex-shrink: 0;
background: var(--te-card-bg);
}
.te-tariff.active .te-tariff-radio {
border-color: var(--te-primary);
background: var(--te-primary);
position: relative;
}
.te-tariff.active .te-tariff-radio::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
/* Payment-Grid -------------------------------------------------------------- */
.te-pay-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.te-pay-opt {
background: var(--te-card-bg);
border: 1.5px solid var(--te-card-border);
border-radius: var(--te-radius);
padding: 0.75rem 0.375rem;
text-align: center;
font-size: 0.6875rem;
font-weight: 700;
cursor: pointer;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
color: var(--te-text-primary);
transition: all 0.15s ease;
}
.te-pay-opt:hover { border-color: var(--te-gray-300); }
.te-pay-opt.active {
background: var(--te-text-primary);
color: #fff;
border-color: var(--te-text-primary);
}
.te-pay-opt .icon {
font-size: 1.125rem;
}
/* Cost-Row (erwartete Kosten / Summe) --------------------------------------- */
.te-cost-row {
background: var(--te-gray-50);
border-radius: var(--te-radius-lg);
padding: 0.75rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.te-cost-row .lbl {
font-size: 0.75rem;
color: var(--te-text-secondary);
font-weight: 600;
}
.te-cost-row .val {
font-size: 1rem;
font-weight: 700;
color: var(--te-text-primary);
letter-spacing: -0.01em;
}
[data-bs-theme="dark"] .te-cost-row { background: rgba(0, 0, 0, 0.2); }
/* ============================================================================
18. DETAIL HERO + DATA LIST (.te-detail-hero, .te-data-list)
============================================================================ */
.te-detail-hero {
background: var(--te-primary);
color: #fff;
border-radius: var(--te-radius-xl);
padding: 1.125rem;
margin-bottom: 0.875rem;
position: relative;
overflow: hidden;
}
.te-detail-hero::before {
content: '';
position: absolute;
top: -40px;
right: -30px;
width: 140px;
height: 140px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.te-detail-hero .te-detail-status {
display: inline-flex;
align-items: center;
gap: 0.375rem;
background: rgba(255, 255, 255, 0.18);
color: #fff;
padding: 0.25rem 0.55rem;
border-radius: var(--te-radius-pill);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 0.875rem;
position: relative;
}
.te-detail-hero h2 {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
margin-bottom: 0.25rem;
position: relative;
}
.te-detail-hero .te-detail-amount {
font-size: 2.375rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 0.25rem;
position: relative;
}
.te-detail-hero .te-detail-amount small {
font-size: 1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.te-detail-hero .te-detail-meta {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.85);
position: relative;
font-weight: 500;
}
/* Data list (.te-data-list) ? Key/Value table for details */
.te-data-list {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-xl);
overflow: hidden;
margin-bottom: 0.875rem;
box-shadow: var(--te-shadow-sm);
}
.te-data-list-head {
padding: 0.75rem 0.875rem;
border-bottom: 1px solid var(--te-card-border);
font-size: 0.6875rem;
font-weight: 700;
color: var(--te-text-secondary);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.te-data-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.7rem 0.875rem;
border-bottom: 1px solid var(--te-card-border);
font-size: 0.8125rem;
gap: 1rem;
}
.te-data-row:last-child { border-bottom: 0; }
.te-data-row .k {
color: var(--te-text-secondary);
font-weight: 600;
flex-shrink: 0;
}
.te-data-row .v {
font-weight: 600;
color: var(--te-text-primary);
text-align: right;
font-variant-numeric: tabular-nums;
}
.te-data-row .v.mono {
font-family: 'SF Mono', 'Fira Code', Menlo, monospace;
font-size: 0.75rem;
}
.te-data-row.total {
background: var(--te-gray-50);
border-top: 1px solid var(--te-card-border);
}
[data-bs-theme="dark"] .te-data-row.total { background: rgba(0, 0, 0, 0.2); }
.te-data-row.total .k { color: var(--te-text-primary); font-weight: 700; }
.te-data-row.total .v { color: var(--te-primary); font-size: 1rem; }
/* ============================================================================
19. STEP CARDS (.te-step)
============================================================================ */
.te-progress-overview {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-xl);
padding: 0.875rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: var(--te-shadow-sm);
}
.te-progress-circle {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
background: conic-gradient(var(--te-primary) 0% var(--te-progress, 0%), var(--te-gray-100) var(--te-progress, 0%) 100%);
}
.te-progress-circle::after {
content: '';
position: absolute;
inset: 4px;
background: var(--te-card-bg);
border-radius: 50%;
}
.te-progress-circle .num {
font-size: 0.8125rem;
font-weight: 800;
color: var(--te-primary);
z-index: 1;
letter-spacing: -0.02em;
}
.te-progress-text { flex: 1; }
.te-progress-text h3 {
font-size: 0.875rem;
font-weight: 700;
margin-bottom: 0.125rem;
letter-spacing: -0.01em;
}
.te-progress-text p {
font-size: 0.75rem;
color: var(--te-text-secondary);
line-height: 1.4;
margin: 0;
}
.te-step {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-xl);
margin-bottom: 0.75rem;
overflow: hidden;
position: relative;
box-shadow: var(--te-shadow-sm);
}
.te-step.is-active {
border-color: var(--te-primary);
box-shadow: 0 0 0 3px rgba(0, 134, 221, 0.08), var(--te-shadow-sm);
}
.te-step.is-done .te-step-num {
background: var(--te-battery);
color: #fff;
border-color: var(--te-battery);
}
.te-step-head {
padding: 1rem 0.875rem 0;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.te-step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--te-gray-100);
color: var(--te-text-secondary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.875rem;
flex-shrink: 0;
border: 1.5px solid var(--te-card-border);
}
.te-step.is-active .te-step-num {
background: var(--te-primary);
color: #fff;
border-color: var(--te-primary);
}
.te-step-text { flex: 1; min-width: 0; }
.te-step-eyebrow {
font-size: 0.625rem;
font-weight: 700;
color: var(--te-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.125rem;
}
.te-step-title {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.015em;
margin-bottom: 0.25rem;
line-height: 1.2;
}
.te-step-desc {
font-size: 0.8125rem;
color: var(--te-text-secondary);
line-height: 1.5;
margin: 0;
}
.te-step-mockup {
margin: 0.875rem;
background: var(--te-gray-50);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-lg);
padding: 0.875rem;
position: relative;
}
[data-bs-theme="dark"] .te-step-mockup { background: rgba(0, 0, 0, 0.2); }
.te-step-mockup-label {
position: absolute;
top: -8px;
left: 12px;
background: var(--te-card-bg);
padding: 0 0.5rem;
font-size: 0.5625rem;
font-weight: 700;
color: var(--te-text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-pill);
}
/* ============================================================================
20. MOCKUP BUILDING BLOCKS (.te-mock-*)
============================================================================ */
/* QR scan mockup */
.te-mock-qr {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
}
.te-mock-qr-frame {
width: 100px;
height: 100px;
background: var(--te-card-bg);
border: 1.5px solid var(--te-card-border);
border-radius: var(--te-radius-lg);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.te-mock-qr-frame::before,
.te-mock-qr-frame::after,
.te-mock-qr-frame i:nth-child(1),
.te-mock-qr-frame i:nth-child(2) {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--te-primary);
}
.te-mock-qr-frame::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.te-mock-qr-frame::after { top: 8px; right: 8px; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; }
.te-mock-qr-frame i:nth-child(1) { bottom: 8px; left: 8px; border-right: 0; border-top: 0; border-radius: 0 0 0 3px; }
.te-mock-qr-frame i:nth-child(2) { bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }
.te-mock-qr-caption {
font-size: 0.6875rem;
color: var(--te-text-secondary);
text-align: center;
}
/* Tariff mockup */
.te-mock-tariffs { display: flex; flex-direction: column; gap: 0.375rem; }
.te-mock-tariff {
background: var(--te-card-bg);
border: 1.5px solid var(--te-card-border);
border-radius: var(--te-radius-lg);
padding: 0.625rem;
display: flex;
align-items: center;
gap: 0.625rem;
}
.te-mock-tariff.active {
border-color: var(--te-primary);
background: var(--te-primary-tint);
}
.te-mock-tariff-icon {
width: 28px;
height: 28px;
border-radius: var(--te-radius);
background: var(--te-gray-100);
color: var(--te-text-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.te-mock-tariff.active .te-mock-tariff-icon { background: var(--te-primary); color: #fff; }
.te-mock-tariff .name { flex: 1; font-size: 0.75rem; font-weight: 700; }
.te-mock-tariff .price {
font-size: 0.6875rem;
color: var(--te-text-muted);
font-weight: 600;
margin-right: 0.375rem;
}
.te-mock-tariff-radio {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid var(--te-card-border);
flex-shrink: 0;
background: var(--te-card-bg);
}
.te-mock-tariff.active .te-mock-tariff-radio {
border-color: var(--te-primary);
background: var(--te-primary);
position: relative;
}
.te-mock-tariff.active .te-mock-tariff-radio::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: #fff;
}
/* Payment mockup */
.te-mock-pay {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.375rem;
}
.te-mock-pay-opt {
background: var(--te-card-bg);
border: 1.5px solid var(--te-card-border);
border-radius: var(--te-radius);
padding: 0.625rem 0.25rem;
text-align: center;
font-size: 0.625rem;
font-weight: 700;
}
.te-mock-pay-opt.active {
background: var(--te-text-primary);
color: #fff;
border-color: var(--te-text-primary);
}
.te-mock-pay-opt .icon {
font-size: 1rem;
display: block;
margin-bottom: 0.1875rem;
}
/* Live mockup */
.te-mock-live {
background: linear-gradient(135deg, var(--te-battery), #059669);
color: #fff;
border-radius: var(--te-radius-lg);
padding: 0.75rem;
text-align: center;
}
.te-mock-live .stat {
font-size: 1.625rem;
font-weight: 800;
margin-bottom: 0.125rem;
letter-spacing: -0.02em;
}
.te-mock-live .lbl {
font-size: 0.6875rem;
opacity: 0.85;
font-weight: 600;
margin-bottom: 0.625rem;
}
.te-mock-live-bar {
height: 6px;
background: rgba(255, 255, 255, 0.25);
border-radius: var(--te-radius-pill);
overflow: hidden;
margin-bottom: 0.375rem;
}
.te-mock-live-bar > div {
height: 100%;
background: #fff;
border-radius: var(--te-radius-pill);
}
.te-mock-live-meta {
display: flex;
justify-content: space-between;
font-size: 0.625rem;
opacity: 0.85;
font-weight: 600;
}
/* Receipt mockup */
.te-mock-receipt {
background: var(--te-card-bg);
border: 1.5px solid var(--te-card-border);
border-radius: var(--te-radius-lg);
padding: 0.75rem;
}
.te-mock-receipt h5 {
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--te-text-secondary);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.te-mock-receipt .row {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
padding: 0.25rem 0;
margin: 0;
}
.te-mock-receipt .row .k { color: var(--te-text-secondary); }
.te-mock-receipt .row .v { font-weight: 700; }
.te-mock-receipt .row.total {
border-top: 1px dashed var(--te-card-border);
margin-top: 0.25rem;
padding-top: 0.5rem;
}
.te-mock-receipt .row.total .v { color: var(--te-primary); font-size: 0.875rem; }
/* ============================================================================
21. FAQ (.te-faq)
============================================================================ */
.te-faq-title {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
margin: 1.25rem 0 0.625rem;
}
.te-faq-item {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-lg);
padding: 0.75rem 0.875rem;
margin-bottom: 0.5rem;
cursor: pointer;
transition: border-color 0.15s ease;
}
.te-faq-item:hover { border-color: var(--te-gray-300); }
.te-faq-q {
font-size: 0.8125rem;
font-weight: 700;
color: var(--te-text-primary);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.625rem;
}
.te-faq-q svg,
.te-faq-q i {
color: var(--te-text-muted);
flex-shrink: 0;
transition: transform 0.15s ease;
}
.te-faq-item.is-open .te-faq-q svg,
.te-faq-item.is-open .te-faq-q i { transform: rotate(180deg); }
.te-faq-a {
font-size: 0.75rem;
color: var(--te-text-secondary);
line-height: 1.5;
margin-top: 0.375rem;
padding-top: 0.5rem;
border-top: 1px solid var(--te-card-border);
display: none;
}
.te-faq-item.is-open .te-faq-a { display: block; }
/* ============================================================================
22. CTA CARD (.te-cta)
============================================================================ */
.te-cta {
background: var(--te-primary);
color: #fff;
border-radius: var(--te-radius-xl);
padding: 1.125rem;
margin-top: 1rem;
text-align: center;
position: relative;
overflow: hidden;
}
.te-cta::before {
content: '';
position: absolute;
top: -40px;
right: -30px;
width: 140px;
height: 140px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.te-cta h3 {
font-size: 1.125rem;
font-weight: 800;
margin-bottom: 0.375rem;
letter-spacing: -0.01em;
position: relative;
}
.te-cta p {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 0.875rem;
line-height: 1.5;
position: relative;
}
.te-cta .btn,
.te-cta a.btn {
background: #fff;
color: var(--te-primary);
border: none;
position: relative;
font-weight: 700;
}
.te-cta .btn:hover { background: rgba(255, 255, 255, 0.92); color: var(--te-primary); }
/* ============================================================================
23. BOTTOM TABBAR (.te-tabbar)
============================================================================ */
.te-tabbar {
position: sticky;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--te-card-border);
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0.5rem 0.5rem 1.125rem;
z-index: 30;
}
[data-bs-theme="dark"] .te-tabbar {
background: rgba(15, 23, 42, 0.92);
}
.te-tabbar .te-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1875rem;
font-size: 0.625rem;
font-weight: 600;
color: var(--te-text-muted);
padding: 0.375rem 0.25rem;
cursor: pointer;
text-decoration: none;
}
.te-tabbar .te-tab:hover {
color: var(--te-text-primary);
text-decoration: none;
}
.te-tabbar .te-tab.active { color: var(--te-primary); }
.te-tabbar .te-tab svg,
.te-tabbar .te-tab i { width: 22px; height: 22px; font-size: 1.25rem; }
/* ============================================================================
24. ENERGY BAR (kept from previous version, refined tokens)
============================================================================ */
.energy-bar {
position: relative;
height: 48px;
background: var(--te-gray-100);
border-radius: var(--te-radius-lg);
overflow: hidden;
}
[data-bs-theme="dark"] .energy-bar { background: var(--te-gray-800); }
.energy-bar-center {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--te-gray-400);
z-index: 2;
}
.energy-bar-track { display: flex; height: 100%; }
.energy-bar-left,
.energy-bar-right { width: 50%; display: flex; align-items: center; }
.energy-bar-left { justify-content: flex-end; }
.energy-bar-fill {
height: 100%;
display: flex;
align-items: center;
padding: 0 0.75rem;
font-size: 0.8125rem;
font-weight: 700;
color: white;
}
.energy-bar-fill.export {
background: linear-gradient(270deg, var(--te-grid-export), transparent);
border-radius: var(--te-radius) 0 0 var(--te-radius);
justify-content: flex-start;
}
.energy-bar-fill.import {
background: linear-gradient(90deg, var(--te-grid-import), transparent);
border-radius: 0 var(--te-radius) var(--te-radius) 0;
justify-content: flex-end;
}
.energy-bar-scale {
display: flex;
justify-content: space-between;
font-size: 0.6875rem;
color: var(--te-text-muted);
margin-top: 0.25rem;
padding: 0 0.25rem;
}
.battery-visual {
position: relative;
width: 80px;
height: 40px;
background: var(--te-gray-100);
border: 2px solid var(--te-gray-400);
border-radius: var(--te-radius);
}
[data-bs-theme="dark"] .battery-visual {
background: var(--te-gray-800);
border-color: var(--te-gray-600);
}
.battery-visual::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 16px;
background: var(--te-gray-400);
border-radius: 0 2px 2px 0;
}
[data-bs-theme="dark"] .battery-visual::after { background: var(--te-gray-600); }
.battery-fill {
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
background: var(--te-battery);
border-radius: calc(var(--te-radius-sm) - 2px);
transition: width 0.3s ease;
}
.battery-fill.low { background: var(--te-grid-import); }
.battery-fill.medium { background: var(--te-solar); }
/* ============================================================================
25. WEATHER FORECAST (kept)
============================================================================ */
.weather-forecast {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
text-align: center;
}
.weather-hour {
padding: 0.5rem;
border-radius: var(--te-radius);
background: var(--te-gray-50);
}
[data-bs-theme="dark"] .weather-hour { background: var(--te-gray-800); }
/* ============================================================================
26. FOOTER
============================================================================ */
.footer-te {
background: var(--te-gray-900);
color: var(--te-gray-400);
padding: 2.5rem 0 1.5rem;
margin-top: 3rem;
}
.footer-te .footer-title {
font-size: 0.8125rem;
font-weight: 700;
color: white;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.footer-te a {
color: var(--te-gray-400);
font-size: 0.8125rem;
transition: color 0.15s ease;
}
.footer-te a:hover { color: white; text-decoration: none; }
/* ============================================================================
27. UTILITIES
============================================================================ */
.text-te-primary { color: var(--te-text-primary) !important; }
.text-te-secondary { color: var(--te-text-secondary) !important; }
.text-te-muted { color: var(--te-text-muted) !important; }
.text-te-brand { color: var(--te-primary) !important; }
.text-te-secondary-brand { color: var(--te-secondary) !important; }
.text-te-solar { color: var(--te-solar) !important; }
.text-te-battery { color: var(--te-battery) !important; }
.text-te-danger { color: var(--te-grid-import) !important; }
.text-te-success { color: var(--te-grid-export) !important; }
.bg-te-page { background-color: var(--te-body-bg) !important; }
.bg-te-card { background-color: var(--te-card-bg) !important; }
.bg-te-primary { background-color: var(--te-primary) !important; color: #fff; }
.bg-te-primary-subtle { background-color: var(--te-primary-subtle) !important; }
.bg-te-secondary-subtle { background-color: var(--te-secondary-subtle) !important; }
.bg-te-solar-light { background-color: var(--te-solar-light) !important; }
.bg-te-battery-light { background-color: var(--te-battery-light) !important; }
.border-te { border: 1px solid var(--te-card-border) !important; }
.border-te-primary { border-color: var(--te-primary) !important; }
.shadow-te-sm { box-shadow: var(--te-shadow-sm) !important; }
.shadow-te { box-shadow: var(--te-shadow) !important; }
.shadow-te-md { box-shadow: var(--te-shadow-md) !important; }
.shadow-te-lg { box-shadow: var(--te-shadow-lg) !important; }
.rounded-te { border-radius: var(--te-radius) !important; }
.rounded-te-lg { border-radius: var(--te-radius-lg) !important; }
.rounded-te-xl { border-radius: var(--te-radius-xl) !important; }
.rounded-te-pill { border-radius: var(--te-radius-pill) !important; }
.font-mono { font-family: 'SF Mono', 'Fira Code', Menlo, monospace !important; }
/* Live indicator (timestamp + dot) */
.live-indicator {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--te-text-muted);
}
.live-dot {
width: 8px;
height: 8px;
background: var(--te-battery);
border-radius: 50%;
animation: te-pulse 2s infinite;
}
.timestamp {
font-size: 0.75rem;
color: var(--te-text-muted);
}
/* ============================================================================
28. SETUP PAGE (preserved + retuned to match)
============================================================================ */
.setup-hero {
background: linear-gradient(135deg, var(--te-primary) 0%, #0066b3 100%);
color: white;
padding: 2.5rem;
margin-bottom: 1.5rem;
border-radius: var(--te-radius-xl);
position: relative;
overflow: hidden;
}
.setup-hero::before {
content: '';
position: absolute;
top: -60px;
right: -40px;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.setup-hero-content { max-width: 600px; position: relative; }
.setup-hero-title {
font-size: 1.875rem;
font-weight: 800;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.setup-hero-subtitle {
font-size: 1rem;
opacity: 0.9;
margin-bottom: 1.25rem;
}
.setup-progress-bar {
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--te-radius-pill);
overflow: hidden;
margin-bottom: 0.5rem;
}
.setup-progress-fill {
height: 100%;
background: white;
border-radius: var(--te-radius-pill);
transition: width 0.5s ease;
}
.setup-progress-stats {
display: flex;
justify-content: space-between;
font-size: 0.8125rem;
opacity: 0.9;
font-weight: 600;
}
.setup-card {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-xl);
overflow: hidden;
transition: all 0.2s ease;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: var(--te-shadow-sm);
}
.setup-card:hover {
box-shadow: var(--te-shadow-md);
transform: translateY(-2px);
}
.setup-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.setup-card-link:hover { color: inherit; text-decoration: none; }
.setup-card-header { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1.125rem 1.125rem 0; }
.setup-card-icon {
width: 56px;
height: 56px;
border-radius: var(--te-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.375rem;
flex-shrink: 0;
}
.setup-card-icon.solar { background: var(--te-solar-light); color: var(--te-solar); }
.setup-card-icon.battery { background: var(--te-battery-light); color: var(--te-battery); }
.setup-card-icon.wallbox { background: var(--te-primary-subtle); color: var(--te-primary); }
.setup-card-icon.smarthome { background: var(--te-consumption-light); color: var(--te-consumption); }
.setup-card-icon.location { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
.setup-card-header-content { flex: 1; min-width: 0; }
.setup-card-step {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--te-text-muted);
margin-bottom: 0.125rem;
}
.setup-card-title {
font-size: 1rem;
font-weight: 700;
color: var(--te-text-primary);
margin-bottom: 0.125rem;
letter-spacing: -0.01em;
}
.setup-card-duration {
font-size: 0.75rem;
color: var(--te-text-muted);
display: flex;
align-items: center;
gap: 0.25rem;
}
.setup-card-status {
padding: 0.3rem 0.625rem;
border-radius: var(--te-radius-pill);
font-size: 0.6875rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.3rem;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.setup-card-status.completed { background: var(--te-battery-light); color: #065f46; }
.setup-card-status.in-progress { background: var(--te-primary-subtle); color: var(--te-primary); }
.setup-card-status.pending { background: var(--te-gray-100); color: var(--te-text-muted); }
.setup-card-status.optional { background: var(--te-solar-light); color: #92400e; }
[data-bs-theme="dark"] .setup-card-status.completed { background: rgba(16, 185, 129, 0.2); color: #34d399; }
[data-bs-theme="dark"] .setup-card-status.pending { background: var(--te-gray-800); }
[data-bs-theme="dark"] .setup-card-status.optional { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.setup-card-body { padding: 0.875rem 1.125rem; flex: 1; }
.setup-card-description {
font-size: 0.8125rem;
color: var(--te-text-secondary);
line-height: 1.5;
margin-bottom: 0.875rem;
}
.setup-card-data {
background: var(--te-gray-50);
border-radius: var(--te-radius);
padding: 0.75rem;
}
[data-bs-theme="dark"] .setup-card-data { background: var(--te-gray-800); }
.setup-card-data-title {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--te-text-muted);
margin-bottom: 0.4rem;
}
.setup-card-data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.setup-card-data-item { display: flex; flex-direction: column; }
.setup-card-data-label { font-size: 0.625rem; color: var(--te-text-muted); }
.setup-card-data-value { font-size: 0.8125rem; font-weight: 700; color: var(--te-text-primary); }
.setup-card-requirements {
background: var(--te-solar-light);
border-radius: var(--te-radius);
padding: 0.75rem;
}
[data-bs-theme="dark"] .setup-card-requirements { background: rgba(245, 158, 11, 0.1); }
.setup-card-requirements-title {
font-size: 0.75rem;
font-weight: 700;
color: #92400e;
margin-bottom: 0.4rem;
display: flex;
align-items: center;
gap: 0.3rem;
}
[data-bs-theme="dark"] .setup-card-requirements-title { color: var(--te-solar); }
.setup-card-requirements-list { list-style: none; padding: 0; margin: 0; font-size: 0.8125rem; color: #78350f; }
[data-bs-theme="dark"] .setup-card-requirements-list { color: var(--te-text-secondary); }
.setup-card-requirements-list li {
display: flex;
align-items: flex-start;
gap: 0.3rem;
padding: 0.0625rem 0;
}
.setup-card-footer {
padding: 0.875rem 1.125rem;
border-top: 1px solid var(--te-card-border);
background: var(--te-gray-50);
display: flex;
align-items: center;
justify-content: space-between;
}
[data-bs-theme="dark"] .setup-card-footer { background: rgba(0, 0, 0, 0.2); }
.setup-card-action {
font-size: 0.8125rem;
font-weight: 700;
color: var(--te-primary);
display: flex;
align-items: center;
gap: 0.3rem;
}
.setup-card-action i { transition: transform 0.15s ease; }
.setup-card-link:hover .setup-card-action i { transform: translateX(4px); }
.setup-card-footer-meta { font-size: 0.6875rem; color: var(--te-text-muted); }
.setup-complete-banner {
background: linear-gradient(135deg, #059669 0%, var(--te-battery) 100%);
color: white;
border-radius: var(--te-radius-xl);
padding: 1.75rem;
text-align: center;
margin-bottom: 1.5rem;
}
.setup-complete-icon {
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.75rem;
font-size: 1.625rem;
}
.setup-complete-title { font-size: 1.375rem; font-weight: 800; margin-bottom: 0.375rem; }
.setup-complete-text { opacity: 0.9; margin-bottom: 1.25rem; }
.setup-next-step { position: relative; }
.setup-next-step .setup-card {
border: 2px solid var(--te-primary);
box-shadow: 0 0 0 4px rgba(0, 134, 221, 0.1);
}
.setup-next-step-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--te-primary);
color: white;
padding: 0.3rem 0.875rem;
border-radius: var(--te-radius-pill);
font-size: 0.6875rem;
font-weight: 700;
white-space: nowrap;
z-index: 10;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.setup-card.locked { opacity: 0.55; pointer-events: none; }
.setup-card.locked .setup-card-icon { filter: grayscale(100%); }
/* ============================================================================
29. PRICE TIMELINE (kept)
============================================================================ */
.tw-price-timeline {
position: relative;
width: 100%;
height: 8px;
border-radius: 2px;
overflow: visible;
background: rgba(20, 184, 166, 0.22);
border: 0;
}
.tw-price-timeline__bar {
position: absolute;
inset: 0;
display: flex;
gap: 0;
border-radius: 2px;
overflow: hidden;
}
.tw-price-seg {
height: 8px;
flex: 1 1 auto;
border-radius: 2px;
}
.tw-price-timeline__past {
position: absolute;
left: 0;
top: 0;
height: 8px;
width: 0%;
background: rgba(255, 255, 255, 0.55);
border-radius: 2px;
pointer-events: none;
}
.tw-price-timeline__now {
position: absolute;
left: 0%;
top: -5px;
width: 6px;
height: 18px;
transform: translateX(-50%);
border-radius: 2px;
background: var(--te-text-primary);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
pointer-events: none;
}
.tw-price-seg--green { background: rgb(34, 197, 94); }
.tw-price-seg--orange { background: rgb(249, 115, 22); }
/* ============================================================================
30. PREISEINSTELLUNG TABLE (kept, retuned)
============================================================================ */
.preiseinstellung_table { margin-left: 0.625rem; }
.preiseinstellung_table table td,
.preiseinstellung_table table th {
padding: 0.25rem;
width: auto;
}
.preiseinstellung_table input,
.preiseinstellung_table select {
padding: 0.25rem 0.5rem;
margin-bottom: 0.5rem;
}
.preise_bedingungen_ausgabe { font-size: 0.875rem; }
.preise_bedingungen_ausgabe hr {
border-color: var(--te-card-border);
padding: 0;
margin: 0;
}
/* ============================================================================
31. RESPONSIVE
============================================================================ */
@media (min-width: 768px) {
.subnav-te .subnav-desktop { display: flex; }
.subnav-te .subnav-mobile { display: none !important; }
}
@media (max-width: 767.98px) {
.subnav-te .subnav-desktop { display: none; }
.subnav-te .subnav-mobile { display: block; }
.navbar-te .nav-link { margin: 0.25rem; }
.setup-hero { padding: 1.75rem; }
.setup-hero-title { font-size: 1.375rem; }
.setup-card-data-grid { grid-template-columns: 1fr; }
.te-page-header { padding: 1rem 0 0.75rem; }
.te-page-header .te-page-title { font-size: 1.375rem; }
.card-stat .stat-value,
.te-stat .stat-value { font-size: 1.25rem; }
}
@media (max-width: 991.98px) {
.navbar-te .navbar-nav { padding: 0.75rem 0; }
.navbar-te .nav-link { padding: 0.625rem 1rem; }
}
/* Recent-Stations ? "Zuletzt genutzte Lades?ulen" ---------------------------
Kompakter Eintrag pro Station mit gro?em Icon, Status, Meta und einem
"Erneut laden"-Action-Button rechts. */
.te-recent-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.te-recent {
background: var(--te-card-bg);
border: 1px solid var(--te-card-border);
border-radius: var(--te-radius-xl);
padding: 0.875rem;
display: flex;
align-items: center;
gap: 0.875rem;
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-shadow: var(--te-shadow-sm);
}
.te-recent:hover {
border-color: var(--te-gray-300);
box-shadow: var(--te-shadow);
text-decoration: none;
color: inherit;
}
.te-recent-icon {
width: 48px;
height: 48px;
border-radius: var(--te-radius-lg);
background: var(--te-primary-subtle);
color: var(--te-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
position: relative;
}
.te-recent-icon.solar { background: var(--te-solar-light); color: var(--te-solar); }
.te-recent-icon.battery { background: var(--te-battery-light); color: var(--te-battery); }
.te-recent-icon .te-recent-status-dot {
position: absolute;
bottom: -2px;
right: -2px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2.5px solid var(--te-card-bg);
background: var(--te-gray-400);
}
.te-recent-icon .te-recent-status-dot.online { background: var(--te-battery); }
.te-recent-icon .te-recent-status-dot.offline { background: var(--te-gray-400); }
.te-recent-icon .te-recent-status-dot.busy { background: var(--te-solar); }
.te-recent-body { flex: 1; min-width: 0; }
.te-recent-title-row {
display: flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.125rem;
}
.te-recent-title {
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--te-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.te-recent-favorite {
color: var(--te-solar);
font-size: 0.875rem;
flex-shrink: 0;
}
.te-recent-loc {
font-size: 0.75rem;
color: var(--te-text-secondary);
margin-bottom: 0.4rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.te-recent-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
font-size: 0.6875rem;
color: var(--te-text-muted);
font-weight: 500;
}
.te-recent-meta span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.te-recent-meta strong {
color: var(--te-text-primary);
font-weight: 700;
}
.te-recent-action {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--te-radius-lg);
background: var(--te-primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
border: 0;
transition: background 0.15s ease;
text-decoration: none;
}
.te-recent-action:hover {
background: var(--te-primary-hover);
color: #fff;
}
@media (max-width: 480px) {
.te-recent { gap: 0.625rem; padding: 0.75rem; }
.te-recent-icon { width: 42px; height: 42px; font-size: 1.25rem; }
.te-recent-meta { gap: 0.375rem 0.625rem; }
}
/* Aktive-Ladung Sticky-Bar ? global, direkt unter der Navbar -----------------
Zeigt laufenden Ladevorgang. Bleibt auf allen Seiten sichtbar. */
.te-active-charge {
position: sticky;
top: 0;
z-index: 1020;
background: linear-gradient(135deg, var(--te-battery), #059669);
color: #fff;
padding: 0.4rem 0.875rem 0.4rem;
display: block;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
transition: filter 0.15s ease;
}
.te-active-charge-inner {
max-width: 1200px;
margin: 0 auto;
width: 100%;
padding: 0 12px;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.te-active-charge:hover {
color: #fff;
filter: brightness(1.05);
text-decoration: none;
}
.te-active-charge-icon {
width: 36px;
height: 36px;
border-radius: var(--te-radius);
background: rgba(255, 255, 255, 0.22);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
flex-shrink: 0;
position: relative;
}
.te-active-charge-icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 2px solid rgba(255, 255, 255, 0.5);
animation: te-active-pulse 1.6s infinite;
}
@keyframes te-active-pulse {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.4); opacity: 0; }
}
.te-active-charge-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.0625rem;
}
.te-active-charge-title {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: -0.005em;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem 0.375rem;
overflow: hidden;
}
.te-active-charge-title-pill {
background: rgba(255, 255, 255, 0.22);
font-size: 0.5625rem;
font-weight: 800;
padding: 0.0625rem 0.4rem;
border-radius: var(--te-radius-pill);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.te-active-charge-meta {
font-size: 0.6875rem;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.te-active-charge-meta strong { font-weight: 700; color: #fff; }
.te-active-charge-action {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
color: #fff;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
transition: background 0.15s ease;
}
.te-active-charge-action:hover {
background: rgba(255, 255, 255, 0.35);
color: #fff;
}
@media (max-width: 480px) {
.te-active-charge { padding: 0.3rem 0.65rem 0.35rem; }
.te-active-charge-inner { gap: 0.5rem; padding-left: 0; padding-right: 0; }
.te-active-charge-icon { }
}
/* Wallbox-Logo (vom Server geliefert) zentriert anzeigen */
.te-wallbox-logo {
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
margin-bottom: 1rem;
}
.te-wallbox-logo img {
max-width: 100%;
max-height: 96px;
height: auto;
object-fit: contain;
}
/* Vertragspartner-Block */
.te-partner-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.te-partner {
background: var(--te-gray-50);
border-radius: var(--te-radius-lg);
padding: 0.75rem 0.875rem;
}
[data-bs-theme="dark"] .te-partner { background: rgba(0, 0, 0, 0.2); }
.te-partner-role {
font-size: 0.625rem;
font-weight: 700;
color: var(--te-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.25rem;
}
.te-partner-name {
font-size: 0.875rem;
font-weight: 700;
letter-spacing: -0.005em;
margin-bottom: 0.125rem;
}
.te-partner-addr {
font-size: 0.75rem;
color: var(--te-text-secondary);
line-height: 1.45;
}
/* Mode-Tabs (Ladevertrag / Ad-Hoc / Anmeldecode) ----------------------------
Variante der Bootstrap nav-pills, segmented-control-Look */
.te-mode-tabs {
background: var(--te-gray-100);
border-radius: var(--te-radius-lg);
padding: 0.25rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.125rem;
}
.te-mode-tabs .nav-link {
margin: 0 auto;
padding: 0.5rem 0.5rem;
border-radius: var(--te-radius);
font-size: 0.75rem;
font-weight: 700;
color: var(--te-text-secondary);
text-align: center;
background: transparent;
border: 0;
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.te-mode-tabs .nav-link:hover {
color: var(--te-text-primary);
background: rgba(255, 255, 255, 0.5);
}
.te-mode-tabs .nav-link.active {
background: var(--te-card-bg);
color: var(--te-primary);
box-shadow: var(--te-shadow-sm);
}
[data-bs-theme="dark"] .te-mode-tabs { background: var(--te-gray-800); }
[data-bs-theme="dark"] .te-mode-tabs .nav-link:hover { background: rgba(255, 255, 255, 0.05); }