/* ===================================================================== B2B Gator - Design Theme (Black + Dark-Green) Loaded AFTER stylesheet.css to override the legacy look. Removal of this tag in layouts = instant rollback. ===================================================================== */ /* --------------------------------------------------------------- 1. Design Tokens --------------------------------------------------------------- */ :root { --bg-page: #000000; /* Card-Surface-Finetuning: dunkles Anthrazit mit minimalem Gruenstich + leichte Transparenz, damit der gruene Body-Glow leicht durchscheint. Wirkt zusammen mit dem Top-Highlight-Verlauf (--bg-card-image) und dem leicht staerkeren Drop-Shadow (--shadow-card) als ruhige, matte dunkle Oberflaeche - kein Glow, kein Glassmorphism, kein Cyber-Look. */ --bg-card-color: rgba(13, 22, 20, 0.94); --bg-card-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.010) 35%, rgba(255, 255, 255, 0) 75% ); --bg-card: var(--bg-card-color); /* Legacy-Alias: alle bestehenden Regeln bleiben unveraendert */ --bg-inset: #06100f; --bg-elev: #0f1c1a; --bg-hover: rgba(31, 176, 154, 0.06); --border-card: #14322f; --border-strong: #1d4944; --border-soft: rgba(41, 157, 140, 0.22); --border-divider: rgba(41, 157, 140, 0.14); --accent: #1fb09a; --accent-hover: #2dc6ad; --accent-strong: #29c79b; --accent-soft-bg: rgba(31, 176, 154, 0.12); --accent-soft-bg-strong: rgba(31, 176, 154, 0.2); --accent-soft-text: #7ad7c5; /* Buttons & Badges - tuerkiser Akzent (synchron zu --accent). War vorher in einem dunkelgruenen Ton (#0e5448 / #146a5a) - jetzt einheitlich tuerkis. */ --btn-bg: #1fb09a; --btn-bg-hover: #2dc6ad; --btn-text: #ffffff; --badge-bg: #1fb09a; --badge-bg-strong: #2dc6ad; --text: #ffffff; /* Patch 2026-07-03: --text-muted ist jetzt weiss (vorher #8da3a0). Damit sind alle Beschreibungs-/Sekundaertexte, die var(--text-muted) nutzen, in weiss statt grau. Auf Wunsch (bessere Lesbarkeit auf dem dunklen Hintergrund - keine Abstufung mehr zwischen Titel/Body). */ --text-muted: #ffffff; --text-dim: #5d6f6d; --status-success: #15a038; --status-success-bg: rgba(21, 160, 56, 0.16); --status-danger: #e23131; --status-danger-bg: rgba(226, 49, 49, 0.14); --status-warn: #f08c2e; --status-warn-bg: rgba(240, 140, 46, 0.14); --status-info: #2da6d7; --status-info-bg: rgba(45, 166, 215, 0.14); --radius-card: 10px; --radius-card-sm: 10px; --radius-chip: 10px; --radius-btn: 10px; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.025) inset, 0 10px 26px -16px rgba(0, 0, 0, 0.55); } /* --------------------------------------------------------------- 2. Base / Page Background Dunkelgruener Glow analog b2bgator-v1 (bg.svg) - aber deutlich dezenter: nur ein kleiner, dunkler Spot im Zentrum, ringsum schnell zu reinem Schwarz. Tuning-Hinweise: * Glow-Farbe in der Mitte: erste stop-Farbe (#062520) * Glow-Groesse: ellipse-Werte (60%/45%) * Wie schnell schwarz wird: mittlere stop-Position (25%) Rollback: beide body-Bloecke wieder auf var(--bg-page) zuruecksetzen. --------------------------------------------------------------- */ html, body { background-color: #000 !important; background-image: radial-gradient( ellipse 70% 55% at 50% 31%, #093530 0%, #06231f 28%, #010c0a 55%, #000 75% ) !important; background-repeat: no-repeat !important; background-attachment: fixed !important; background-size: 100% 100% !important; color: var(--text); } .bg-fixed { display: none !important; } body, body.customer, body.admin { background-color: #000 !important; background-image: radial-gradient( ellipse 70% 55% at 50% 31%, #093530 0%, #06231f 28%, #010c0a 55%, #000 75% ) !important; background-repeat: no-repeat !important; background-attachment: fixed !important; background-size: 100% 100% !important; } * { color: inherit; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } /* Globale Container-Breite: 98% statt 90% */ .inner { width: 98% !important; max-width: 1580px; margin: auto !important; } /* --------------------------------------------------------------- 3. Card system - collapse the .outer-box > .box-inner nesting into a single visual card. --------------------------------------------------------------- */ .outer-box { margin: 0 0 16px; background: none !important; border: 0 !important; padding: 0 !important; } /* Dashboard-Sektionen: ausgewogene Abstaende zwischen den Bloecken */ .module.dashboard .dashboard-campaigns-headline { margin-top: 8px; } /* Default: .outer-box-inner wird die Karte (z.B. Form-Seiten). */ .outer-box-inner { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-card); } /* Wenn .outer-box-inner Sub-Karten enthaelt (.box, .button-box, .brand-card, .order-card, .product-card, .stat-tile, .alert-callout, .flex-wrapper.flex-teaser, Slider): wird der aeussere Wrapper UNSICHTBAR (keine doppelten Boxen). */ .outer-box-inner:has(> .box), .outer-box-inner:has(> .button-box), .outer-box-inner:has(.brand-slider), .outer-box-inner:has(.highlights-slider), .outer-box-inner:has(.modal-campaigns-slider), .outer-box-inner:has(.flex-wrapper.flex-teaser), .outer-box-inner:has(.dashboard-campaigns-headline) { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } /* .box-inner: in Sub-Cards bleibt es die Karte (Produkte/Highlights/etc.). In flachen Formular-Seiten (kein .outer-box-inner Wrapper) auch direkt nutzbar. */ .box-inner { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 24px; } .box.box-blank .box-inner { background: none; border: 0; padding: 0; } /* Innere Boxen im Flex-Teaser-Akkordeon (Customer-Support, 5 Spalten) bekommen eine eigene, leichte Karten-Optik mit gleichmaessiger Hoehe. */ .flex-wrapper.flex-teaser .box { display: flex; } .flex-wrapper.flex-teaser .box .box-inner { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 18px 16px; width: 100%; height: 100%; } .flex-wrapper.flex-teaser .box .box-inner .box-content { background: none; padding: 14px 16px 16px; border: 0; } /* Produktkacheln im Kampagnen-Formular: Inhalt unter dem Bild bekommt Padding */ .flex-wrapper.flex-teaser.reorder-teaser .box .box-inner .box-content { padding: 16px 16px 18px !important; } .flex-wrapper.flex-teaser.reorder-teaser .box .box-inner .box-content h5 { margin: 0 0 4px; } .flex-wrapper.flex-teaser.reorder-teaser .box .box-inner .box-content p { margin: 0 0 8px; } .flex-wrapper.flex-teaser.reorder-teaser .box .box-inner .box-content .form-group { margin-top: 14px; } /* --------------------------------------------------------------- Card-Surface-Finetuning: Top-Level-Karten bekommen einen sehr dezenten Top-Highlight-Verlauf auf dem Anthrazit (Layered-Background) + leicht staerkeren Shadow. Wirkt zusammen mit der ~6% Transparenz von --bg-card-color als ruhige, hochwertige dunkle Oberflaeche mit Tiefe. Inputs/Selects/Textareas bleiben bewusst aussen vor (flach). --------------------------------------------------------------- */ .outer-box-inner, .box-inner, .flex-wrapper.flex-teaser .box .box-inner, .brand-card, .brand-card-new, .campaign-card, .dashboard-actions-3 .dashboard-buttons a.button-box, .dashboard-appointment-promo, .dashboard-actions a.button-box, .button-box, .headline-box, .icon-box, .icon-box.kpi-tile, .order-card, .order-tile, .product-card, .module .box.orders-list-box .box-inner, .module form .outer-box-inner .box, #id_checkout > .box-inner { background: var(--bg-card-image), var(--bg-card-color); box-shadow: var(--shadow-card); } /* Bei .outer-box-inner mit Sub-Karten-Inhalt soll der aeussere Wrapper weiterhin "unsichtbar" bleiben (vgl. Block 3) - das gilt auch fuer den neuen Layered-Background + Shadow. */ .outer-box-inner:has(> .box), .outer-box-inner:has(> .button-box), .outer-box-inner:has(.brand-slider), .outer-box-inner:has(.highlights-slider), .outer-box-inner:has(.modal-campaigns-slider), .outer-box-inner:has(.flex-wrapper.flex-teaser), .outer-box-inner:has(.dashboard-campaigns-headline) { background: none !important; box-shadow: none !important; } .box.box-blank .box-inner { background: none; border: 0; padding: 0; } .box.box-right .box-inner { background: var(--accent-soft-bg); border: 1px solid var(--border-card); border-radius: var(--radius-card); } /* Login/Check-Email-Layout: zwei Spalten-Karten bilden eine optische Einheit. Aussen-Ecken abgerundet (gleicher Radius links + rechts), Innen-Ecken (Mitte) NICHT abgerundet. */ .box.box-left .box-inner { border-radius: var(--radius-card) 0 0 var(--radius-card) !important; } .box.box-right .box-inner { border-radius: 0 var(--radius-card) var(--radius-card) 0 !important; } /* Falls die zwei Karten unter einander rutschen (mobile/schmaler Viewport), beide voll abgerundet, damit nicht eine Seite "aufgeschnitten" wirkt. */ @media (max-width: 900px) { .box.box-left .box-inner, .box.box-right .box-inner { border-radius: var(--radius-card) !important; } } /* --------------------------------------------------------------- 4. Topbar --------------------------------------------------------------- */ #id_topbar { padding: 14px 32px; /* Kein Hintergrund, keine Trennlinie - Topbar schwebt ueber dem Body-Glow ohne harte Kante. */ background: transparent !important; border-bottom: 0 !important; } /* Flex-Layout: Logo nimmt natuerliche Breite (linksbuendig), Menue bekommt den Rest und richtet seine Items rechts aus. Loest das 50/50-Korsett, das die Menue-Eintraege bei vielen Items in zwei Zeilen brach. Nur Desktop - Mobile bleibt block-Layout (Drawer-Verhalten). */ @media (min-width: 769px) { #id_topbar #id_ci { width: auto !important; flex: 0 0 auto !important; } #id_topbar #id_menu { width: auto !important; flex: 1 1 auto !important; } /* Logo: -10 % ggue. vorher (44 -> 40 px) und aspect-ratio-preserving. Vorher war `width: 230px !important; max-height: 44px` -> SVG wurde horizontal auf 230x44 gestreckt (viewBox ist 457x152, also 3:1). Jetzt Ratio-erhaltend: height 40 -> width auto = ~120 px. Zusaetzlich `margin-left: 0` (frueher -12 in stylesheet.css) - damit steht das Logo am gleichen linken Abstand wie das Store-Dropdown rechts vom rechten Rand (siehe li:last-child padding-right unten). Gilt fuer Customer (img.not-mobile) UND Admin (body.admin img) - letzteres damit das b2bgator-Logo im Admin-Layout die gleiche Groesse hat wie im Kunden-/Login-Bereich. */ #id_topbar #id_ci img.not-mobile, body.admin #id_topbar #id_ci img { width: auto !important; height: 40px !important; max-height: 40px !important; margin-left: 0 !important; } /* Rechte Symmetrie NUR im Kunden-Layout: letztes Menue-Item (Store-Dropdown) laeuft an den 32-px-Padding-Rand der Topbar heran. Im Admin ist das letzte
  • ein Logout-Icon - dort brauchen wir den normalen Padding, sonst klebt das Icon direkt an der Viewport-Kante. */ body.customer #id_topbar #id_menu ul > li:last-child { padding-right: 0 !important; } /* === Desktop 3-Zonen-Layout NUR fuer Customer ===================== Logo links / Nav BILDSCHIRMmittig / Store rechts. Umbau 2026-07-05d: Der reine Flex-Spacer-Ansatz zentrierte die Nav-Items nur INNERHALB der Menue-Zone (nach Logo, vor Store) - nicht bildschirmmittig, weil #id_menu nach dem Logo-Element im Flex-Fluss startet. Loesung: #id_menu wird per position: absolute ueber die volle Topbar-Breite gespannt (left: 32px, right: 32px - das sind die Topbar-Padding-Werte). Das UL innen ist dann volle Bildschirmbreite abzueglich der 2x 32px Rand. Die ::before/::after- Spacer (flex: 1) verteilen sich gleichmaessig -> Nav-Items sind WIRKLICH bildschirmmittig. Kollision mit Logo (links) wird durch pointer-events: none auf #id_menu und dessen Spacer geloest - Logo bleibt klickbar. Die Nav-Items und der Store bekommen pointer-events: auto zurueck. #id_topbar hat bereits position: relative (aus stylesheet.css Zeile 4301). Also ist es der Positioning-Anchor fuer #id_menu. Vertikale Zentrierung: top: 50% + transform: translateY(-50%) direkt am #id_menu - alle Kinder erben das (nicht mehr am UL noetig). Admin bleibt beim Standard-Flex-Layout (Menue rechtsbuendig) - dort gibt es kein Store-Dropdown und das Layout ist ok wie es ist. */ /* #id_menu spannt sich absolut ueber die volle Topbar-Breite. Das UL innen hat dadurch = Screen-Breite - 2x32px (Padding). */ body.customer #id_topbar #id_menu { position: absolute !important; left: 32px !important; right: 32px !important; top: 50% !important; transform: translateY(-50%) !important; flex: none !important; width: auto !important; min-width: 0 !important; pointer-events: none !important; } /* UL: Flex mit justify-content: center - Nav-Items bildschirmzentriert. KEINE Spacer mehr, KEIN order-Trick fuer den Store. Der Store wird stattdessen per position: absolute aus dem Flex-Fluss rausgenommen und rechts geparkt (siehe unten). Dadurch beeinflusst der Store die Zentrierung der Nav-Items NICHT mehr - sie sind echt bildschirmmittig. */ body.customer #id_topbar #id_menu ul { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none; gap: 0; pointer-events: none !important; position: relative; } /* Nav-Items: pointer-events wieder aktivieren. Der Bereich am linken UL-Rand (0-Nav-Anfang) hat pointer-events: none - Klicks aufs Logo gehen durch. */ body.customer #id_topbar #id_menu ul > li { pointer-events: auto !important; } /* Store-
  • aus dem Flex-Fluss RAUSnehmen -> nimmt keinen Platz mehr in der Nav-Zentrierung ein. position: absolute; right: 0 (= rechter UL-Rand = 32px vom Bildschirmrand). top: 50% + translateY(-50%) fuer vertikale Zentrierung im UL (dessen Hoehe = Nav-Item-Hoehe). */ body.customer #id_topbar #id_menu ul > li.account-dropdown, body.customer #id_topbar #id_menu ul > li:has(> span.store.not-mobile) { position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; padding-right: 0 !important; margin: 0 !important; } } #id_topbar #id_menu ul { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; justify-content: flex-end; flex-wrap: nowrap; } #id_topbar #id_menu ul li { margin: 0; padding: 0 14px; position: relative; white-space: nowrap; } #id_topbar #id_menu ul li a { color: var(--text); text-decoration: none !important; text-transform: uppercase; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; padding: 18px 0; display: inline-block; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; white-space: nowrap; } #id_topbar #id_menu ul li a:hover { color: var(--accent); text-decoration: none !important; } #id_topbar #id_menu ul li a.active { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none !important; } /* Haupt-Navigation: animierte Unterstreichung (laeuft beim Hover von links nach rechts auf) statt statischer Border. Die Linie sitzt naeher am Text (bottom: 8px statt am unteren Rand der 18px-Padding-Box). */ #id_topbar #id_menu ul li.nav-main a { position: relative; border-bottom: none; } #id_topbar #id_menu ul li.nav-main a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .28s ease; } #id_topbar #id_menu ul li.nav-main a:hover::after, #id_topbar #id_menu ul li.nav-main a.active::after { transform: scaleX(1); } /* "Handlung erforderlich" (> 0): Menuepunkt orange + Badge mit Anzahl. */ #id_topbar #id_menu ul li.nav-main a.has-action { color: var(--status-warn); } #id_topbar #id_menu ul li.nav-main a.has-action::after { background: var(--status-warn); } #id_topbar #id_menu ul li.nav-main a.has-action:hover { color: var(--status-warn); } #id_topbar #id_menu ul li.nav-main a .nav-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 7px; padding: 0; border-radius: 50%; background: var(--status-warn); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: middle; box-sizing: border-box; flex: none; } /* User-Pill rechts */ #id_topbar .topbar-user, #id_topbar .account-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border-card); background: var(--bg-card); color: var(--text); } #id_topbar .topbar-bell { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-card); color: var(--text); position: relative; } #id_topbar .topbar-bell .badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 50%; background: var(--badge-bg); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } /* --------------------------------------------------------------- 5. Section / Module / Inner --------------------------------------------------------------- */ .section { padding-top: 32px; background: transparent; } .module { padding-top: 8px; } /* --------------------------------------------------------------- 6. Headings --------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: var(--text); } h1 { font-size: 2rem; font-weight: 700; letter-spacing: 0.02em; } /* --------------------------------------------------------------- 7. Form elements - dark variant --------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], select, textarea { background: var(--bg-card) !important; color: var(--text) !important; border: 1px solid var(--border-card) !important; border-radius: var(--radius-card-sm) !important; padding: 14px 16px !important; box-shadow: none !important; font-size: 0.95rem; width: 100%; box-sizing: border-box; } /* Natives Kalender-Icon des Date-/Time-Inputs weiss faerben (Default ist schwarz -> auf dunklem Grund unsichtbar). invert(1) macht schwarz -> weiss. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.8; cursor: pointer; } input::placeholder, textarea::placeholder { color: var(--text-dim) !important; opacity: 1; } input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft-bg) !important; outline: none !important; } select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 38px !important; } select option { background: var(--bg-elev); color: var(--text); } .form-group { position: relative; margin-bottom: 16px; } .form-label { color: var(--text-muted) !important; font-weight: 400; } .focused .form-label, .has-value .form-label { color: var(--accent) !important; } /* checkboxes / radios visible on dark bg */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: auto !important; padding: 0 !important; } /* --------------------------------------------------------------- 8. Buttons - vereinheitlicht auf Layout-Stile Es existieren NUR diese drei Varianten: - Primary (default .btn) : Teal Pill, weisser Text - Outline (.btn-outline) : Transparent + Teal-Border, Teal-Text - Danger (.btn-red, etc.) : Roter Pill, weisser Text Alle Sonder-Varianten (orange, lila, pink, grau, weiss-flip) werden auf Primary normalisiert. --------------------------------------------------------------- */ .btn, input[type="submit"], button.btn { background-color: var(--btn-bg) !important; background-image: none !important; background-repeat: no-repeat !important; color: var(--btn-text) !important; border: 0 !important; border-radius: var(--radius-btn) !important; padding: 13px 26px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; font-size: 0.8rem !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; transition: background-color .15s, border-color .15s, color .15s; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; } .btn:hover, input[type="submit"]:hover, button.btn:hover { background-color: var(--btn-bg-hover) !important; color: var(--btn-text) !important; border-color: transparent !important; } /* Groessen-Modifier */ .btn.btn-small { padding: 9px 16px !important; font-size: 0.72rem !important; } .btn.btn-big { padding: 16px 30px !important; font-size: 0.9rem !important; } /* --- Outline (sekundaer) --- */ .btn.btn-outline { background-color: transparent !important; border: 1px solid var(--accent) !important; color: var(--accent) !important; } .btn.btn-outline:hover { background-color: var(--btn-bg) !important; color: #fff !important; border-color: var(--btn-bg) !important; } /* --- Danger (rot) - fuer Loeschen/Ablehnen/Reset --- */ .btn.btn-red, .btn.btn-delete-order, .btn.btn-complete.customerlogout, .btn.rejected, .btn.btn-reset { background-color: var(--status-danger) !important; color: #fff !important; } .btn.btn-red:hover, .btn.btn-delete-order:hover, .btn.btn-complete.customerlogout:hover, .btn.rejected:hover, .btn.btn-reset:hover { background-color: #c91f1f !important; color: #fff !important; } /* --- Aktiv-Zustand (z.B. Filter-Pills) --- */ .btn.active, .btn.active:hover { background-color: var(--bg-elev) !important; color: var(--accent) !important; cursor: default; border: 1px solid var(--border-strong) !important; text-decoration: none !important; } /* --- Approved (Erfolg) bleibt im Layout-Look (dunkelgruen) --- */ .btn.approved { background-color: var(--btn-bg) !important; color: #fff !important; } /* Confirm/Reject-Buttons (Agentur-Auftrag-Liste): beim Hover soll NUR der Button-Hintergrund abdunkeln - das Icon bleibt weiss (vorher faerbte sich das Icon gruen/rot, weil das SVG auf die farbige Variante wechselte). */ .btn.approved:hover { background-color: #17998a !important; color: #fff !important; } .btn.approved:hover .icon.approved { background-image: url('../images/icons/approved-invert.svg') !important; } .btn.rejected:hover .icon.rejected { background-image: url('../images/icons/rejected-invert.svg') !important; } /* --- Alle Icon-Buttons: KEIN Hintergrundbild mehr (Layout-Look pur) --- Das eigentliche Icon wird ggf. ueber Markup gerendert. */ .btn.btn-add, .btn.btn-plus, .btn.btn-confirm, .btn.btn-qty, .btn.btn-download, .btn.btn-send, .btn.btn-email, .btn.btn-print, .btn.btn-save, .btn.btn-question, .btn.btn-view-edit, .btn-phone { background-image: none !important; background-color: var(--btn-bg) !important; color: #fff !important; padding: 13px 26px !important; } .btn.btn-add:hover, .btn.btn-plus:hover, .btn.btn-confirm:hover, .btn.btn-qty:hover, .btn.btn-download:hover, .btn.btn-send:hover, .btn.btn-email:hover, .btn.btn-print:hover, .btn.btn-save:hover, .btn.btn-question:hover, .btn.btn-view-edit:hover, .btn-phone:hover { background-color: var(--btn-bg-hover) !important; color: #fff !important; } /* --- Onboarding-Status-Buttons (Admin): farbliche Bedeutung beibehalten --- Pill-Form, kein Hintergrundbild-Pattern, Farbe je Status. */ .btn.btn-onboarding-status { background-image: none !important; color: #fff !important; padding: 10px 18px !important; text-align: left !important; } .btn.btn-onboarding-status.onboarding-red { background-color: var(--status-danger) !important; } .btn.btn-onboarding-status.onboarding-yellow { background-color: var(--status-warn) !important; } .btn.btn-onboarding-status.onboarding-blue { background-color: var(--status-info) !important; } .btn.btn-onboarding-status.onboarding-green { background-color: var(--status-success) !important; } .btn.btn-onboarding-status:hover { opacity: 0.85; color: #fff !important; } /* btn-view-edit braucht trotzdem die kompakte Quadrat-Form (Tabellen-Aktion) */ .btn.btn-view-edit { width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50% !important; } /* Icon-Only-Button: quadratisch, kompakt, nur ein SVG drin (kein Text). */ .btn.btn-icon-only { width: 34px !important; height: 34px !important; padding: 0 !important; gap: 0 !important; border-radius: var(--radius-btn) !important; } .btn.btn-icon-only svg { width: 16px !important; height: 16px !important; display: block; } .btn.btn-icon-only.btn-small { width: 30px !important; height: 30px !important; } .btn.btn-icon-only.btn-small svg { width: 14px !important; height: 14px !important; } /* Stellt sicher, dass /Text-Knoten innerhalb des Icon-Buttons nicht rendern */ .btn.btn-icon-only nobr { display: none !important; } /* Rote Variante: Logout-Icon-Button */ .btn.btn-icon-only.btn-logout-icon { background: var(--status-danger, #be1622) !important; border-color: var(--status-danger, #be1622) !important; color: #fff !important; } .btn.btn-icon-only.btn-logout-icon svg { stroke: #fff !important; } .btn.btn-icon-only.btn-logout-icon:hover { background: #9c121c !important; border-color: #9c121c !important; } /* Inner span / icon Farben in den Buttons immer weiss */ .btn span, .btn .icon, input[type="submit"] span { color: #fff !important; } .btn.btn-outline span, .btn.btn-outline .icon { color: var(--accent) !important; } .btn.btn-outline:hover span, .btn.btn-outline:hover .icon { color: #fff !important; } /* btn-circle: kompakter Run-/Icon-Button - Layout-Pill in klein */ .btn.btn-circle { background-color: var(--btn-bg) !important; color: #fff !important; padding: 10px 18px !important; } /* btn-resend (Wiederholversand): wie Primary */ .btn-resend { background-color: var(--btn-bg) !important; color: #fff !important; border: 0 !important; border-radius: var(--radius-btn) !important; } .btn-resend:hover { background-color: var(--btn-bg-hover) !important; color: #fff !important; } /* Disabled */ .btn[disabled], .btn.disabled, input[type="submit"][disabled] { opacity: 0.5 !important; cursor: not-allowed !important; } /* --------------------------------------------------------------- 9. Tables --------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; } table th { color: var(--text-muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 700; text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--border-divider) !important; } table td { padding: 14px 12px; border-bottom: 1px solid var(--border-divider) !important; vertical-align: middle; color: var(--text); font-size: 0.9rem; } table tbody tr:hover { background: var(--bg-hover); } table tbody tr:last-child td { border-bottom: 0 !important; } table.responsive-table { width: 100%; } /* --------------------------------------------------------------- 9b. Breite Tabellen in Karten horizontal scrollbar --------------------------------------------------------------- Gilt jetzt auf ALLEN Viewports (nicht nur <= 1280px), weil uebersichtsseiten wie /order auch bei 1400-1600px breiteren Viewports noch Spalten abschneiden. Ohne Media-Query bleibt die Tabelle ihre natuerliche Breite, der Container scrollt horizontal. iPad (Landscape 1024px, Portrait 768px) und kleinere Tablet/Phone Viewports: Tabellen wie /admin/customers (17 Spalten) ueberlaufen die Karte rechts und sind ohne Scroll nicht erreichbar. Pure-CSS-Loesung via :has() - kein Markup-Wrapper noetig. Greift nur dort, wo ein DIREKT in der Card-Surface sitzt. Tabellen mit Klasse "responsive-table" sind ausgenommen (eigenes Card-Layout unter 1024px, siehe stylesheet.css). */ .box-inner:has(> table:not(.responsive-table)), .box-inner:has(> form > table:not(.responsive-table)), .outer-box-inner:has(> table:not(.responsive-table)) { overflow-x: auto; -webkit-overflow-scrolling: touch; } .box-inner > table:not(.responsive-table), .box-inner > form > table:not(.responsive-table), .outer-box-inner > table:not(.responsive-table) { width: max-content; min-width: 100%; } /* Duenne, sichtbare Scrollbar (WebKit/Blink). */ .box-inner:has(> table:not(.responsive-table))::-webkit-scrollbar, .box-inner:has(> form > table:not(.responsive-table))::-webkit-scrollbar, .outer-box-inner:has(> table:not(.responsive-table))::-webkit-scrollbar { height: 8px; } .box-inner:has(> table:not(.responsive-table))::-webkit-scrollbar-thumb, .box-inner:has(> form > table:not(.responsive-table))::-webkit-scrollbar-thumb, .outer-box-inner:has(> table:not(.responsive-table))::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 4px; } .box-inner:has(> table:not(.responsive-table))::-webkit-scrollbar-track, .box-inner:has(> form > table:not(.responsive-table))::-webkit-scrollbar-track, .outer-box-inner:has(> table:not(.responsive-table))::-webkit-scrollbar-track { background: transparent; } /* Auch "responsive-table"-Tabellen (Auftrags-Uebersicht, etc.) horizontal scrollbar machen - aber NUR oberhalb des Card-Layout-Breakpoints (>1024px). Unterhalb wandelt sich die Tabelle in das Card-Layout (stylesheet.css @media max-width:1024px), dort ist kein horizontal- Scroll noetig. Symptom: /order hat Statusspalte ab ca. 1477px Viewport-Breite abgeschnitten, weil die Status-Pille mit white-space: nowrap aus der Zellenbreite ausreisst. */ @media (min-width: 1025px) { .box-inner:has(> table.responsive-table), .box-inner:has(> form > table.responsive-table), .outer-box-inner:has(> table.responsive-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } .box-inner > table.responsive-table, .box-inner > form > table.responsive-table, .outer-box-inner > table.responsive-table { width: max-content; min-width: 100%; } /* Tabellen in einem Toggle-Zwischen-Div (#id_orders_content_temp, z.B. Anfragen "Weitere Anfragen", Haendler-Auftragsliste): die :has(>table)-Regeln oben greifen dort nicht (Tabelle ist kein direktes box-inner-Kind) -> Inhalt lief rechts aus der Karte, Buttons am Zeilenende unerreichbar. Das Div scrollt selbst. */ #id_orders_content_temp { overflow-x: auto; -webkit-overflow-scrolling: touch; } #id_orders_content_temp > table.responsive-table { width: max-content; min-width: 100%; } #id_orders_content_temp::-webkit-scrollbar { height: 8px; } #id_orders_content_temp::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 4px; } #id_orders_content_temp::-webkit-scrollbar-track { background: transparent; } .box-inner:has(> table.responsive-table)::-webkit-scrollbar, .box-inner:has(> form > table.responsive-table)::-webkit-scrollbar, .outer-box-inner:has(> table.responsive-table)::-webkit-scrollbar { height: 8px; } .box-inner:has(> table.responsive-table)::-webkit-scrollbar-thumb, .box-inner:has(> form > table.responsive-table)::-webkit-scrollbar-thumb, .outer-box-inner:has(> table.responsive-table)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 4px; } .box-inner:has(> table.responsive-table)::-webkit-scrollbar-track, .box-inner:has(> form > table.responsive-table)::-webkit-scrollbar-track, .outer-box-inner:has(> table.responsive-table)::-webkit-scrollbar-track { background: transparent; } } /* --------------------------------------------------------------- 10. Section Header with Icon-Pin --------------------------------------------------------------- */ .card-header, .section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .card-header-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; } .card-header-icon svg { width: 20px; height: 20px; } .card-header-text { flex: 1; min-width: 0; } .card-header-title { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0; color: var(--text); } .card-header-sub { color: var(--text-muted); font-size: 0.85rem; margin-top: 3px; } .card-header-right { margin-left: auto; } .card-header-right a { color: var(--accent); text-decoration: none; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } /* --------------------------------------------------------------- 11. Hero Banner (Brand / Welcome / Campaign) --------------------------------------------------------------- */ .hero-banner { position: relative; border: 1px solid var(--border-card); border-radius: var(--radius-card); overflow: hidden; min-height: 280px; background: var(--bg-card); } .hero-banner-media { position: absolute; inset: 0; z-index: 0; } .hero-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-banner-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 60%, transparent 100%); z-index: 1; } .hero-banner-content { position: relative; padding: 40px; z-index: 2; } .hero-banner-eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 700; } .hero-banner-title { font-size: 2.2rem; font-weight: 700; margin: 12px 0 12px; line-height: 1.15; } .hero-banner-text { color: var(--text-muted); max-width: 460px; margin-bottom: 22px; } .hero-info-strip { display: flex; gap: 36px; flex-wrap: wrap; padding: 18px 40px; border-top: 1px solid var(--border-divider); background: rgba(0,0,0,0.55); position: relative; z-index: 2; } .hero-info-strip .info-item dt, .hero-info-strip .info-item-label { color: var(--text-muted); text-transform: uppercase; font-size: 0.72em; letter-spacing: 0.08em; } .hero-info-strip .info-item dd, .hero-info-strip .info-item-value { color: var(--text); font-weight: 600; margin: 4px 0 0; } /* --------------------------------------------------------------- 12. Filter-Bar (pills + search) --------------------------------------------------------------- */ .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; } .filter-pill, .filter-bar select { /* background-color statt background-shorthand, damit das globale background-image (Dropdown-Pfeil) von select{...} (Z. 382) erhalten bleibt - sonst kein Pfeil bei .filter-bar select. */ background-color: var(--bg-card) !important; border: 1px solid var(--border-card) !important; color: var(--text) !important; padding: 11px 18px !important; border-radius: var(--radius-chip) !important; font-size: 0.85rem !important; cursor: pointer; min-width: 160px; width: auto !important; } .filter-pill[data-active="true"] { border-color: var(--accent) !important; color: var(--accent) !important; } .filter-bar select { padding-right: 38px !important; } .filter-checkbox { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--text); font-size: 0.85rem; border: 1px solid var(--border-card); border-radius: var(--radius-chip); background: var(--bg-card); cursor: pointer; } .filter-checkbox input[type="checkbox"] { margin: 0; } .filter-search { flex: 1; min-width: 220px; position: relative; } .filter-search input[type="text"], .filter-search input[type="search"] { padding-left: 40px !important; border-radius: var(--radius-chip) !important; } .filter-search::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; z-index: 1; pointer-events: none; } /* --------------------------------------------------------------- 13. Stat-Tile (action boxes / KPIs) --------------------------------------------------------------- */ .stat-tile { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); position: relative; transition: border-color .15s, transform .15s; text-decoration: none; color: var(--text); } .stat-tile:hover { border-color: var(--accent); color: var(--text); } .stat-tile-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; } .stat-tile-icon svg { width: 20px; height: 20px; } .stat-tile-body { flex: 1; min-width: 0; } .stat-tile-label { color: var(--text-muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 700; } .stat-tile-value { font-size: 1rem; font-weight: 600; margin-top: 4px; color: var(--text); } .stat-tile-cta { color: var(--accent); font-size: 0.8rem; margin-top: 6px; display: inline-block; } .stat-tile-arrow { margin-left: auto; color: var(--text-muted); font-size: 1.1rem; flex: 0 0 16px; } /* --------------------------------------------------------------- 14. Order-Card (Auftraege Grid) --------------------------------------------------------------- */ .order-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 18px 20px; display: flex; flex-direction: column; min-height: 100%; } .order-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .order-card-title { font-weight: 700; font-size: 0.95rem; color: var(--text); } .order-card-brand { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 12px; } .order-card-meta { display: flex; gap: 14px; color: var(--text-muted); font-size: 0.78rem; flex-wrap: wrap; margin-bottom: 14px; } .order-card-meta-item { display: inline-flex; align-items: center; gap: 6px; } .order-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--border-divider); border-bottom: 1px solid var(--border-divider); } .order-card-stat-label { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; } .order-card-stat-value { font-weight: 700; margin-top: 2px; color: var(--text); } .order-card-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .order-card-actions .btn-small { padding: 9px 14px; } .order-card-kebab { margin-left: auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-muted); background: transparent; border: 0; cursor: pointer; } .order-card-kebab:hover { background: var(--bg-hover); color: var(--text); } /* --------------------------------------------------------------- 15. Request-Row (Anfragen-Tabelle) --------------------------------------------------------------- */ .request-table th, .request-table td { padding: 16px 12px; } .request-thema { display: flex; align-items: center; gap: 12px; } .request-thema-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; } .request-thema-icon svg { width: 18px; height: 18px; } .request-thema-title { font-weight: 600; color: var(--text); } .request-thema-sub { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; } /* --------------------------------------------------------------- 16. Pill-Chips (status, filter, tag) --------------------------------------------------------------- */ .pill-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-chip); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .pill-chip.is-success { background: var(--status-success-bg); color: #5ed688; } .pill-chip.is-danger { background: var(--status-danger-bg); color: #ff6c6c; } .pill-chip.is-warn { background: var(--status-warn-bg); color: #ffac68; } .pill-chip.is-info { background: var(--status-info-bg); color: #75c8e8; } .pill-chip.is-accent { background: var(--accent-soft-bg); color: var(--accent-soft-text); } .pill-chip.is-neutral { background: var(--bg-elev); color: var(--text); } .pill-chip.is-outline { border: 1px solid var(--border-strong); color: var(--text-muted); background: transparent; } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot.dot-success { background: var(--status-success); } .dot.dot-danger { background: var(--status-danger); } .dot.dot-warn { background: var(--status-warn); } /* --------------------------------------------------------------- 17. Alert-Callout (Offene Aktionen) --------------------------------------------------------------- */ .alert-callout { border: 1px solid var(--status-warn); background: rgba(240,140,46,0.06); border-radius: var(--radius-card); padding: 20px 24px; margin-bottom: 20px; } .alert-callout .card-header-icon { background: var(--status-warn-bg); color: var(--status-warn); } .alert-callout .alert-callout-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--status-warn); color: #fff; font-size: 0.72rem; font-weight: 700; margin-left: 4px; padding: 0 6px; } /* --------------------------------------------------------------- 18. Misc helpers --------------------------------------------------------------- */ .text-muted { color: var(--text-muted) !important; } .text-dim { color: var(--text-dim) !important; } .text-accent { color: var(--accent) !important; } .section-divider { border: 0; border-top: 1px solid var(--border-divider); margin: 24px 0; } /* legacy color classes seen in stylesheet -> map to tokens */ .statustext { color: var(--text-muted); } /* Avatar / Initials */ .avatar-initials { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--border-card); display: inline-flex; align-items: center; justify-content: center; color: var(--text); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; } /* --------------------------------------------------------------- 19. Daterangepicker / Fancybox / Slick - dark adjustments --------------------------------------------------------------- */ .daterangepicker { background: var(--bg-elev) !important; border: 1px solid var(--border-card) !important; color: var(--text) !important; } .daterangepicker td.in-range { background: var(--accent-soft-bg) !important; color: var(--text) !important; } .daterangepicker td.active, .daterangepicker td.active:hover { background: var(--accent) !important; color: #fff !important; } .daterangepicker .calendar-table th, .daterangepicker .calendar-table td { color: var(--text); } .daterangepicker .calendar-table { background: var(--bg-elev); border: 0; } .fancybox-content { background: var(--bg-card) !important; border: 1px solid var(--border-card) !important; border-radius: var(--radius-card) !important; color: var(--text) !important; } .slick-dots li button:before { color: var(--text-muted) !important; opacity: .4; } .slick-dots li.slick-active button:before { color: var(--accent) !important; opacity: 1; } /* --------------------------------------------------------------- 20. Mobile menu drawer (Customer + Admin) - black + green --------------------------------------------------------------- */ @media (max-width: 768px) { #id_topbar { padding: 10px 16px; } body.customer #id_menu, body.admin #id_menu { background: var(--bg-elev) !important; border-left: 1px solid var(--border-card); } body.customer #id_menu ul li a, body.admin #id_menu ul li a { border-bottom-color: var(--border-divider) !important; } #id_topbar .mobile-menu-toggle span { background: var(--text) !important; } /* Admin-Drawer scrollbar machen: iOS Safari braucht -webkit-overflow-scrolling: touch und ein zuverlaessiges Hoehen-Modell. `height: 100vh` in stylesheet.css bricht auf iOS mit sich einklappender URL-Leiste - wir clampen den Drawer stattdessen zwischen top: 0 und bottom: 0 und lassen den Browser die Hoehe berechnen (funktioniert auf allen mobilen Browsern). overscroll-behavior: contain verhindert das Zurueckscrollen des Bodies, wenn der User im Drawer bis zum Anschlag scrollt. */ body.admin #id_menu { top: 0 !important; bottom: 0 !important; height: auto !important; max-height: 100vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Analog fuer den Customer-Drawer - selbes Problem, selbe Loesung. */ body.customer #id_menu { top: 0 !important; bottom: 0 !important; height: auto !important; max-height: 100vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* --------------------------------------------------------------- 21. Footer / box-footer --------------------------------------------------------------- */ .box-footer { border-top: 0 !important; padding-top: 24px; margin-top: 32px; color: var(--text-muted); } #id_footer { /* Footer-Layout analog zur Topbar: links Copyright, rechts Website, gleiches horizontales Padding wie #id_topbar (32px). Kein .inner- Squeeze mehr (vorher 98% / max 1580px -> Footer "schwebte" in der Mitte, waehrend die Topbar von 0..100% reichte). */ border-top: 0 !important; padding: 28px 32px !important; margin-top: 32px; color: var(--text-muted); } #id_footer .inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } @media (min-width: 769px) { #id_footer .inner { display: flex; align-items: center; } #id_footer .footer-section { width: 33.33%; } #id_footer .footer-section.footer-left { text-align: left; } #id_footer .footer-section.footer-left ul li { margin: 0; padding: 0; } } #id_footer a { color: var(--text-muted); } #id_footer a:hover { color: var(--accent); } /* --------------------------------------------------------------- 22. Back-button "ZUR STARTSEITE" pill --------------------------------------------------------------- */ .back-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--border-strong); color: var(--text) !important; background: var(--bg-card); border-radius: var(--radius-chip); text-decoration: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; } .back-pill:hover { border-color: var(--accent); color: var(--accent) !important; } /* --------------------------------------------------------------- 23. Grid utility (responsive) --------------------------------------------------------------- */ .theme-grid { display: grid; gap: 16px; } .theme-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .theme-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .theme-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .theme-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1024px) { .theme-grid.cols-5, .theme-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .theme-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .theme-grid.cols-2, .theme-grid.cols-3, .theme-grid.cols-4, .theme-grid.cols-5 { grid-template-columns: 1fr; } } /* --------------------------------------------------------------- 24. Button-box / Icon-box overrides (flat black + thin green) --------------------------------------------------------------- */ .button-box, .headline-box { background: var(--bg-card) !important; border: 1px solid var(--border-card) !important; border-radius: var(--radius-card) !important; } .button-box:hover, .icon-box:hover { border-color: var(--accent) !important; } .icon-box { background: var(--bg-card) !important; border: 1px solid var(--border-card) !important; border-radius: var(--radius-card) !important; } /* 3-Action-Boxen auf dem Dashboard: Icon-Tile links statt Hintergrundbild */ .dashboard-actions-3 .button-box { padding: 16px 44px 16px 20px !important; position: relative; } /* Icon-Tile als button-box::before (damit das h3-Icon DARUEBER liegt). BG = box-eigene --tile-Farbe (Indigo/Mauve/Blau bzw. Orange bei .has-action), Fallback auf --badge-bg (Tuerkis). */ .dashboard-actions-3 .dashboard-buttons a.button-box::before { content: ''; position: absolute; left: 20px; top: 16px; width: 42px; height: 42px; border-radius: 50%; /* Styleguide: Icon-Tiles rund */ background: var(--tile, var(--badge-bg)); z-index: 0; pointer-events: none; } /* H3 mit Icon liegt UEBER dem Tile (z-index: 1) - damit das weisse Icon (SVG mit stroke=#fff) im dunkelgruenen Tile sichtbar wird. Typografie: gemischte Schreibweise, weiss, Lesegroesse - analog zu .dashboard-campaigns-headline h4 ("Meine aktiven Marken" etc.). */ .dashboard-actions-3 .dashboard-buttons a.button-box h3 { display: flex !important; align-items: center; gap: 10px; padding-left: 56px !important; position: relative; z-index: 1; background-color: transparent !important; background-size: 24px 24px !important; background-position: 9px center !important; background-repeat: no-repeat !important; min-height: 42px; text-transform: none !important; font-size: 1rem !important; letter-spacing: normal !important; color: #fff !important; font-weight: 700 !important; margin-bottom: 0 !important; } .dashboard-actions-3 .dashboard-buttons a.button-box h3 span.circle { background: var(--badge-bg); color: #fff; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.75rem; font-weight: 700; } /* Sub-Text unter der Headline: weiss, normale Schriftstaerke, identische Groesse wie die p-Unterzeilen der Section-Headlines (.dashboard-campaigns- headline p -> 14px / opacity .85). */ .dashboard-actions-3 .dashboard-buttons a.button-box > span { display: block !important; color: #fff !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; opacity: .85; margin-bottom: 0; } /* "ansehen"-Suffix im H3 - selbe Optik wie die Headline (gemischt, weiss), nur etwas kleiner / leichter und mit kleinem Abstand zur Circle-Zahl. */ .dashboard-actions-3 .dashboard-buttons a.button-box h3 span.not-mobile { color: #fff !important; margin-left: 6px; font-size: 0.9rem !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; opacity: .85; } /* Customer-Support-Akkordeon: 5 Spalten mit Icon-Tile + Liste */ .flex-wrapper.flex-teaser.flex-teaser-small .box .box-inner { padding: 16px !important; } /* Card-Title-Stil der 5 Customer-Support-Boxen-Headlines (Reklamation, Bestellung, Ware, Buchhaltung, Sonstiges). Icon = kreis-outline wie .hd-icon (klein, --sm-Variante). Icon + Headline = WEISS (Styleguide-Regel 6: gleiche Farbe). */ .flex-wrapper.flex-teaser .icon-headline { display: flex !important; align-items: center; gap: 12px; margin: 0 0 14px; padding: 0 !important; background-image: none !important; font-size: 1rem !important; letter-spacing: normal; text-transform: none; color: #fff; font-weight: 600; line-height: 1.25; } .flex-wrapper.flex-teaser .icon-headline .dashboard-headline-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; border: 1px solid currentColor; background: rgba(0, 0, 0, .35); display: inline-flex; align-items: center; justify-content: center; color: #fff; } .flex-wrapper.flex-teaser .icon-headline .dashboard-headline-icon svg { width: 18px; height: 18px; stroke-width: 1.5; } /* generelles Entfernen des background-arrow icons auf .link-list (legacy) */ ul.link-list li a { background-image: none !important; padding-left: 0 !important; } ul.link-list li a:hover { background-image: none !important; } .flex-wrapper.flex-teaser .link-list, .flex-wrapper.flex-teaser ul.link-list { list-style: none; padding: 0; margin: 0; } .flex-wrapper.flex-teaser .link-list li, .flex-wrapper.flex-teaser ul.link-list li { padding: 0; margin: 0; } .flex-wrapper.flex-teaser .link-list li a, .flex-wrapper.flex-teaser ul.link-list li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0 !important; color: var(--text); font-size: 0.85rem; text-decoration: none; border-bottom: 1px solid var(--border-divider); background-image: none !important; background-color: transparent !important; margin: 0 !important; } .flex-wrapper.flex-teaser .link-list li:last-child a, .flex-wrapper.flex-teaser ul.link-list li:last-child a { border-bottom: 0; } .flex-wrapper.flex-teaser .link-list li a:hover, .flex-wrapper.flex-teaser ul.link-list li a:hover { color: var(--accent); background-image: none !important; } .flex-wrapper.flex-teaser .link-list li a::after, .flex-wrapper.flex-teaser ul.link-list li a::after { content: '\203A'; color: var(--text-dim); font-size: 1.1rem; line-height: 1; flex-shrink: 0; } .flex-wrapper.flex-teaser .link-list li a::before, .flex-wrapper.flex-teaser ul.link-list li a::before { content: none !important; } /* --------------------------------------------------------------- 24a. "Nicht das Richtige gefunden?" - Hilfe-Karte am Ende des Customer-Support-Akkordeons (Mascot links, Text mittig, Outline-Button rechts). --------------------------------------------------------------- */ .cs-help-card { display: flex; align-items: center; gap: 22px; padding: 18px 24px; border: 1px solid var(--border-card); border-radius: var(--radius-card); background: var(--bg-card); margin-top: 24px; } .cs-help-card-media { flex: 0 0 auto; width: 132px; height: 84px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cs-help-card-media img { max-width: 100%; max-height: 100%; object-fit: contain; } .cs-help-card-body { flex: 1 1 auto; min-width: 0; } .cs-help-card-title { font-size: 1rem; font-weight: 700; color: var(--accent); margin: 0 0 4px; text-transform: none; letter-spacing: 0; } .cs-help-card-text { margin: 0; color: var(--text); font-size: 0.85rem; line-height: 1.5; opacity: 0.92; } .cs-help-card-cta { flex: 0 0 auto; white-space: nowrap; } .cs-help-secondary { margin-top: 12px; text-align: center; } @media (max-width: 768px) { .cs-help-card { flex-direction: column; text-align: center; gap: 14px; padding: 20px 18px; } .cs-help-card-media { width: 110px; height: 70px; } .cs-help-card-cta { width: 100%; } } /* --------------------------------------------------------------- 24b. Kampagne Hero (.dashboard-image) --------------------------------------------------------------- */ .dashboard-image { border: 1px solid var(--border-card); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 24px; background: var(--bg-card); background-size: cover; background-repeat: no-repeat; } .dashboard-image .dashboard-image-inner { padding: 40px 48px; /* Einheitliches Hero-Format im Haendlerbereich: 1200x320 (3.75:1) - identisch zu Dashboard-Top-Hero und Marken-Modals. Waechst bei mehr Inhalt (Logo + Titel + KPI-Boxen) automatisch ueber das Format hinaus. */ aspect-ratio: 1200 / 320; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; background-position: right center; background-size: cover; background-repeat: no-repeat; } .dashboard-image .dashboard-image-inner::before { content: ''; position: absolute; inset: 0; /* Verlauf links dunkel fuer Text-Lesbarkeit, rechts klar fuer Markenbild. */ background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.10) 70%, rgba(0,0,0,0) 100%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 100%); pointer-events: none; z-index: 0; } .dashboard-image .dashboard-image-inner > * { position: relative; z-index: 1; } /* Text-Stack im Hero links: Logo, Eyebrow, Headline, Subline */ .dashboard-image .dashboard-image-inner .campaign-hero-text { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 55%; margin: 0 0 28px 0; text-align: left; } .dashboard-image .dashboard-image-inner .campaign-hero-text * { text-align: left; } .dashboard-image .dashboard-image-inner .campaign-hero-logo { max-width: 250px !important; height: 100px !important; width: auto !important; margin: 0 0 22px 0 !important; display: block; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55)); } .dashboard-image .dashboard-image-inner .campaign-hero-eyebrow { display: inline-block; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.2; margin: 0 0 14px 0; } .dashboard-image .dashboard-image-inner h1, .dashboard-image .dashboard-image-inner .campaign-hero-title { color: #fff; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; text-align: left; margin: 0 0 12px 0; text-shadow: 0 2px 12px rgba(0,0,0,0.45); } .dashboard-image .dashboard-image-inner .campaign-hero-subline { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 16px; line-height: 1.45; text-align: left; text-shadow: 0 1px 8px rgba(0,0,0,0.55); } @media (max-width: 900px) { /* Einheitlicher Seitenabstand ("innerer Bereich"): .inner steht global auf width:98% -> mobil nur ~4px Rand, Inhalt klebte am Browserrand. Ueberall 16px links/rechts (Referenz: Kampagnen-Seite/Chat). */ .inner { width: calc(100% - 32px) !important; } /* Zurueck-Navigation mobil: Seiten mit eigenem "Zur Startseite"-Submenu zeigen NUR dieses - der generische Layout-Back ("Zurueck", history.back) wird dann versteckt. Auf Seiten ohne Submenu bleibt der Layout-Back. (Wunsch Mobile-Review: "Zur Startseite" statt doppeltem Zurueck.) */ .module .flex-wrapper.submenu.not-mobile { display: flex !important; } body:has(.module .flex-wrapper.submenu.not-mobile) .cs-back-wrap { display: none !important; } /* Content-Karten (box-mobile) bekommen mobil Innenabstand - .box-inner steht global auf padding:0, dadurch klebte der Inhalt am Kartenrand (z.B. Passwort aendern, Mitarbeiter einladen). Checkout-Sektionen behalten ihr eigenes Padding. */ .module .box.box-mobile:not(.checkout-section) > .box-inner { padding: 18px 16px !important; } /* Upload-Dragzones mobil kompakt (gilt ueberall): Icon links, Text rechts daneben, alles linksbuendig - statt 100px-Icon + Zentrierung. */ .drop_zone { text-align: left; padding: 14px 16px; } .upload_link, .multiupload #dropzone .upload_link { display: flex !important; align-items: center; min-height: 40px; padding: 0 0 0 54px !important; margin-bottom: 4px; text-align: left !important; background-position: left center !important; background-size: auto 40px !important; } span.upload-box-text { text-align: left !important; padding-left: 54px; } .dashboard-image .dashboard-image-inner { padding: 28px 24px; /* Keine fixe Mobile-Hoehe: Hoehe ergibt sich aus dem Inhalt (Logo + Titel + KPI-Boxen), Format-Ratio gilt nur als Minimum. */ } .dashboard-image .dashboard-image-inner .campaign-hero-text { max-width: 100%; margin-bottom: 20px; } .dashboard-image .dashboard-image-inner::before { background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.55) 100%); } .dashboard-image .dashboard-image-inner .campaign-hero-logo { max-width: 175px !important; height: 70px !important; margin: 0 0 14px 0 !important; } } .dashboard-image .box, .dashboard-image .box .box-inner { background: rgba(0,0,0,0.6) !important; border: 0 !important; border-radius: 0 !important; padding: 18px 40px !important; } .dashboard-image .box-not-mobile { width: 100%; } .dashboard-image .flex-wrapper.facts { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; } .dashboard-image .flex-wrapper.facts > div { flex: 1 1 0 !important; min-width: 0 !important; border-right: 1px solid var(--accent) !important; padding: 4px 22px !important; box-sizing: border-box !important; } .dashboard-image .flex-wrapper.facts > div:first-child { padding-left: 0 !important; } .dashboard-image .flex-wrapper.facts > div:last-child { border-right: 0 !important; padding-right: 0 !important; } .dashboard-image .flex-wrapper.facts h6 { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; margin: 0 0 4px; font-weight: 700; } .dashboard-image .flex-wrapper.facts h4 { color: #fff; font-size: 0.9rem; margin: 0; font-weight: 600; } /* Zurueck-Link "Zur Startseite" */ a.back { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--border-strong); color: var(--text) !important; background: var(--bg-card); border-radius: var(--radius-chip); text-decoration: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; } a.back:hover { border-color: var(--accent); color: var(--accent) !important; } a.back::before { content: '\2190'; font-size: 1rem; line-height: 1; } /* Produkt-Karten im Kampagnen-Formular. Hinweis zu overflow: Die .box selbst KEIN overflow:hidden, weil der ".box-qty"-Badge (top:-15px right:-15px, siehe stylesheet.css Z. 987) sonst abgeschnitten wird. Die abgerundeten Bildecken stellen wir ueber overflow:hidden + Eck-Radius an .box-image her. */ .module form .outer-box-inner .box { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); overflow: visible; margin: 0; transition: border-color .15s ease; position: relative; } .module form .outer-box-inner .box:hover { border-color: var(--accent); } /* Bild-Bereich rundet die obere Kante korrekt mit der Box-Border zusammen. */ .module form .outer-box-inner .box .box-image { overflow: hidden; border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); } /* Qty-Badge: sicherstellen, dass er ueber Bild + Karten-Border liegt und nicht von der Sticky-Summary verdeckt wird. */ .module form .outer-box-inner .box > .box-qty { z-index: 12; } .module form .outer-box-inner .box .box-inner { background: none; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; } .module form .outer-box-inner .box .box-image { background: #fff !important; position: relative; } /* Slider fuellt die Bildbox randlos (frueher 14px-Inset als weisses Passepartout - stoerte bei echten Produktfotos, s. Kampagnen-Order). WICHTIG: padding der .box-image NICHT anfassen, da das Legacy-CSS "padding-top: 100%" fuer das quadratische Seitenverhaeltnis nutzt. */ .module form .outer-box-inner .box .box-image .product-slider { top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; } .module form .outer-box-inner .box .box-image .product-slider-slide { background-size: contain !important; background-color: #fff; } .module form .outer-box-inner .box .box-content { padding: 14px 16px 16px; background: none; border: 0; } .module form .outer-box-inner .box .box-content h5 { font-size: 0.85rem; margin: 0 0 4px; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; } .module form .outer-box-inner .box .box-content p { color: var(--text-muted); font-size: 0.78rem; margin: 0 0 8px; } .module form .outer-box-inner .box.deactivate { opacity: 0.5; } /* Platz fuer die fixe Sticky-Leiste (#id_summary, 80px) gehoert ans Ende der Seite - nicht unter die Kachelliste: darunter folgt der komplette Checkout, das Polster riss dort ein rund 200px hohes Loch zwischen letzter Kachel und der Ueberschrift "Checkout". */ .module form .outer-box-inner .flex-wrapper.flex-teaser.reorder-teaser { margin-bottom: 32px; } #user-reorder-form { padding-bottom: 104px; /* 80px Summary-Bar + 24px Luft */ } /* Vertikaler Abstand zwischen Kachelreihen erhoehen */ .flex-wrapper.flex-teaser.reorder-teaser .box { margin-bottom: 30px !important; } /* --------------------------------------------------------------- Checkout-Bereich (5 nummerierte Boxen, im Kampagnen-Formular am Ende der Mengen-Eingabe). Markup siehe user-reorder-qty.blade.php ab Block "CHECKOUT-BEREICH". Look & Feel folgt der Plattform - .box.box-mobile > .box-inner liefert bereits die Karten-Optik. Hier wird nur das innere Layout (Grids, Listen, Total-Block) strukturiert. --------------------------------------------------------------- */ .checkout-wrapper { margin-top: 32px; } .checkout-intro { margin: 0 0 18px; } .checkout-title { margin: 0 0 6px; color: var(--text); font-size: 1.6rem; letter-spacing: 0.02em; } .checkout-subline { margin: 0; color: var(--text-muted); font-size: 0.85rem; } /* 60/40-Grid fuer Reihe 1. Wichtig: align-items:stretch auf .checkout-row sorgt dafuer, dass linke und rechte Spalte gleich hoch werden (= Hoehe der laengeren Spalte). Innerhalb der Spalten werden die Sections via flex-direction:column gestapelt. !important + #id_checkout-Praefix erzwingen die Layout-Regeln, falls nachgeladene Stylesheets/Inline-Styles dazwischenfunken. */ #id_checkout.checkout-wrapper .checkout-row, .checkout-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 20px !important; align-items: stretch !important; margin-bottom: 20px !important; width: 100% !important; } #id_checkout.checkout-wrapper .checkout-col-left, #id_checkout.checkout-wrapper .checkout-col-right, .checkout-col-left, .checkout-col-right { display: flex !important; flex-direction: column !important; gap: 20px !important; min-width: 0 !important; float: none !important; } /* Feste 60/40-Aufteilung (basis statt grow, damit Inhalte keinen Mehrbedarf erzeugen koennen). gap wird vom flex container abgezogen. */ #id_checkout.checkout-wrapper .checkout-col-left, .checkout-col-left { flex: 0 0 calc(60% - 10px) !important; max-width: calc(60% - 10px) !important; } #id_checkout.checkout-wrapper .checkout-col-right, .checkout-col-right { flex: 0 0 calc(40% - 10px) !important; max-width: calc(40% - 10px) !important; } /* Sections (= einzelne .box.box-mobile-Karten) untereinander */ .checkout-section { margin-bottom: 20px !important; } /* Linke Spalte: beide Sections in ihrer natuerlichen Hoehe stapeln (NICHT gleichverteilt). */ .checkout-col-left .checkout-section { margin-bottom: 0 !important; flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; float: none !important; } /* Rechte Spalte: die einzelne Section dehnt sich auf die volle Spaltenhoehe (= Hoehe der beiden gestapelten Sections links). */ .checkout-col-right .checkout-section { margin-bottom: 0 !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; float: none !important; } .checkout-col-right .checkout-section > .box-inner { flex: 1 1 auto; display: flex; flex-direction: column; } /* Im rechten Box: Total-Block ans Ende (visuelle Verankerung unten, wenn die Spalte die Hoehe der linken erreicht). */ .checkout-col-right .checkout-section .checkout-total { margin-top: auto; } /* Section-Title mit Step-Badge (rund). Icons wurden entfernt - Badge ersetzt das Icon als visuellen Anker. */ .checkout-section-title { display: flex !important; align-items: center; gap: 10px; margin: 0 0 16px !important; font-size: 1.05rem !important; text-transform: none; font-weight: 700; color: var(--accent) !important; } /* Schrittnummer als runder Badge - aspect-ratio koppelt Hoehe an Breite: immer perfekter KREIS, nie Oval (auch bei 2 Stellen). */ .checkout-section-title .checkout-step { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; aspect-ratio: 1 / 1; padding: 0 4px; border-radius: 50%; box-sizing: border-box; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 1; flex: none; font-family: 'Inter', 'Lato', sans-serif; } /* Adress-Grid in Section 1 */ .checkout-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; } .checkout-address-card { min-width: 0; padding: 14px 16px; border: 1px solid var(--border-card); border-radius: 10px; background: rgba(255, 255, 255, 0.02); } .checkout-address-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .checkout-address-head h5 { margin: 0; font-size: 0.7rem; letter-spacing: 0.06em; font-weight: 700; color: var(--text-muted); text-transform: uppercase; } .checkout-address-head .btn-edit-trigger { display: inline-flex !important; align-items: center; gap: 5px; padding: 4px 10px !important; font-size: 0.65rem !important; background: transparent !important; border: 1px solid var(--border-strong) !important; color: var(--accent) !important; border-radius: var(--radius-chip); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } .checkout-address-head .btn-edit-trigger:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-soft-bg) !important; } .checkout-address-head .btn-edit-trigger svg { width: 12px; height: 12px; } .checkout-address-text { font-style: normal; color: var(--text); font-size: 0.85rem; line-height: 1.55; margin: 0; } /* Konditionen-Liste in Section 2 */ .checkout-conditions { list-style: none; margin: 0; padding: 0; } .checkout-conditions li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-divider); } .checkout-conditions li:last-child { border-bottom: 0; } .checkout-conditions .checkout-cond-icon { color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; } .checkout-conditions .checkout-cond-label { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } .checkout-conditions .checkout-cond-value { color: var(--text); font-size: 0.85rem; font-weight: 600; text-align: right; } /* Bestelluebersicht in Section 3 */ .checkout-summary-list { list-style: none; margin: 0 0 16px; padding: 0; } .checkout-summary-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-divider); } .checkout-summary-list li:last-child { border-bottom: 0; } .checkout-summary-list li span { color: var(--text-muted); font-size: 0.85rem; } .checkout-summary-list li strong { color: var(--text); font-size: 0.95rem; font-weight: 600; } /* Spezialfall Lieferkosten: kann Fliesstext sein (z.B. "Die finalen Lieferkosten werden ..."). Dann nicht fett/rechtsbuendig anzeigen, sondern als Fliesstext (analog zu Adressen) unter dem Label stapeln. */ .checkout-summary-list li:has(#id_ship_totall_td) { flex-direction: column; align-items: flex-start; gap: 4px; } #id_ship_totall_td { color: var(--text); font-size: 0.85rem; font-weight: 400; line-height: 1.55; text-align: left; } /* Gesamt-Netto-Highlight */ .checkout-total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-divider); } .checkout-total-label { color: var(--accent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 6px; } .checkout-total-value { color: var(--accent); font-size: 2.1rem; font-weight: 700; line-height: 1.1; margin-bottom: 4px; } .checkout-total-note { color: var(--text-muted); font-size: 0.75rem; } /* Section 5: AGB-Info-Zeile + Submit */ .checkout-agb-info { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 14px 0; background: var(--bg-elev); border: 1px solid var(--border-divider); border-radius: var(--radius-card-sm); color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; } .checkout-agb-info svg { flex-shrink: 0; color: var(--text-muted); } .checkout-agb-info a { color: var(--accent); text-decoration: none; } .checkout-agb-info a:hover { text-decoration: underline; } .checkout-submit-wrap { text-align: right; margin-top: 8px; } .checkout-submit-wrap input[type="submit"] { font-size: 0.85rem; letter-spacing: 0.06em; padding: 14px 28px; } /* Mobile: Stacking */ @media (max-width: 980px) { #id_checkout.checkout-wrapper .checkout-row, .checkout-row { flex-direction: column !important; } #id_checkout.checkout-wrapper .checkout-col-left, #id_checkout.checkout-wrapper .checkout-col-right, .checkout-col-left, .checkout-col-right { flex: 1 1 100% !important; max-width: 100% !important; } .checkout-address-grid { grid-template-columns: 1fr; } .checkout-total-value { font-size: 1.6rem; } .checkout-submit-wrap { text-align: center; } .checkout-submit-wrap input[type="submit"] { width: 100%; } } /* --------------------------------------------------------------- Mengen-Eingabe-Modal (Kampagne) - Inputs in neutralem Anthrazit (statt grünlichem --bg-elev/--border-card), damit das Modal farblich vom Brand-Akzent entkoppelt ist. --------------------------------------------------------------- */ .modal#id_modal_new input[type="number"], .modal#id_modal_new .qty-value, .modal#id_modal_new .qty-value-wrapper .qty-value { background: #1d1d1d !important; color: #fff !important; border: 1px solid #303030 !important; border-radius: var(--radius-card-sm) !important; min-width: 110px !important; height: 44px; padding: 6px 38px !important; text-align: center !important; -webkit-text-fill-color: #fff !important; /* iOS Safari */ } .modal#id_modal_new .qty-value-wrapper .btn-dec, .modal#id_modal_new .qty-value-wrapper .btn-inc, .modal#id_modal_new .qty-value-wrapper .btn-minus, .modal#id_modal_new .qty-value-wrapper .btn-plus { top: 50% !important; transform: translateY(-50%); filter: brightness(0) invert(1); } /* Readonly-Inputs (predefined Pakete) ebenfalls neutral anthrazit */ .modal#id_modal_new .qty-value[type="number"]:read-only { background: #1d1d1d !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } /* Default-Browser-Spinner (Hoch-/Runter-Pfeile) bei den Mengen-Inputs ausblenden - wir haben eigene Plus/Minus-Buttons links und rechts vom Feld, die nativen Pfeile waeren redundant und stoeren das Layout (siehe Bug-Screenshot: kleine ▲▼ erschienen rechts neben dem "+"). */ .modal#id_modal_new input[type="number"]::-webkit-outer-spin-button, .modal#id_modal_new input[type="number"]::-webkit-inner-spin-button, .modal#id_modal_new .qty-value::-webkit-outer-spin-button, .modal#id_modal_new .qty-value::-webkit-inner-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; } .modal#id_modal_new input[type="number"], .modal#id_modal_new .qty-value { -moz-appearance: textfield !important; appearance: textfield !important; } /* Mobil: Paket-Menge ("Menge eingeben (Pakete)") ueber die volle Breite. Label und Stepper liegen in einem Flex-Wrapper, der auf schmalen Schirmen umbricht - der Stepper landete dann linksbuendig in Zeile zwei und behielt seine Feldbreite, rechts blieben rund 80px leer. Jetzt: Label als eigene Zeile, Eingabe volle Breite, Minus/Plus symmetrisch an den Raendern. */ @media (max-width: 768px) { .modal#id_modal_new .qty-row[data-size="margepacket"] > .flex-wrapper { display: block; width: 100%; } .modal#id_modal_new .qty-row[data-size="margepacket"] h5 { margin: 0 0 8px !important; } .modal#id_modal_new .qty-row[data-size="margepacket"] .qty-value-wrapper { display: block; width: 100%; } .modal#id_modal_new .qty-row[data-size="margepacket"] .qty-value { width: 100% !important; } .modal#id_modal_new .qty-row[data-size="margepacket"] .btn-dec { left: 12px; } .modal#id_modal_new .qty-row[data-size="margepacket"] .btn-inc { right: 12px; } /* Paket-Menge steht FEST unter der Groessenliste: die Zeile wird per JS in den Slot #packet_row_slot ausserhalb des Scrollbereichs verschoben (vorher sticky in der Liste - beim Hochscrollen wanderte sie mit dem Inhalt mit). Die Mengenrechnung liest Container UND Slot. */ .modal#id_modal_new .qty-row[data-size="margepacket"] { margin-top: 6px; padding: 6px 0 2px; background: var(--bg-card, #0d1614); box-shadow: 0 -10px 14px -8px rgba(0, 0, 0, 0.85); } /* Label rechts - schliesst mit Stueckzahl/Wert darunter auf einer Kante ab */ .modal#id_modal_new .qty-row[data-size="margepacket"] h5 { text-align: right; } /* Pflichtangabe: dieselbe Signalfarbe wie die uebrigen Pflichtfelder */ .modal#id_modal_new .qty-row[data-size="margepacket"] .qty-value { border-color: rgba(200, 111, 22, 0.55) !important; background: rgba(217, 122, 30, 0.07) !important; } } /* "Hilfe & Videos"-Button: ruhige, hochwertige Outline-Pille mit Play-Chip (statt lautem, vollflaechig tuerkisem Button). Integriert sich dezent in die dunkle Plattform-Optik. Hinweis: Das Label wird zentral via ::after gesetzt ("Hilfe & Videos"), der urspruengliche Textknoten "Hilfe/Video" im Markup wird per font-size:0 ausgeblendet -> kein Anfassen der ~20 Blade-Views noetig. Das alte Hintergrund-Icon (help.svg) wird durch den ::before-Chip ersetzt. */ .help-video, .help-video2 { display: inline-flex !important; align-items: center; box-sizing: border-box; padding: 8px 18px 8px 8px !important; font-size: 0 !important; font-weight: 600; letter-spacing: 0; text-decoration: none; color: #fff !important; background-color: rgba(13, 22, 20, 0.82) !important; background-image: none !important; border: 1px solid rgba(31, 176, 154, 0.55) !important; border-radius: 999px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(31, 176, 154, 0.08), 0 0 22px rgba(31, 176, 154, 0.20) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .25s ease !important; } /* Floating-Variante: sticky unten RECHTS Ausgeblendet auf Wunsch (2026-07-02). Die Inline-Variante .help-video2 bleibt erhalten, kann also weiterhin innerhalb von Boxen verwendet werden. */ .help-video { display: none !important; position: fixed; right: 22px !important; left: auto !important; bottom: 22px !important; z-index: 50; } /* Inline-Variante (z.B. innerhalb von Boxen) bleibt im Textfluss */ .help-video2 { position: relative; left: auto !important; right: auto !important; bottom: auto !important; } /* Icon-Chip: abgerundetes Quadrat mit tuerkisem Play-Dreieck */ .help-video::before, .help-video2::before { content: ""; flex: 0 0 28px; width: 28px; height: 28px; margin-right: 11px; border-radius: 8px; border: 1px solid rgba(31, 176, 154, 0.65); background-color: rgba(31, 176, 154, 0.10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231fb09a'%3E%3Cpath d='M9 7.5v9l7.5-4.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 54% center; background-size: 13px; } /* Label */ .help-video::after, .help-video2::after { content: "Hilfe & Videos"; font-size: 14px; font-weight: 600; letter-spacing: .01em; line-height: 1; color: #fff; white-space: nowrap; } .help-video:hover, .help-video2:hover { color: #fff !important; background-color: rgba(13, 22, 20, 0.9) !important; border-color: rgba(45, 198, 173, 0.85) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(31, 176, 154, 0.14), 0 0 28px rgba(31, 176, 154, 0.32) !important; } .help-video:hover { transform: translateY(-1px); } .help-video:hover::before, .help-video2:hover::before { border-color: rgba(45, 198, 173, 0.9); background-color: rgba(31, 176, 154, 0.16); } /* Geoeffneter Layer: Chip wird zum Schliessen-Kreuz, Label "Schliessen" */ .help-video.active::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231fb09a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important; background-position: center !important; background-size: 13px !important; } .help-video.active::after { content: "Schließen"; } /* --------------------------------------------------------------- 24c. Checkout (#id_checkout) --------------------------------------------------------------- */ #id_checkout { margin-top: 32px; } #id_checkout > .box-inner { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 32px; } #id_checkout h4 { font-size: 1.2rem; margin: 0 0 18px; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 700; } #id_checkout h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin: 12px 0 14px; } #id_checkout table.summary { width: 100%; border-collapse: collapse; margin: 0 0 14px; } #id_checkout table.summary td { padding: 10px 0; border-bottom: 1px solid var(--border-divider); color: var(--text); vertical-align: top; font-size: 0.9rem; } #id_checkout table.summary tr:last-child td { border-bottom: 0; } #id_checkout table.summary td:first-child { color: var(--text-muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; width: 38%; font-weight: 700; } #id_checkout .form-submit { margin-top: 24px; text-align: right; } #id_checkout .form-submit input[type="submit"] { background: var(--btn-bg); color: #fff !important; border: 0; border-radius: var(--radius-btn); padding: 14px 28px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; cursor: pointer; width: auto; } #id_checkout .form-submit input[type="submit"]:hover { background: var(--btn-bg-hover); } /* Sticky-Leiste unten (#id_summary) Bleibt fix am unteren Bildschirmrand, ohne Abstand, ohne Rundung. */ #id_summary { background: var(--bg-card) !important; border: 0 !important; border-top: 1px solid var(--border-card) !important; border-radius: 0 !important; padding: 14px 24px !important; margin: 0 !important; color: var(--text); box-shadow: 0 -6px 18px rgba(0,0,0,0.45); /* Muss ueber #id_sell_locations_box (z-index 1000) liegen, sonst ragen die Standort-Feature-Icons beim Scrollen in die fixe Bar hinein. */ z-index: 1001; } #id_summary .summary-left { color: var(--text-muted); } #id_summary .summary-left span { color: var(--text); font-weight: 700; } #id_summary .summary-right .btn { padding: 12px 24px !important; font-size: 0.85rem !important; } /* --------------------------------------------------------------- 24d. Auftraege Seite (orders.blade.php) --------------------------------------------------------------- */ /* Filter-Form als Pill-Bar */ .module .content-header-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; } .module .content-header-actions .filter-group { margin: 0; } .module .content-header-actions .filter-group select, .module .content-header-actions .filter-group input[type="text"] { background-color: var(--bg-card) !important; border: 1px solid var(--border-card) !important; color: var(--text) !important; padding: 10px 16px !important; border-radius: var(--radius-chip) !important; min-width: 160px; min-height: 42px; box-sizing: border-box; } /* Dropdown-Pfeil fuer Filter-Selects. Hintergrund: das globale select{ background-image: } (Z. 382) wird durch das oben gesetzte `background-color` korrekt erhalten - wir setzen den Pfeil dennoch explizit, weil frueher das `background:`- Shorthand das Pfeil-SVG ueberschrieb. Plus: padding-right verbreitert den Klick-/Anzeige-Bereich rechts, damit der Pfeil nicht hinter dem Auswahl-Text liegt. */ .module .content-header-actions .filter-group select { -webkit-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 38px !important; } .module .content-header-actions .filter-group input.search { min-width: 220px; padding-left: 38px !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: 14px center !important; } /* "Neue Anfrage"-Button auf /customersupport - sitzt direkt rechts neben der Suche im selben Filter-Flex-Wrapper. flex-shrink: 0 verhindert, dass der Button bei knappem Platz zusammengequetscht wird. */ .module .content-header-actions .filter-group-cs-new-request { flex: 0 0 auto; } .btn.btn-cs-new-request { min-height: 42px; padding: 10px 18px !important; font-size: 0.8rem !important; letter-spacing: 0.06em !important; gap: 8px; white-space: nowrap; } .btn.btn-cs-new-request svg { width: 14px; height: 14px; flex-shrink: 0; } @media (max-width: 768px) { .module .content-header-actions .filter-group-cs-new-request { width: 100%; flex: 1 1 100%; } .btn.btn-cs-new-request { width: 100%; justify-content: center; } } .module .radio-checkbox-wrapper { margin: 0; } .module .radio-checkbox-wrapper label { display: inline-flex; align-items: center; gap: 0; /* Padding so gewaehlt, dass das Label im Filter-Kontext exakt die selbe Hoehe (42px) wie die