/* * vennetv_alerts.css — Hinweisbanner im Kundenbereich im Futuristic-Stil (Entwurf 2, 14.10.2026, Vorschau für Venne). * Quelle: ~/whm-dev-mirror/templates/lagom2-pages/alerts/vennetv_alerts.css — nie auf dem Server editieren. * Ziel: templates/lagom2/vennetv_alerts.css (Theme-Stammordner, überlebt Lagom-Updates), eingebunden per * includes/hooks/venne_alert_style.php (ClientAreaHeadOutput, nach dem Lagom-CSS). * * Bildsprache wie Produktkarten/.cr-notice: dunkles Glas, 1,5-px-Rahmen in der Akzentfarbe mit weichem Leuchten, * runder Icon-Chip mit schlankem Linien-Icon (Lucide, als Maske — exakt mittig, unabhängig von Lagoms Icon-Schriften). * Farben je Schwere: warning (Bernstein), danger (Rot), info (Blau), success (Grün). * Nur CSS über Lagom-Klassen — keine Lagom-Datei wird verändert. Fehlt eine Klasse nach einem Lagom-Update, * fällt die Meldung still auf den Lagom-Standard zurück (nichts geht kaputt, sieht nur alt aus). * * Abgedeckt: * 1 alle .alert-lagom (Formular-/Fehler-/Erfolgsmeldungen, Flash-Meldungen, Warenkorb, Dashboard-Rechnungshinweise) * 2 Leisten oben: Netzwerk-Störung/Wartung (.network-issue-alert), E-Mail bestätigen (.verification-banner) * 3 Dashboard: Rechnungshinweise (.client-home-alert), Box „Neubestellung fortsetzen / Verlängerung“ * (#dashboard-open-order-box.vtva-order, Lagom-Custom-Code 37), Testzugang-Hinweis (.panel--futuristic.border-4) * — seit 18.10.2026 nur auf Dashboard + Meine Zugänge (body.page-clientareahome/.page-clientareaproducts): ohne diesen Scope wurden * 58 Wissensdatenbank-/Announcement-Panels mit border-warning/-danger zu Bannern mit Sanduhr-/Kreuz-Chip (Readout kb-redesign). * 4 Warenkorb: „Bestellung bereits gestartet“ (#open-invoice-hint, Lagom-Custom-Code 36) * 5 Lagom-Client-Notifications (statisch/oben), außer Kampagnen mit eigener Klasse (alert-christmas-*) * 6 Konto eingeschränkt (.cr-notice): Rahmen/Leuchten stammen aus futuristic/…/vars/custom.css und bleiben — hier nur Icon-Chip + Titelzeile * Nicht angefasst: schwebende Kampagnen (.alert-floating), Modals. * * Icons: Block zwischen @icons-start/@icons-end erzeugt build-icons.py aus icons/*.svg — nicht von Hand ändern. */ /* @icons-start — erzeugt von build-icons.py (Lucide 1.57.0, ISC, icons/LICENSE); nicht von Hand ändern */ :root { --vtva-i-receipt-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 16H8' /%3E%3Cpath d='M14 8H8' /%3E%3Cpath d='M16 12H8' /%3E%3Cpath d='M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z' /%3E%3C/svg%3E"); --vtva-i-shopping-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18' /%3E%3Cpath d='M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25' /%3E%3Ccircle cx='18' cy='20' r='2' /%3E%3Ccircle cx='8' cy='20' r='2' /%3E%3C/svg%3E"); --vtva-i-refresh-cw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8' /%3E%3Cpath d='M21 3v5h-5' /%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16' /%3E%3Cpath d='M8 16H3v5' /%3E%3C/svg%3E"); --vtva-i-hourglass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14' /%3E%3Cpath d='M5 2h14' /%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22' /%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2' /%3E%3C/svg%3E"); --vtva-i-circle-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='m15 9-6 6' /%3E%3Cpath d='m9 9 6 6' /%3E%3C/svg%3E"); --vtva-i-triangle-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' /%3E%3Cpath d='M12 9v4' /%3E%3Cpath d='M12 17h.01' /%3E%3C/svg%3E"); --vtva-i-circle-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cline x1='12' x2='12' y1='8' y2='12' /%3E%3Cline x1='12' x2='12.01' y1='16' y2='16' /%3E%3C/svg%3E"); --vtva-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='M12 16v-4' /%3E%3Cpath d='M12 8h.01' /%3E%3C/svg%3E"); --vtva-i-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='m16 9-5.5 5.5L8 12' /%3E%3C/svg%3E"); --vtva-i-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z' /%3E%3C/svg%3E"); --vtva-i-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1' /%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4' /%3E%3C/svg%3E"); --vtva-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18' /%3E%3Cpath d='m6 6 12 12' /%3E%3C/svg%3E"); --vtva-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7' /%3E%3Crect x='2' y='4' width='20' height='16' rx='2' /%3E%3C/svg%3E"); --vtva-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2' /%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4' /%3E%3C/svg%3E"); } /* @icons-end */ /* ---------- 0 Akzentfarbe (rgb-Tripel, geht ohne color-mix()) und Icon je Banner ---------- */ .alert.alert-lagom, .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert), #open-invoice-hint { --vtva-rgb: 77, 139, 255; /* info */ --vtva-text: #e3e8f1; --vtva-head: #ffffff; --vtva-ico: var(--vtva-i-info); } /* Testzugang-Hinweis als eigene Regel (Opus-Prüfung 18.10.2026): ein Browser ohne :is() verwirft sonst die ganze Liste oben mit */ body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4 { --vtva-rgb: 77, 139, 255; --vtva-text: #e3e8f1; --vtva-head: #ffffff; --vtva-ico: var(--vtva-i-info); } .alert.alert-lagom.alert-warning { --vtva-rgb: 255, 170, 0; --vtva-ico: var(--vtva-i-triangle-alert); } .alert.alert-lagom.alert-danger { --vtva-rgb: 229, 72, 77; --vtva-ico: var(--vtva-i-circle-alert); } .alert.alert-lagom.alert-success { --vtva-rgb: 54, 192, 85; --vtva-ico: var(--vtva-i-circle-check); } .alert.alert-lagom.client-home-alert { --vtva-ico: var(--vtva-i-receipt-text); } /* Rechnung überfällig/offen */ .alert.alert-lagom.vtva-order.alert-warning { --vtva-ico: var(--vtva-i-shopping-cart); } /* Neubestellung */ .alert.alert-lagom.vtva-order.alert-danger { --vtva-ico: var(--vtva-i-refresh-cw); } /* Verlängerung */ .alert.alert-lagom.network-issue-alert.alert-info { --vtva-ico: var(--vtva-i-wrench); } /* geplante Wartung */ .alert.alert-lagom.verification-banner { --vtva-ico: var(--vtva-i-mail); } #open-invoice-hint { --vtva-rgb: 255, 170, 0; --vtva-ico: var(--vtva-i-receipt-text); } /* 20.10.2026 (bestellformular, Venne 16196 „einheitlich“): einfache Bootstrap-Alerts ohne alert-lagom (Bundesliga-Hinweis Warenkorb, Bestellabschluss, Sicherheitshinweis Kasse, Serverstatus) bekommen dieselben Farben */ .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert).alert-warning { --vtva-rgb: 255, 170, 0; --vtva-ico: var(--vtva-i-triangle-alert); } .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert).alert-danger { --vtva-rgb: 229, 72, 77; --vtva-ico: var(--vtva-i-circle-alert); } .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert).alert-success { --vtva-rgb: 54, 192, 85; --vtva-ico: var(--vtva-i-circle-check); } body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-warning { --vtva-rgb: 255, 170, 0; --vtva-ico: var(--vtva-i-hourglass); } /* Test in Prüfung */ body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-danger { --vtva-rgb: 229, 72, 77; --vtva-ico: var(--vtva-i-circle-x); } /* Test abgelehnt */ .cr-notice { --vtva-rgb: 229, 72, 77; --vtva-ico: var(--vtva-i-lock); --vtva-head: #ffffff; } /* Konto eingeschränkt */ /* ---------- 1 Grundkarte für alle Lagom-Meldungen ---------- */ /* 20.10.2026 (bestellformular, Venne 16196): drei Nachzügler im selben Stil — (a) versteckte Lagom-Fehlerfelder (w-hidden), sobald Lagom sie per slideDown zeigt (Inline display:block; leer/versteckt bleiben sie unsichtbar — Fix 19.10. bleibt), (b) Meldungen in Warenkorb/Kasse mit alert-primary (Server-Fehlerbox „Bitte korrigiere…“, Gutschein, Paket-Hinweis), (c) einfache Bootstrap-Alerts ohne alert-lagom im Kundenbereich (kleine Varianten xs/sm/slim bleiben). */ /* 19.10.2026 (produktseiten-redesign, Kimmy-Go): :not(.w-hidden) — Lagoms versteckte Fehlerfelder (#existingLoginMessage, .gateway-errors, invoice-payment) tragen w-hidden und werden per jQuery slideDown (Inline display:block) gezeigt; ohne den Ausschluss schlug unser display:flex (Spezifität 0,4,0) Lagoms .alert.alert-lagom.w-hidden{display:none} (0,3,0) und die leere rote Box stand sichtbar in der Kasse (PROD seit 18.10.). */ .alert.alert-lagom:not(.alert-primary):not(.alert-floating):not(.w-hidden), .alert.alert-lagom.clientAlert.alert-primary:not(.alert-floating):not([class*="alert-christmas"]):not(.w-hidden), .alert.alert-lagom.w-hidden[style*="display: block"]:not(.alert-primary):not(.alert-floating), .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating), .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert) { /* Lagom liest diese Variablen für Hintergrund, Rahmen und Schrift — wir setzen sie auf dem Element selbst */ --alert-warning-bg: rgba(var(--vtva-rgb), .07); --alert-danger-bg: rgba(var(--vtva-rgb), .07); --alert-info-bg: rgba(var(--vtva-rgb), .07); --alert-success-bg: rgba(var(--vtva-rgb), .07); --alert-warning-border: rgba(var(--vtva-rgb), .55); --alert-danger-border: rgba(var(--vtva-rgb), .55); --alert-info-border: rgba(var(--vtva-rgb), .55); --alert-success-border: rgba(var(--vtva-rgb), .55); --alert-warning-text: var(--vtva-text); --alert-danger-text: var(--vtva-text); --alert-info-text: var(--vtva-text); --alert-success-text: var(--vtva-text); position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; color: var(--vtva-text); background-color: rgba(var(--vtva-rgb), .07); background-image: radial-gradient(90% 160% at 0% 50%, rgba(var(--vtva-rgb), .16) 0%, rgba(var(--vtva-rgb), 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(0, 0, 0, .10) 100%); border: 1.5px solid rgba(var(--vtva-rgb), .55); border-radius: var(--ui-block-border-radius, 12px); box-shadow: 0 0 0 1px rgba(var(--vtva-rgb), .12), 0 0 18px rgba(var(--vtva-rgb), .16), 0 4px 16px rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: visible; } .alert.alert-lagom.w-hidden[style*="display: block"]:not(.alert-primary):not(.alert-floating) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; text-align: left; } .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating) { padding-left: 20px; align-items: center !important; flex-direction: row !important; flex-wrap: nowrap !important; } /* Lagom stapelt alert-primary auf dem Handy */ /* einfache Alerts haben oft keinen Innencontainer (Text + direkt im Element) — als Block mit Chip links statt Flex, sonst reißt der Text auseinander */ .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert) { display: block; padding-left: 76px; min-height: 72px; } .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert):not(:has(> .alert-icon))::before { position: absolute !important; left: 20px; top: 50%; transform: translateY(-50%); } .alert.alert-lagom.clientAlert.alert-primary:not(.alert-floating):not([class*="alert-christmas"])::before { content: none; } .alert.alert-lagom.clientAlert.alert-primary:not(.alert-floating):not([class*="alert-christmas"]) > .container { display: flex; align-items: center; gap: 16px; padding-left: 0; padding-right: 0; width: 100%; } .alert.alert-lagom:not(.alert-primary):not(.alert-floating) p, .alert.alert-lagom:not(.alert-primary):not(.alert-floating) li { color: var(--vtva-text) !important; } .alert.alert-lagom:not(.alert-primary):not(.alert-floating) strong, .alert.alert-lagom:not(.alert-primary):not(.alert-floating) b, .alert.alert-lagom:not(.alert-primary):not(.alert-floating) h2, .alert.alert-lagom .alert-title { color: var(--vtva-head) !important; } .alert.alert-lagom:not(.alert-primary):not(.alert-floating) h2 { font-size: 16px; line-height: 1.35; margin: 0 0 4px; font-weight: 700; } .alert.alert-lagom:not(.alert-primary):not(.alert-floating) a:not(.btn) { color: var(--vtva-head); text-decoration: underline; text-decoration-color: rgba(var(--vtva-rgb), .6); text-underline-offset: 3px; } .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating) p, .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating) li, .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating) .alert-body, .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert), .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert) p, .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert) li { color: var(--vtva-text) !important; } .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating) strong, .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert) strong, .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert) b { color: var(--vtva-head) !important; } .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert) a:not(.btn) { color: var(--vtva-head); text-decoration: underline; text-decoration-color: rgba(var(--vtva-rgb), .6); text-underline-offset: 3px; } .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert) > .alert-body, .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating) > .alert-body { flex: 1 1 auto; min-width: 0; padding-left: 0 !important; } .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert).text-center { text-align: left; } .alert.alert-lagom > .alert-body, .alert.alert-lagom > .container > .alert-content { flex: 1 1 auto; min-width: 0; padding-left: 0 !important; } /* ---------- 2 Icon-Chip --------------------------------------------------------------------------------- * Chip = Kreis mit Verlauf + Leuchtring. Icon = Lucide-Linie als Maske in der Akzentfarbe, per Grid exakt mittig. * Echte Icon-Elemente (Lagom span.alert-icon / i.ls): das Element ist der Chip, ::before das Icon. * Banner ohne Icon-Element: ::before ist der Chip, ::after das Icon (absolut auf die Chip-Mitte gesetzt). * --------------------------------------------------------------------------------------------------------- */ .alert.alert-lagom:not(.alert-floating) > .alert-icon, .alert.alert-lagom:not(.alert-floating) > .container > span.alert-icon, .alert.alert-lagom.network-issue-alert .alert-body > div > i, .alert.alert-lagom.verification-banner .alert-body > div > i, .alert.alert-lagom:not(.alert-primary):not(.alert-floating):not(.network-issue-alert):not(.verification-banner):not(:has(> .alert-icon)):not(.w-hidden)::before, .alert.alert-lagom.w-hidden[style*="display: block"]:not(.alert-primary):not(.alert-floating):not(.network-issue-alert):not(.verification-banner):not(:has(> .alert-icon))::before, .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating):not(:has(> .alert-icon))::before, .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert):not(:has(> .alert-icon))::before, body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-warning::before, body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-danger::before, .cr-notice .panel-body > .d-flex::before, #open-invoice-hint .panel-title::before { --vtva-chip: 40px; content: ""; flex: 0 0 var(--vtva-chip); box-sizing: border-box; width: var(--vtva-chip); height: var(--vtva-chip); margin: 0 !important; padding: 0 !important; display: grid; place-items: center; border-radius: 50%; font-size: 0 !important; line-height: 0 !important; color: transparent !important; background: radial-gradient(circle at 32% 28%, rgba(var(--vtva-rgb), .32) 0%, rgba(var(--vtva-rgb), .08) 72%); box-shadow: inset 0 0 0 1px rgba(var(--vtva-rgb), .45), 0 0 16px rgba(var(--vtva-rgb), .22); } .alert.alert-lagom.network-issue-alert .alert-body > div > i, .alert.alert-lagom.verification-banner .alert-body > div > i, #open-invoice-hint .panel-title::before { --vtva-chip: 32px; } /* Lagoms alert-primary hat als ::before einen Seitenbalken (absolut) — für den Chip zurück in den Fluss */ .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating):not(:has(> .alert-icon))::before { position: static !important; top: auto; right: auto; bottom: auto; left: auto; opacity: 1; } /* Icon in echten Elementen */ .alert.alert-lagom:not(.alert-floating) > .alert-icon::before, .alert.alert-lagom:not(.alert-floating) > .container > span.alert-icon::before, .alert.alert-lagom.network-issue-alert .alert-body > div > i::before, .alert.alert-lagom.verification-banner .alert-body > div > i::before { content: "" !important; display: block; width: calc(var(--vtva-chip) * .5); height: calc(var(--vtva-chip) * .5); background-color: rgb(var(--vtva-rgb)); -webkit-mask: var(--vtva-ico) center / contain no-repeat; mask: var(--vtva-ico) center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(var(--vtva-rgb), .55)); } /* Icon als ::after über dem Pseudo-Chip */ .alert.alert-lagom:not(.alert-primary):not(.alert-floating):not(.network-issue-alert):not(.verification-banner):not(:has(> .alert-icon)):not(.w-hidden)::after, .alert.alert-lagom.w-hidden[style*="display: block"]:not(.alert-primary):not(.alert-floating):not(.network-issue-alert):not(.verification-banner):not(:has(> .alert-icon))::after, .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating):not(:has(> .alert-icon))::after, .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert):not(:has(> .alert-icon))::after, body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-warning::after, body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-danger::after, .cr-notice .panel-body > .d-flex::after, #open-invoice-hint .panel-title::after { content: ""; position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); background-color: rgb(var(--vtva-rgb)); -webkit-mask: var(--vtva-ico) center / contain no-repeat; mask: var(--vtva-ico) center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(var(--vtva-rgb), .55)); pointer-events: none; } /* Chip-Mitte = Innenabstand + halber Chip (40 px) */ .alert.alert-lagom:not(.alert-primary):not(.alert-floating):not(.network-issue-alert):not(.verification-banner):not(:has(> .alert-icon))::after { left: 40px; top: 50%; } .page-viewcart .alert.alert-lagom.alert-primary:not(.clientAlert):not(.alert-floating):not(:has(> .alert-icon))::after, .main-content .alert:not(.alert-lagom):not(.alert-floating):not(.alert-xs):not(.alert-sm):not(.slim-alert):not(:has(> .alert-icon))::after { left: 40px; top: 50%; } body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-warning::after, body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-danger::after { left: 40px; top: 38px; } .cr-notice .panel-body > .d-flex { position: relative; gap: 16px; } .cr-notice .panel-body > .d-flex::after { left: 20px; top: 20px; } #open-invoice-hint .panel-title { position: relative; } #open-invoice-hint .panel-title::after { left: 16px; top: 50%; width: 16px; height: 16px; } /* Knopf-Icons in Bannern: schlanke Linien statt Lagom-Glyphen */ .alert.alert-lagom .btn .ls, .alert.alert-lagom .btn-close-alert .ls, .alert.alert-lagom .close .ls, #open-invoice-hint .btn .ls { display: inline-grid !important; place-items: center; width: 16px; height: 16px; margin: 0 !important; font-size: 0 !important; line-height: 0 !important; } .alert.alert-lagom .btn .ls::before, .alert.alert-lagom .btn-close-alert .ls::before, .alert.alert-lagom .close .ls::before, #open-invoice-hint .btn .ls::before { content: "" !important; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--vtva-btn-ico, var(--vtva-i-x)) center / contain no-repeat; mask: var(--vtva-btn-ico, var(--vtva-i-x)) center / contain no-repeat; } .alert.alert-lagom .ls-wallet { --vtva-btn-ico: var(--vtva-i-wallet); } .alert.alert-lagom .ls-refresh { --vtva-btn-ico: var(--vtva-i-refresh-cw); } .alert.alert-lagom .ls-basket { --vtva-btn-ico: var(--vtva-i-shopping-cart); } .alert.alert-lagom .ls-close { --vtva-btn-ico: var(--vtva-i-x); } /* ---------- 3 Aktionen: Knopf mit leichtem Glühen, Schließen als dezenter Glas-Kreis ---------- */ .alert.alert-lagom:not(.alert-floating) .alert-actions { flex: 0 0 auto; padding: 0 !important; margin: 0; width: auto; display: flex; align-items: center; gap: 10px; } .alert.alert-lagom:not(.alert-floating) .alert-actions .btn:not(.btn-icon):not(.close) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0 !important; box-shadow: 0 0 16px rgba(var(--vtva-rgb), .30); } .alert.alert-lagom:not(.alert-floating) .btn-close-alert, .alert.alert-lagom:not(.alert-floating) .alert-actions .close, .alert.alert-lagom:not(.alert-floating) > .btn[data-dismiss=alert] { flex: 0 0 32px; width: 32px !important; height: 32px !important; display: grid !important; place-items: center; margin: 0 !important; padding: 0 !important; border-radius: 50%; color: var(--vtva-text) !important; background: rgba(255, 255, 255, .06) !important; /* Lagom setzt .btn-icon in einer @media-Regel hart auf none */ border: 1px solid rgba(255, 255, 255, .12) !important; opacity: .75; float: none; text-shadow: none; transition: opacity .2s ease, background .2s ease; } .alert.alert-lagom:not(.alert-floating) .btn-close-alert:hover, .alert.alert-lagom:not(.alert-floating) .alert-actions .close:hover, .alert.alert-lagom:not(.alert-floating) > .btn[data-dismiss=alert]:hover { opacity: 1; background: rgba(255, 255, 255, .12) !important; } .alert.alert-lagom:not(.alert-floating) > .btn[data-dismiss=alert] { position: absolute; top: 12px; right: 12px; } /* ---------- 4 Leisten oben (volle Breite): Störung/Wartung, E-Mail bestätigen ---------- */ .alert.alert-lagom.network-issue-alert:not(.alert-primary):not(.alert-floating), .alert.alert-lagom.verification-banner:not(.alert-primary):not(.alert-floating) { border-radius: 0; border-width: 0 0 1.5px 0; box-shadow: 0 6px 18px rgba(var(--vtva-rgb), .10); padding: 10px 0; margin-bottom: 0; } .alert.alert-lagom.network-issue-alert > .container, .alert.alert-lagom.verification-banner > .container { display: flex; align-items: center; gap: 16px; } .alert.alert-lagom.network-issue-alert .alert-body, .alert.alert-lagom.verification-banner .alert-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 0 !important; } .alert.alert-lagom.network-issue-alert .alert-body > div, .alert.alert-lagom.verification-banner .alert-body > div { display: inline-flex; align-items: center; gap: 12px; color: var(--vtva-head); } /* ---------- 5 Dashboard ---------- */ /* 5a Rechnungshinweise: einzelne Karten mit Abstand statt zusammengeklebter Gruppe */ .client-home-alerts.alert-group { display: grid; gap: 12px; margin-bottom: var(--spacing-3x, 24px); box-shadow: none; } .client-home-alerts.alert-group .alert.alert-lagom { margin: 0 !important; border-radius: var(--ui-block-border-radius, 12px) !important; border-top-width: 1.5px !important; } .client-home-alerts .alert.client-home-alert { cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; } .client-home-alerts .alert.client-home-alert:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--vtva-rgb), .22), 0 0 26px rgba(var(--vtva-rgb), .28), 0 10px 28px rgba(0, 0, 0, .25); } .client-home-alerts .alert.client-home-alert .alert-body { font-size: 15px; font-weight: 500; color: var(--vtva-head); } /* 5b Box „Neubestellung fortsetzen“ / „Verlängerung abschließen“ (Markup aus Custom-Code 37, Fassung 2) */ .alert.alert-lagom.vtva-order { margin-bottom: 12px; } .alert.alert-lagom .vtva-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .alert.alert-lagom .vtva-title { color: var(--vtva-head); font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; } .alert.alert-lagom .vtva-text { color: var(--vtva-text); opacity: .85; font-size: 14px; line-height: 1.45; } .alert.alert-lagom .vtva-text a { white-space: nowrap; } /* 5c Testzugang-Hinweis (trialDashboardAlert, Dashboard + Meine Zugänge) — gleicher Kartenstil */ body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-warning, body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-danger { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px !important; border: 1.5px solid rgba(var(--vtva-rgb), .55) !important; border-radius: var(--ui-block-border-radius, 12px) !important; background: radial-gradient(90% 160% at 0% 30%, rgba(var(--vtva-rgb), .16) 0%, rgba(var(--vtva-rgb), 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(0, 0, 0, .10) 100%), rgba(var(--vtva-rgb), .07) !important; box-shadow: 0 0 0 1px rgba(var(--vtva-rgb), .12), 0 0 18px rgba(var(--vtva-rgb), .16), 0 4px 16px rgba(0, 0, 0, .18) !important; } body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-warning > .flex-grow-1, body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-danger > .flex-grow-1 { min-width: 0; } /* Titelzeile so hoch wie der Chip und mittig → sitzt auf der Chip-Mitte, egal welche Schrift der Browser nimmt */ body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-warning h5, body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-danger h5 { min-height: 40px; display: flex; align-items: center; margin: 0 0 6px !important; color: var(--vtva-head) !important; font-size: 16px; line-height: 1.3; font-weight: 700; } body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-warning .text-muted, body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-danger .text-muted { color: var(--vtva-text) !important; opacity: .85; } body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-warning .text-muted p, body:is(.page-clientareahome,.page-clientareaproducts) .panel.panel--futuristic.border-4.border-danger .text-muted p { margin-bottom: 4px !important; } /* ---------- 5d Konto eingeschränkt: nur Chip + Titelzeile auf Chip-Höhe (Rest des Stils aus custom.css) ---------- */ .cr-notice .cr-title { min-height: 40px; display: flex; align-items: center; margin-bottom: 4px !important; font-weight: 700; } .cr-notice .panel-body { padding: 18px 20px !important; } /* gleicher Innenabstand wie die übrigen Karten */ .cr-notice ul { margin-top: 2px; padding-left: 18px !important; } /* Aufzählungspunkte bündig unter dem Titel */ /* ---------- 6 Warenkorb: „Bestellung bereits gestartet“ (Seitenleiste) ---------- */ #open-invoice-hint.panel { border: 1.5px solid rgba(var(--vtva-rgb), .55); border-radius: var(--ui-block-border-radius, 12px); background: radial-gradient(120% 90% at 0% 0%, rgba(var(--vtva-rgb), .16) 0%, rgba(var(--vtva-rgb), 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(0, 0, 0, .10) 100%), rgba(var(--vtva-rgb), .07); box-shadow: 0 0 0 1px rgba(var(--vtva-rgb), .12), 0 0 18px rgba(var(--vtva-rgb), .16), 0 4px 16px rgba(0, 0, 0, .18); } #open-invoice-hint .panel-heading { background: transparent; border: 0; padding-bottom: 0; } #open-invoice-hint .panel-title { display: flex; align-items: center; gap: 12px; color: var(--vtva-head); font-weight: 700; line-height: 1.3; } #open-invoice-hint .panel-body p { color: var(--vtva-text); } #open-invoice-hint .btn-warning { box-shadow: 0 0 16px rgba(var(--vtva-rgb), .30); } /* ---------- Handy: Knopf unter den Text, volle Breite ---------- */ @media (max-width: 767px) { .alert.alert-lagom:not(.alert-floating):not(.network-issue-alert):not(.verification-banner) { flex-wrap: wrap; padding: 14px 16px; gap: 12px 14px; } .alert.alert-lagom:not(.alert-floating):not(.network-issue-alert):not(.verification-banner) > .alert-body { flex: 1 1 calc(100% - 54px); } .alert.alert-lagom:not(.alert-floating):not(.network-issue-alert):not(.verification-banner) > .alert-actions { flex: 1 1 100%; justify-content: flex-end; } .alert.alert-lagom:not(.alert-floating) > .alert-actions .btn:not(.btn-icon):not(.close) { flex: 1; } .alert.alert-lagom:not(.alert-primary):not(.alert-floating):not(.network-issue-alert):not(.verification-banner):not(:has(> .alert-icon))::after { left: 36px; } /* Leisten: Text bricht um → Chip, erste Textzeile und Schließen-Kreuz auf eine Linie (Zeilenhöhe 24 px, Chip/Kreuz 32 px) */ .alert.alert-lagom.network-issue-alert > .container, .alert.alert-lagom.verification-banner > .container { align-items: flex-start; } .alert.alert-lagom.network-issue-alert .alert-body > div, .alert.alert-lagom.verification-banner .alert-body > div { align-items: flex-start; line-height: 24px; } .alert.alert-lagom.network-issue-alert .alert-body > div > i, .alert.alert-lagom.verification-banner .alert-body > div > i, .alert.alert-lagom.network-issue-alert .alert-actions .close, .alert.alert-lagom.verification-banner .alert-actions .close { margin-top: -4px !important; } .alert.alert-lagom.network-issue-alert .alert-body > .btn, .alert.alert-lagom.verification-banner .alert-body > .btn { flex: 1 1 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .client-home-alerts .alert.client-home-alert, .client-home-alerts .alert.client-home-alert:hover { transition: none; transform: none; } }