/* ========================================================= ZEUS V255 · FINAL MOBILE RESPONSIVE Zusammengeführt aus V243–V254 ========================================================= */ /* ========================================================= SOURCE: v243-mobile-global.css ========================================================= */ /* ========================================================= ZEUS V243 · GLOBAL MOBILE RESPONSIVE Gesamte Webseite ========================================================= */ /* ========================================================= GRUNDREGELN ========================================================= */ html{ width:100%; max-width:100%; overflow-x:hidden; } body{ width:100%; max-width:100%; overflow-x:hidden; } *, *::before, *::after{ box-sizing:border-box; } img, svg, video, canvas{ max-width:100%; height:auto; } input, select, textarea, button{ max-width:100%; } table{ max-width:100%; } /* Lange IDs / Firmennamen / Produktnamen */ code, pre, .break-word, .contract-id, .trade-id{ overflow-wrap:anywhere; word-break:break-word; } /* ========================================================= TABLET ========================================================= */ @media(max-width:1024px){ /* Grundbreiten */ .wrap, .page-section, main, .main-content{ width:100%!important; max-width:100%!important; } /* Zweispaltige Bereiche */ .trade-form-layout, .v66-detail-grid, .dashboard-grid, .content-grid, .two-column, .two-col{ grid-template-columns:minmax(0,1fr)!important; } /* Cards */ .command-panel, .v66-detail-card, .contract-card, .match-card-pro{ min-width:0!important; max-width:100%!important; } /* Handelsdetail */ .v66-detail-grid{ gap:16px!important; } /* Markt-Tabs */ .market-tabs{ overflow-x:auto!important; flex-wrap:nowrap!important; scrollbar-width:thin!important; padding-bottom:6px!important; } .market-tabs a{ flex:0 0 auto!important; white-space:nowrap!important; } /* Tabellen horizontal scrollbar statt Abschneiden */ .table-wrap, .data-table-wrap, .responsive-table{ width:100%!important; overflow-x:auto!important; } } /* ========================================================= MOBILE BIS 768 PX ========================================================= */ @media(max-width:768px){ html{ font-size:15px; } /* ===================================================== SEITENRÄNDER ===================================================== */ .wrap, .page-section{ width:100%!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; padding-left:10px!important; padding-right:10px!important; } /* ===================================================== HEADER / NAVIGATION ===================================================== */ header, .site-header, .topbar, .main-header{ max-width:100%!important; } .nav, .navbar, .main-nav, .header-actions{ min-width:0!important; } /* Navigationsbereiche scrollbar */ .market-tabs, .tabs, .tabbar{ display:flex!important; width:100%!important; overflow-x:auto!important; overflow-y:hidden!important; flex-wrap:nowrap!important; gap:6px!important; scrollbar-width:thin!important; -webkit-overflow-scrolling:touch; } .market-tabs a, .tabs a, .tabbar a, .tabs button{ flex:0 0 auto!important; min-height:42px!important; padding:8px 11px!important; white-space:nowrap!important; } /* ===================================================== SEITENÜBERSCHRIFTEN ===================================================== */ .page-heading{ display:block!important; } .page-heading-main, .page-heading-side{ width:100%!important; max-width:none!important; } .page-heading-side{ margin-top:12px!important; } .page-heading h1, .page-title, main h1{ font-size:clamp(1.55rem,7vw,2rem)!important; line-height:1.12!important; overflow-wrap:anywhere!important; } h2{ overflow-wrap:anywhere!important; } /* ===================================================== ALLGEMEINE KARTEN ===================================================== */ .command-panel, .card, .panel, .v66-detail-card, .contract-card, .match-card-pro{ width:100%!important; max-width:none!important; min-width:0!important; border-radius:14px!important; } /* ===================================================== BUTTONS ===================================================== */ button, .btn, a.btn{ min-height:44px; } .button-row, .actions, .card-actions{ flex-wrap:wrap!important; } /* ===================================================== FORMULARE ALLGEMEIN ===================================================== */ form{ max-width:100%; } .form-grid, .dialog-grid, .edit-grid, .trade-form-grid{ grid-template-columns:1fr!important; } label{ min-width:0!important; } input, select, textarea{ width:100%; min-width:0; font-size:16px!important; } /* * 16px verhindert auf iPhones den automatischen * Browser-Zoom beim Anklicken eines Eingabefeldes. */ input, select, textarea{ font-size:16px!important; } textarea{ resize:vertical; } /* ===================================================== HANDEL ERSTELLEN ===================================================== */ .trade-form-layout{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:12px!important; } .trade-form{ width:100%!important; max-width:none!important; } .trade-form .form-grid, #trade-form .form-grid{ grid-template-columns:1fr!important; } .edit-cities{ width:100%!important; overflow-x:hidden!important; } /* ===================================================== HANDELSDETAIL ===================================================== */ .v66-detail-grid{ display:flex!important; flex-direction:column!important; width:100%!important; max-width:none!important; gap:12px!important; } .v66-stack, .v66-detail-grid > aside{ width:100%!important; max-width:none!important; } .v66-product-visual{ width:100%!important; min-height:200px!important; max-height:300px!important; border-radius:14px!important; } .v66-product-visual img{ width:100%!important; height:100%!important; object-fit:contain!important; } .v66-detail-card{ padding:14px!important; } .v66-detail-card h1{ font-size:1.55rem!important; } .v66-detail-price{ font-size:1.75rem!important; } .v66-detail-meta{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; } .v66-detail-meta > div{ min-width:0!important; padding:10px!important; } .v66-city-grid{ grid-template-columns:1fr!important; } .v66-city-card{ width:100%!important; min-width:0!important; } .v66-profile-card{ width:100%!important; grid-template-columns: 48px minmax(0,1fr)!important; } .v66-profile-avatar{ width:48px!important; height:48px!important; } /* Detail-Buttons */ .v66-detail-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } .v66-detail-actions > *{ width:100%!important; min-width:0!important; min-height:46px!important; padding:9px!important; white-space:normal!important; text-align:center!important; } /* Hauptaktion über gesamte Breite */ .v66-detail-actions #v66-interest{ grid-column:1 / -1!important; } /* ===================================================== HANDELSANFRAGE / GEGENANGEBOT ===================================================== */ form.trade-dialog-shell, form.trade-dialog-shell[data-v234="1"]{ width:calc(100vw - 8px)!important; max-width:none!important; margin:4px auto!important; padding:8px 9px 12px!important; max-height:calc(100dvh - 8px)!important; border-radius:14px!important; } form.trade-dialog-shell .dialog-head h1, form.trade-dialog-shell .dialog-head h2{ padding-left:45px!important; padding-right:45px!important; font-size:1.35rem!important; } form.trade-dialog-shell button.dialog-close{ width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important; } form.trade-dialog-shell .zeus-v686857-top{ width:100%!important; max-width:none!important; padding:11px!important; } form.trade-dialog-shell .zeus-v686857-top-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; } form.trade-dialog-shell .zeus-v686857-top-grid > *{ min-width:0!important; } form.trade-dialog-shell .zeus-v686833-left{ width:100%!important; max-width:none!important; } form.trade-dialog-shell [data-zeus-v686833-card="trade"], form.trade-dialog-shell [data-zeus-v686833-card="contact"]{ width:100%!important; max-width:none!important; padding:13px!important; } form.trade-dialog-shell .zeus-v686826-qtybox{ grid-template-columns:1fr!important; gap:7px!important; } form.trade-dialog-shell .zeus-v686826-qtytitle{ grid-column:1!important; } form.trade-dialog-shell #rq-amount{ width:100%!important; min-height:48px!important; } form.trade-dialog-shell .zeus-v686857-price-stats{ grid-template-columns:1fr!important; } form.trade-dialog-shell [data-zeus-v686857-price-input]{ width:100%!important; min-height:48px!important; } form.trade-dialog-shell [data-zeus-v686833-card="contact"] input, form.trade-dialog-shell [data-zeus-v686833-card="contact"] textarea{ width:100%!important; } /* Formular-Buttons */ form.trade-dialog-shell .zeus-v686833-actions, form.trade-dialog-shell .zeus-v686857-actions, form.trade-dialog-shell .dialog-actions{ position:static!important; display:grid!important; grid-template-columns:1fr!important; gap:8px!important; width:100%!important; padding-top:10px!important; } /* ===================================================== DASHBOARD ===================================================== */ .v81-shell{ width:100%!important; max-width:none!important; margin:10px auto 30px!important; padding-left:8px!important; padding-right:8px!important; } .v81-hero{ grid-template-columns:1fr!important; gap:12px!important; padding:16px!important; } .v81-hero h1{ font-size:clamp(1.7rem,8vw,2.3rem)!important; } .v81-profile{ grid-template-columns: 48px minmax(0,1fr)!important; } .v81-avatar{ width:48px!important; height:48px!important; } .v81-kpis{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; } .v81-kpis article{ min-width:0!important; min-height:72px!important; padding:10px!important; } .v81-quick-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; } .v81-quick-actions a{ width:100%!important; min-width:0!important; } /* ===================================================== ZEUS MATCH ===================================================== */ .v132-match-toolbar{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:8px!important; } .v132-match-filters{ width:100%!important; overflow-x:auto!important; flex-wrap:nowrap!important; padding-bottom:4px!important; } .v132-match-filters button{ flex:0 0 auto!important; } .v132-match-count{ width:100%!important; text-align:left!important; } .v132-match-list{ grid-template-columns:1fr!important; } .match-card-pro{ width:100%!important; } .match-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; } /* ===================================================== VERTRÄGE ===================================================== */ .contract-card{ width:100%!important; padding:13px!important; } .contract-card-head{ gap:10px!important; } .contract-data{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; } .contract-footer{ flex-direction:column!important; align-items:stretch!important; gap:8px!important; } .contract-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; width:100%!important; } /* ===================================================== INBOX ===================================================== */ .v66-inbox-card{ width:100%!important; padding:12px!important; } .v66-inbox-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; } .v66-inbox-actions > *{ min-width:0!important; width:100%!important; } /* ===================================================== SEITLICHER HANDELSCHAT ===================================================== */ #v67-chat-drawer{ width:min(100vw,430px)!important; max-width:100vw!important; } #v67-chat-drawer.open, #v67-chat-drawer.is-open{ width:100vw!important; } #v67-chat-drawer input, #v67-chat-drawer textarea{ font-size:16px!important; } /* ===================================================== TABELLEN ===================================================== */ table{ font-size:.85rem!important; } .table-wrap, .data-table-wrap{ width:100%!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch; } /* ===================================================== MODALS / DIALOGE ===================================================== */ dialog, [role="dialog"], .modal{ max-width:calc(100vw - 8px)!important; } } /* ========================================================= KLEINE HANDYS BIS 480 PX ========================================================= */ @media(max-width:480px){ html{ font-size:14px; } .wrap, .page-section{ padding-left:7px!important; padding-right:7px!important; } /* Dashboard */ .v81-kpis, .v81-quick-actions{ grid-template-columns:1fr!important; } /* Handelsdetail */ .v66-detail-meta, .v66-detail-actions{ grid-template-columns:1fr!important; } .v66-detail-actions #v66-interest{ grid-column:1!important; } /* Top Handelsanfrage */ form.trade-dialog-shell .zeus-v686857-top-grid{ grid-template-columns:1fr!important; } /* Verträge */ .contract-data, .contract-actions{ grid-template-columns:1fr!important; } /* Inbox */ .v66-inbox-actions{ grid-template-columns:1fr!important; } /* Match */ .match-actions{ grid-template-columns:1fr!important; } /* Buttons generell */ .button-row > *, .actions > *{ width:100%!important; } } /* ========================================================= SEHR KLEINE HANDYS ========================================================= */ @media(max-width:360px){ .wrap, .page-section{ padding-left:5px!important; padding-right:5px!important; } form.trade-dialog-shell, form.trade-dialog-shell[data-v234="1"]{ width:calc(100vw - 4px)!important; } .market-tabs a{ padding-left:8px!important; padding-right:8px!important; } } /* ========================================================= TOUCH-GERÄTE ========================================================= */ @media(hover:none) and (pointer:coarse){ button, .btn, a.btn, select{ min-height:44px; } input[type="checkbox"], input[type="radio"]{ min-width:20px; min-height:20px; } /* Hover-Bewegungen auf Touch deaktivieren */ .match-card-pro:hover{ transform:none!important; } } /* ========================================================= LANDSCAPE HANDY ========================================================= */ @media( max-width:900px ) and ( orientation:landscape ){ form.trade-dialog-shell{ max-height:calc(100dvh - 4px)!important; } .v66-product-visual{ max-height:220px!important; } } /* ========================================================= ZEUS V244 · GLOBAL MOBILE FEINSCHLIFF ========================================================= */ @media(max-width:768px){ /* ------------------------------------------------------- ALLES DARF SCHRUMPFEN ------------------------------------------------------- */ body *{ min-width:0; } main, section, article, aside, form, fieldset{ max-width:100%; } /* ------------------------------------------------------- GENERISCHE GRIDS ------------------------------------------------------- */ .grid, .cards-grid, .card-grid, .market-grid, .offers-grid, .products-grid, .product-grid, .company-grid, .companies-grid, .trader-grid, .traders-grid, .profile-grid, .admin-grid, .settings-grid, .inbox-grid, .delivery-grid, .contract-grid{ grid-template-columns:1fr!important; width:100%!important; } /* ------------------------------------------------------- FLEX-BEREICHE ------------------------------------------------------- */ .toolbar, .filter-bar, .filters, .search-bar, .page-actions{ max-width:100%!important; flex-wrap:wrap!important; gap:8px!important; } .toolbar input, .toolbar select, .filter-bar input, .filter-bar select, .search-bar input{ flex:1 1 100%!important; width:100%!important; } /* ------------------------------------------------------- MARKT / ANGEBOTE ------------------------------------------------------- */ .market-card, .trade-card, .offer-card, .product-card{ width:100%!important; max-width:none!important; min-width:0!important; } .market-card-actions, .trade-card-actions, .offer-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; width:100%!important; } .market-card-actions > *, .trade-card-actions > *, .offer-actions > *{ width:100%!important; min-width:0!important; } /* ------------------------------------------------------- FORMULARE ------------------------------------------------------- */ .form-row, .form-group-row, .field-row, .input-row{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:9px!important; } form label{ width:100%!important; max-width:none!important; } form input, form select, form textarea{ width:100%!important; max-width:none!important; min-width:0!important; } /* ------------------------------------------------------- DIALOGE / MODALS ------------------------------------------------------- */ dialog, .modal, .dialog, [role="dialog"]{ width:calc(100vw - 8px)!important; max-width:calc(100vw - 8px)!important; max-height:calc(100dvh - 8px)!important; } .modal-content, .dialog-content, .modal-body, .dialog-body{ max-width:100%!important; overflow-x:hidden!important; } /* ------------------------------------------------------- TABELLEN ------------------------------------------------------- */ table{ white-space:nowrap; } .table-wrap, .data-table-wrap, .responsive-table, .admin-table-wrap{ width:100%!important; max-width:100%!important; overflow-x:auto!important; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; } /* ------------------------------------------------------- LANGE TEXTE / IDs ------------------------------------------------------- */ p, span, strong, small, a, code{ overflow-wrap:anywhere; } /* ------------------------------------------------------- BILDER ------------------------------------------------------- */ figure, .image-wrap, .product-image, .trade-image{ width:100%!important; max-width:100%!important; } figure img, .image-wrap img, .product-image img, .trade-image img{ width:100%!important; height:auto!important; object-fit:contain!important; } /* ------------------------------------------------------- FOOTER ------------------------------------------------------- */ footer, .site-footer{ width:100%!important; max-width:100%!important; } .footer-grid, .footer-links{ grid-template-columns:1fr!important; } /* ------------------------------------------------------- FIXED / STICKY ELEMENTE ------------------------------------------------------- */ .floating-actions, .floating-buttons{ right:8px!important; bottom:8px!important; max-width:calc(100vw - 16px)!important; } /* ------------------------------------------------------- TOUCH ------------------------------------------------------- */ button, a.btn, .btn, select{ min-height:44px!important; } button, .btn, a.btn{ touch-action:manipulation; } /* ------------------------------------------------------- KEIN SEITLICHES RAUSRAGEN ------------------------------------------------------- */ .page-section > *, .wrap > *{ max-width:100%; } } /* ========================================================= SEHR SCHMALE HANDYS ========================================================= */ @media(max-width:400px){ .market-card-actions, .trade-card-actions, .offer-actions{ grid-template-columns:1fr!important; } .page-heading h1, main h1{ font-size:1.55rem!important; } .page-heading h2, main h2{ font-size:1.25rem!important; } button, .btn, a.btn{ white-space:normal!important; } } /* ========================================================= SAFE AREA · iPHONE ========================================================= */ @supports(padding:max(0px)){ @media(max-width:768px){ body{ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); } .site-header, .main-header{ padding-top:env(safe-area-inset-top); } } } /* ========================================================= ZEUS V244 · GLOBAL MOBILE FEINSCHLIFF ========================================================= */ @media(max-width:768px){ /* ------------------------------------------------------- ALLES DARF SCHRUMPFEN ------------------------------------------------------- */ body *{ min-width:0; } main, section, article, aside, form, fieldset{ max-width:100%; } /* ------------------------------------------------------- GENERISCHE GRIDS ------------------------------------------------------- */ .grid, .cards-grid, .card-grid, .market-grid, .offers-grid, .products-grid, .product-grid, .company-grid, .companies-grid, .trader-grid, .traders-grid, .profile-grid, .admin-grid, .settings-grid, .inbox-grid, .delivery-grid, .contract-grid{ grid-template-columns:1fr!important; width:100%!important; } /* ------------------------------------------------------- FLEX-BEREICHE ------------------------------------------------------- */ .toolbar, .filter-bar, .filters, .search-bar, .page-actions{ max-width:100%!important; flex-wrap:wrap!important; gap:8px!important; } .toolbar input, .toolbar select, .filter-bar input, .filter-bar select, .search-bar input{ flex:1 1 100%!important; width:100%!important; } /* ------------------------------------------------------- MARKT / ANGEBOTE ------------------------------------------------------- */ .market-card, .trade-card, .offer-card, .product-card{ width:100%!important; max-width:none!important; min-width:0!important; } .market-card-actions, .trade-card-actions, .offer-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; width:100%!important; } .market-card-actions > *, .trade-card-actions > *, .offer-actions > *{ width:100%!important; min-width:0!important; } /* ------------------------------------------------------- FORMULARE ------------------------------------------------------- */ .form-row, .form-group-row, .field-row, .input-row{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:9px!important; } form label{ width:100%!important; max-width:none!important; } form input, form select, form textarea{ width:100%!important; max-width:none!important; min-width:0!important; } /* ------------------------------------------------------- DIALOGE / MODALS ------------------------------------------------------- */ dialog, .modal, .dialog, [role="dialog"]{ width:calc(100vw - 8px)!important; max-width:calc(100vw - 8px)!important; max-height:calc(100dvh - 8px)!important; } .modal-content, .dialog-content, .modal-body, .dialog-body{ max-width:100%!important; overflow-x:hidden!important; } /* ------------------------------------------------------- TABELLEN ------------------------------------------------------- */ table{ white-space:nowrap; } .table-wrap, .data-table-wrap, .responsive-table, .admin-table-wrap{ width:100%!important; max-width:100%!important; overflow-x:auto!important; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; } /* ------------------------------------------------------- LANGE TEXTE / IDs ------------------------------------------------------- */ p, span, strong, small, a, code{ overflow-wrap:anywhere; } /* ------------------------------------------------------- BILDER ------------------------------------------------------- */ figure, .image-wrap, .product-image, .trade-image{ width:100%!important; max-width:100%!important; } figure img, .image-wrap img, .product-image img, .trade-image img{ width:100%!important; height:auto!important; object-fit:contain!important; } /* ------------------------------------------------------- FOOTER ------------------------------------------------------- */ footer, .site-footer{ width:100%!important; max-width:100%!important; } .footer-grid, .footer-links{ grid-template-columns:1fr!important; } /* ------------------------------------------------------- FIXED / STICKY ELEMENTE ------------------------------------------------------- */ .floating-actions, .floating-buttons{ right:8px!important; bottom:8px!important; max-width:calc(100vw - 16px)!important; } /* ------------------------------------------------------- TOUCH ------------------------------------------------------- */ button, a.btn, .btn, select{ min-height:44px!important; } button, .btn, a.btn{ touch-action:manipulation; } /* ------------------------------------------------------- KEIN SEITLICHES RAUSRAGEN ------------------------------------------------------- */ .page-section > *, .wrap > *{ max-width:100%; } } /* ========================================================= SEHR SCHMALE HANDYS ========================================================= */ @media(max-width:400px){ .market-card-actions, .trade-card-actions, .offer-actions{ grid-template-columns:1fr!important; } .page-heading h1, main h1{ font-size:1.55rem!important; } .page-heading h2, main h2{ font-size:1.25rem!important; } button, .btn, a.btn{ white-space:normal!important; } } /* ========================================================= SAFE AREA · iPHONE ========================================================= */ @supports(padding:max(0px)){ @media(max-width:768px){ body{ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); } .site-header, .main-header{ padding-top:env(safe-area-inset-top); } } } /* ========================================================= SOURCE: v245-mobile-navigation.css ========================================================= */ /* ========================================================= ZEUS V245 · MOBILE NAVIGATION ========================================================= */ .zeus-mobile-menu-button{ display:none; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:768px){ /* Header */ header, .site-header, .main-header{ position:relative!important; width:100%!important; max-width:100%!important; min-width:0!important; } /* Menübutton */ .zeus-mobile-menu-button{ display:flex!important; align-items:center!important; justify-content:center!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; margin:0!important; padding:0!important; border-radius:11px!important; font-size:22px!important; line-height:1!important; cursor:pointer!important; z-index:1002!important; } /* Navigation standardmäßig geschlossen */ .zeus-mobile-main-nav{ display:none!important; position:absolute!important; top:calc(100% + 6px)!important; left:8px!important; right:8px!important; width:auto!important; max-width:none!important; margin:0!important; padding:10px!important; z-index:1001!important; border-radius:14px!important; max-height:calc(100dvh - 90px)!important; overflow-y:auto!important; overflow-x:hidden!important; box-shadow: 0 18px 45px rgba(0,0,0,.38)!important; } /* geöffnet */ .zeus-mobile-main-nav.is-mobile-open{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:5px!important; } /* Links untereinander */ .zeus-mobile-main-nav > a, .zeus-mobile-main-nav > button, .zeus-mobile-main-nav li > a, .zeus-mobile-main-nav li > button{ width:100%!important; min-width:0!important; min-height:44px!important; display:flex!important; align-items:center!important; padding:9px 12px!important; white-space:normal!important; text-align:left!important; border-radius:9px!important; } .zeus-mobile-main-nav ul{ display:flex!important; flex-direction:column!important; width:100%!important; margin:0!important; padding:0!important; gap:4px!important; list-style:none!important; } .zeus-mobile-main-nav li{ width:100%!important; max-width:none!important; } /* Header-Aktionen dürfen nicht aus dem Bildschirm */ .header-actions{ min-width:0!important; max-width:100%!important; gap:6px!important; } /* Markt-Tabs bleiben separat horizontal scrollbar */ .market-tabs{ display:flex!important; overflow-x:auto!important; overflow-y:hidden!important; flex-wrap:nowrap!important; max-width:100%!important; -webkit-overflow-scrolling:touch; } } /* ========================================================= SEHR KLEINE HANDYS ========================================================= */ @media(max-width:420px){ .zeus-mobile-main-nav{ left:5px!important; right:5px!important; padding:8px!important; } .zeus-mobile-menu-button{ width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; } } /* ========================================================= SOURCE: v246-mobile-dashboard.css ========================================================= */ /* ========================================================= ZEUS V246 · MOBILE DASHBOARD / STARTSEITE ========================================================= */ /* Nur Tablet + Mobil */ @media(max-width:768px){ /* ======================================================= HAUPTBEREICH ======================================================= */ .v81-shell, .dashboard-shell, .dashboard, .home-shell{ width:100%!important; max-width:none!important; margin:8px auto 28px!important; padding-left:8px!important; padding-right:8px!important; } /* ======================================================= HERO / PROFIL ======================================================= */ .v81-hero, .dashboard-hero, .home-hero{ display:grid!important; grid-template-columns:1fr!important; gap:12px!important; width:100%!important; padding:15px!important; border-radius:16px!important; } .v81-hero h1, .dashboard-hero h1, .home-hero h1{ margin:0!important; font-size:clamp(1.65rem,7vw,2.15rem)!important; line-height:1.1!important; overflow-wrap:anywhere!important; } .v81-hero p, .dashboard-hero p, .home-hero p{ margin-top:6px!important; margin-bottom:0!important; line-height:1.45!important; } /* Profil */ .v81-profile, .dashboard-profile, .profile-summary{ display:grid!important; grid-template-columns: 52px minmax(0,1fr)!important; gap:10px!important; align-items:center!important; width:100%!important; padding:11px!important; border-radius:13px!important; } .v81-avatar, .dashboard-avatar, .profile-avatar{ width:52px!important; height:52px!important; min-width:52px!important; min-height:52px!important; border-radius:50%!important; object-fit:cover!important; } .v81-profile strong, .dashboard-profile strong, .profile-summary strong{ display:block!important; overflow-wrap:anywhere!important; } /* ======================================================= KPI KARTEN ======================================================= */ .v81-kpis, .dashboard-kpis, .stats-grid, .kpi-grid{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:8px!important; width:100%!important; } .v81-kpis article, .dashboard-kpis > *, .stats-grid > *, .kpi-grid > *{ min-width:0!important; min-height:82px!important; padding:11px!important; border-radius:13px!important; } .v81-kpis strong, .dashboard-kpis strong, .stats-grid strong, .kpi-grid strong{ display:block!important; margin-top:4px!important; font-size:1.12rem!important; overflow-wrap:anywhere!important; } .v81-kpis small, .dashboard-kpis small, .stats-grid small, .kpi-grid small{ display:block!important; line-height:1.25!important; } /* ======================================================= SCHNELLAKTIONEN ======================================================= */ .v81-quick-actions, .dashboard-actions, .quick-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:8px!important; width:100%!important; } .v81-quick-actions > *, .dashboard-actions > *, .quick-actions > *{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; min-height:50px!important; padding:9px 10px!important; text-align:center!important; white-space:normal!important; border-radius:11px!important; } /* ======================================================= DASHBOARD BEREICHE ======================================================= */ .dashboard-grid, .home-grid, .overview-grid{ display:grid!important; grid-template-columns:1fr!important; gap:12px!important; width:100%!important; } .dashboard-card, .home-card, .overview-card, .command-panel{ width:100%!important; max-width:none!important; min-width:0!important; padding:14px!important; border-radius:15px!important; } /* Kartenüberschrift */ .dashboard-card h2, .home-card h2, .overview-card h2, .command-panel h2{ margin-top:0!important; font-size:1.18rem!important; line-height:1.2!important; } /* ======================================================= MARKT / HANDEL AUF STARTSEITE ======================================================= */ .market-grid, .trade-grid, .offers-grid, .recent-trades{ display:grid!important; grid-template-columns:1fr!important; gap:9px!important; width:100%!important; } .market-card, .trade-card, .offer-card, .recent-trade-card{ width:100%!important; max-width:none!important; min-width:0!important; padding:12px!important; border-radius:13px!important; } .market-card h3, .trade-card h3, .offer-card h3{ overflow-wrap:anywhere!important; font-size:1.05rem!important; } /* ======================================================= PRODUKT / HANDELSWERTE ======================================================= */ .trade-meta, .market-meta, .offer-meta, .product-meta{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } .trade-meta > *, .market-meta > *, .offer-meta > *, .product-meta > *{ min-width:0!important; padding:8px!important; border-radius:9px!important; } /* ======================================================= FILTER / SUCHE ======================================================= */ .dashboard-toolbar, .market-toolbar, .filter-toolbar{ display:grid!important; grid-template-columns:1fr!important; gap:8px!important; width:100%!important; } .dashboard-toolbar input, .dashboard-toolbar select, .market-toolbar input, .market-toolbar select, .filter-toolbar input, .filter-toolbar select{ width:100%!important; min-width:0!important; min-height:46px!important; font-size:16px!important; } /* ======================================================= LISTEN ======================================================= */ .dashboard-list, .activity-list, .notification-list, .trade-list{ width:100%!important; margin:0!important; padding:0!important; } .dashboard-list > *, .activity-list > *, .notification-list > *, .trade-list > *{ width:100%!important; min-width:0!important; margin-bottom:8px!important; padding:11px!important; border-radius:11px!important; } /* ======================================================= BADGES / STATUS ======================================================= */ .badge, .status-badge, .pill{ max-width:100%!important; white-space:normal!important; text-align:center!important; } /* ======================================================= SCROLLBEREICHE ======================================================= */ .horizontal-scroll, .card-scroll, .carousel{ max-width:100%!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch; } /* ======================================================= MOBILE ABSTÄNDE ======================================================= */ .v81-shell section, .dashboard-shell section, .home-shell section{ margin-bottom:12px!important; } } /* ========================================================= KLEINE HANDYS ========================================================= */ @media(max-width:430px){ .v81-shell, .dashboard-shell, .home-shell{ padding-left:5px!important; padding-right:5px!important; } .v81-hero, .dashboard-hero, .home-hero{ padding:12px!important; } /* KPIs komplett untereinander */ .v81-kpis, .dashboard-kpis, .stats-grid, .kpi-grid{ grid-template-columns:1fr!important; } /* Schnellaktionen untereinander */ .v81-quick-actions, .dashboard-actions, .quick-actions{ grid-template-columns:1fr!important; } .trade-meta, .market-meta, .offer-meta, .product-meta{ grid-template-columns:1fr!important; } } /* ========================================================= SOURCE: v247-mobile-market.css ========================================================= */ /* ========================================================= ZEUS V247 · MOBILE MARKT Markt · Handelsposts · Filter · Match ========================================================= */ @media(max-width:768px){ /* ======================================================= MARKT-SEITE ======================================================= */ .market, .market-page, .market-shell, .market-content{ width:100%!important; max-width:none!important; min-width:0!important; } /* ======================================================= MARKT-NAVIGATION / TABS ======================================================= */ .market-tabs, .market-nav, .trade-tabs{ display:flex!important; width:100%!important; flex-wrap:nowrap!important; gap:6px!important; overflow-x:auto!important; overflow-y:hidden!important; padding: 3px 2px 7px!important; scrollbar-width:thin!important; -webkit-overflow-scrolling:touch; } .market-tabs > *, .market-nav > *, .trade-tabs > *{ flex:0 0 auto!important; min-width:max-content!important; min-height:42px!important; padding: 8px 11px!important; white-space:nowrap!important; } /* ======================================================= SUCHE / FILTER ======================================================= */ .market-toolbar, .market-filter, .market-filters, .trade-filter, .trade-filters, .filter-bar, .filter-toolbar{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:8px!important; margin-bottom:11px!important; } .market-toolbar input, .market-toolbar select, .market-filter input, .market-filter select, .market-filters input, .market-filters select, .trade-filter input, .trade-filter select, .trade-filters input, .trade-filters select, .filter-bar input, .filter-bar select, .filter-toolbar input, .filter-toolbar select{ width:100%!important; max-width:none!important; min-width:0!important; min-height:46px!important; font-size:16px!important; } /* Filter-Buttons */ .market-filter-actions, .filter-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } .market-filter-actions > *, .filter-actions > *{ width:100%!important; min-width:0!important; } /* ======================================================= HANDELSPOST-LISTE ======================================================= */ .market-grid, .trade-grid, .trade-list, .offers-grid, .market-list{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:10px!important; } /* ======================================================= HANDELSPOST-KARTE ======================================================= */ .market-card, .trade-card, .offer-card, .market-post, .trade-post{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:13px!important; border-radius:14px!important; } .market-card-head, .trade-card-head, .offer-card-head{ display:grid!important; grid-template-columns: minmax(0,1fr) auto!important; gap:8px!important; align-items:start!important; } .market-card h2, .market-card h3, .trade-card h2, .trade-card h3, .offer-card h2, .offer-card h3{ min-width:0!important; margin-top:0!important; overflow-wrap:anywhere!important; line-height:1.2!important; } /* Status */ .market-card .status, .trade-card .status, .offer-card .status, .status-badge{ min-width:max-content!important; white-space:nowrap!important; } /* ======================================================= PRODUKTBILD IN DER KARTE ======================================================= */ .market-card img, .trade-card img, .offer-card img{ max-width:100%!important; height:auto!important; object-fit:contain!important; } .market-card-image, .trade-card-image, .offer-card-image{ width:100%!important; max-height:230px!important; overflow:hidden!important; border-radius:11px!important; } /* ======================================================= HANDELSDATEN ======================================================= */ .market-card-meta, .trade-card-meta, .offer-card-meta, .market-meta, .trade-meta, .offer-meta{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } .market-card-meta > *, .trade-card-meta > *, .offer-card-meta > *, .market-meta > *, .trade-meta > *, .offer-meta > *{ min-width:0!important; padding:9px!important; border-radius:10px!important; } .market-card-meta strong, .trade-card-meta strong, .offer-card-meta strong{ overflow-wrap:anywhere!important; } /* ======================================================= STÄDTE / ROUTE ======================================================= */ .trade-cities, .market-cities, .route-grid, .city-grid{ display:grid!important; grid-template-columns:1fr!important; gap:7px!important; width:100%!important; } .trade-city, .market-city, .route-card, .city-card{ width:100%!important; min-width:0!important; } /* ======================================================= HANDELSPOST BUTTONS ======================================================= */ .market-card-actions, .trade-card-actions, .offer-card-actions, .market-actions, .trade-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; margin-top:11px!important; } .market-card-actions > *, .trade-card-actions > *, .offer-card-actions > *, .market-actions > *, .trade-actions > *{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; min-height:46px!important; padding: 8px 9px!important; white-space:normal!important; text-align:center!important; line-height:1.2!important; } /* ======================================================= MATCH-LISTE ======================================================= */ .v132-match-toolbar{ display:grid!important; grid-template-columns:1fr!important; gap:8px!important; width:100%!important; } .v132-match-filters{ display:flex!important; width:100%!important; overflow-x:auto!important; flex-wrap:nowrap!important; gap:6px!important; padding-bottom:5px!important; -webkit-overflow-scrolling:touch; } .v132-match-filters > *{ flex:0 0 auto!important; white-space:nowrap!important; } .v132-match-count{ width:100%!important; text-align:left!important; } .v132-match-list{ display:grid!important; grid-template-columns:1fr!important; gap:9px!important; width:100%!important; } .v132-match-list > .match-card-pro{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:12px!important; border-radius:14px!important; } .match-product{ min-width:0!important; } .match-product h3{ overflow-wrap:anywhere!important; } .match-score-visual{ min-width:0!important; max-width:100%!important; } .match-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } .match-actions > *{ width:100%!important; min-width:0!important; min-height:44px!important; white-space:normal!important; } /* ======================================================= PAGINATION ======================================================= */ .pagination, .market-pagination{ display:flex!important; width:100%!important; justify-content:center!important; flex-wrap:wrap!important; gap:5px!important; } .pagination > *, .market-pagination > *{ min-width:40px!important; min-height:40px!important; } /* ======================================================= LEERZUSTAND ======================================================= */ .market-empty, .trade-empty, .v132-match-empty{ width:100%!important; padding:18px 12px!important; text-align:center!important; } } /* ========================================================= KLEINE HANDYS ========================================================= */ @media(max-width:430px){ .market-card-meta, .trade-card-meta, .offer-card-meta, .market-meta, .trade-meta, .offer-meta{ grid-template-columns:1fr!important; } .market-card-actions, .trade-card-actions, .offer-card-actions, .market-actions, .trade-actions, .match-actions{ grid-template-columns:1fr!important; } .market-filter-actions, .filter-actions{ grid-template-columns:1fr!important; } .market-card, .trade-card, .offer-card{ padding:11px!important; } } /* ========================================================= SOURCE: v248-mobile-trade-form.css ========================================================= */ /* ========================================================= ZEUS V248 · MOBILE HANDEL ERSTELLEN / BEARBEITEN ========================================================= */ /* ========================================================= TABLET ========================================================= */ @media(max-width:900px){ #trade-form, #trade-edit-form, .trade-form, .edit-trade-form, .trade-create-form{ width:100%!important; max-width:none!important; min-width:0!important; } #trade-form .form-grid, #trade-edit-form .form-grid, .trade-form .form-grid, .edit-trade-form .form-grid, .trade-create-form .form-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:10px!important; } } /* ========================================================= HANDY ========================================================= */ @media(max-width:700px){ /* ------------------------------------------------------- FORMULAR ------------------------------------------------------- */ #trade-form, #trade-edit-form, .trade-form, .edit-trade-form, .trade-create-form{ display:block!important; width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; } #trade-form *, #trade-edit-form *, .trade-form *, .edit-trade-form *, .trade-create-form *{ box-sizing:border-box!important; } /* ------------------------------------------------------- ALLE GRIDS EINSPALTIG ------------------------------------------------------- */ #trade-form .form-grid, #trade-edit-form .form-grid, .trade-form .form-grid, .edit-trade-form .form-grid, .trade-create-form .form-grid, #trade-form .field-grid, #trade-edit-form .field-grid, .trade-form .field-grid, #trade-form .trade-form-grid, #trade-edit-form .trade-form-grid, .trade-form .trade-form-grid{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:10px!important; } /* ------------------------------------------------------- KARTEN / ABSCHNITTE ------------------------------------------------------- */ #trade-form fieldset, #trade-edit-form fieldset, .trade-form fieldset, .edit-trade-form fieldset, #trade-form .form-section, #trade-edit-form .form-section, .trade-form .form-section, #trade-form .trade-section, #trade-edit-form .trade-section, .trade-form .trade-section{ width:100%!important; max-width:none!important; min-width:0!important; margin: 0 0 11px!important; padding:13px!important; border-radius:14px!important; } /* ------------------------------------------------------- LABELS ------------------------------------------------------- */ #trade-form label, #trade-edit-form label, .trade-form label, .edit-trade-form label{ display:block!important; width:100%!important; max-width:none!important; min-width:0!important; margin-bottom:9px!important; line-height:1.3!important; } /* ------------------------------------------------------- INPUT / SELECT / TEXTAREA ------------------------------------------------------- */ #trade-form input, #trade-form select, #trade-form textarea, #trade-edit-form input, #trade-edit-form select, #trade-edit-form textarea, .trade-form input, .trade-form select, .trade-form textarea, .edit-trade-form input, .edit-trade-form select, .edit-trade-form textarea{ display:block!important; width:100%!important; max-width:none!important; min-width:0!important; min-height:48px!important; margin-top:5px!important; padding: 10px 12px!important; font-size:16px!important; border-radius:10px!important; } #trade-form textarea, #trade-edit-form textarea, .trade-form textarea, .edit-trade-form textarea{ min-height:100px!important; height:auto!important; resize:vertical!important; } /* ------------------------------------------------------- HANDELSTYP / KATEGORIE ------------------------------------------------------- */ #trade-form .trade-type-options, #trade-edit-form .trade-type-options, .trade-form .trade-type-options, #trade-form .category-options, #trade-edit-form .category-options, .trade-form .category-options{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:7px!important; } #trade-form .trade-type-options > *, #trade-edit-form .trade-type-options > *, .trade-form .trade-type-options > *, #trade-form .category-options > *, #trade-edit-form .category-options > *, .trade-form .category-options > *{ width:100%!important; min-width:0!important; min-height:46px!important; } /* ------------------------------------------------------- CHECKBOX / RADIO NICHT AUF 100 % ------------------------------------------------------- */ #trade-form input[type="checkbox"], #trade-form input[type="radio"], #trade-edit-form input[type="checkbox"], #trade-edit-form input[type="radio"], .trade-form input[type="checkbox"], .trade-form input[type="radio"]{ display:inline-block!important; width:22px!important; height:22px!important; min-width:22px!important; min-height:22px!important; margin: 0 8px 0 0!important; vertical-align:middle!important; } /* ------------------------------------------------------- MENGE / PREIS ------------------------------------------------------- */ #trade-form .amount-row, #trade-edit-form .amount-row, .trade-form .amount-row, #trade-form .price-row, #trade-edit-form .price-row, .trade-form .price-row{ display:grid!important; grid-template-columns:1fr!important; gap:8px!important; width:100%!important; } /* ------------------------------------------------------- STÄDTE / ROUTE ------------------------------------------------------- */ #trade-form .city-grid, #trade-edit-form .city-grid, .trade-form .city-grid, #trade-form .edit-cities, #trade-edit-form .edit-cities, .trade-form .edit-cities{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:8px!important; } /* ------------------------------------------------------- Q-LEVEL ------------------------------------------------------- */ #trade-form .quality-grid, #trade-edit-form .quality-grid, .trade-form .quality-grid, #trade-form .q-grid, #trade-edit-form .q-grid, .trade-form .q-grid{ display:grid!important; grid-template-columns: repeat(3,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } #trade-form .quality-grid > *, #trade-edit-form .quality-grid > *, .trade-form .quality-grid > *, #trade-form .q-grid > *, #trade-edit-form .q-grid > *, .trade-form .q-grid > *{ min-width:0!important; min-height:44px!important; text-align:center!important; } /* ------------------------------------------------------- LIEFER-ID ------------------------------------------------------- */ #hf-ziel, input[name="target_id"], input[name="delivery_id"]{ width:100%!important; min-width:0!important; font-family:inherit!important; overflow:hidden!important; } /* ------------------------------------------------------- PRODUKTBILD UPLOAD ------------------------------------------------------- */ #trade-form input[type="file"], #trade-edit-form input[type="file"], .trade-form input[type="file"], .edit-trade-form input[type="file"]{ width:100%!important; min-height:54px!important; padding:8px!important; cursor:pointer!important; } #trade-form input[type="file"]::file-selector-button, #trade-edit-form input[type="file"]::file-selector-button, .trade-form input[type="file"]::file-selector-button, .edit-trade-form input[type="file"]::file-selector-button{ min-height:38px!important; margin-right:8px!important; padding: 7px 10px!important; border-radius:8px!important; cursor:pointer!important; } /* Uploadfläche */ .image-upload, .upload-box, .trade-image-upload, .product-image-upload{ width:100%!important; max-width:none!important; min-width:0!important; min-height:120px!important; padding:12px!important; border-radius:13px!important; text-align:center!important; } /* ------------------------------------------------------- BILDVORSCHAU ------------------------------------------------------- */ .image-preview, .trade-image-preview, .product-image-preview{ width:100%!important; max-width:100%!important; margin-top:9px!important; overflow:hidden!important; border-radius:12px!important; } .image-preview img, .trade-image-preview img, .product-image-preview img{ display:block!important; width:100%!important; max-width:100%!important; max-height:260px!important; margin:auto!important; object-fit:contain!important; } /* ------------------------------------------------------- HILFETEXTE ------------------------------------------------------- */ #trade-form small, #trade-edit-form small, .trade-form small, .edit-trade-form small{ display:block!important; max-width:100%!important; margin-top:5px!important; line-height:1.35!important; overflow-wrap:anywhere!important; } /* ------------------------------------------------------- FORMULAR BUTTONS ------------------------------------------------------- */ #trade-form .form-actions, #trade-edit-form .form-actions, .trade-form .form-actions, .edit-trade-form .form-actions, #trade-form .trade-form-actions, #trade-edit-form .trade-form-actions, .trade-form .trade-form-actions{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:8px!important; margin-top:13px!important; } #trade-form .form-actions > *, #trade-edit-form .form-actions > *, .trade-form .form-actions > *, .edit-trade-form .form-actions > *, #trade-form .trade-form-actions > *, #trade-edit-form .trade-form-actions > *, .trade-form .trade-form-actions > *{ width:100%!important; min-width:0!important; min-height:48px!important; margin:0!important; white-space:normal!important; } /* ------------------------------------------------------- FEHLERMELDUNGEN ------------------------------------------------------- */ .form-error, .field-error, .trade-error{ width:100%!important; margin-top:5px!important; overflow-wrap:anywhere!important; } } /* ========================================================= KLEINE HANDYS ========================================================= */ @media(max-width:420px){ #trade-form fieldset, #trade-edit-form fieldset, .trade-form fieldset, .edit-trade-form fieldset, #trade-form .form-section, #trade-edit-form .form-section, .trade-form .form-section{ padding:10px!important; } #trade-form .quality-grid, #trade-edit-form .quality-grid, .trade-form .quality-grid, #trade-form .q-grid, #trade-edit-form .q-grid, .trade-form .q-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; } .image-preview img, .trade-image-preview img, .product-image-preview img{ max-height:220px!important; } } /* ========================================================= SOURCE: v249-mobile-communication.css ========================================================= */ /* ========================================================= ZEUS V249 · MOBILE KOMMUNIKATION Verträge · Handelsanfragen · Inbox · Handelschat ========================================================= */ /* ========================================================= TABLET ========================================================= */ @media(max-width:900px){ .contract-grid, .contracts-grid, .request-grid, .requests-grid, .inbox-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:10px!important; } } /* ========================================================= HANDY ========================================================= */ @media(max-width:700px){ /* ------------------------------------------------------- ALLGEMEIN ------------------------------------------------------- */ .contract-grid, .contracts-grid, .request-grid, .requests-grid, .inbox-grid{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:9px!important; } /* ======================================================= VERTRÄGE ======================================================= */ .contract-card, .trade-contract-card{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:13px!important; border-radius:14px!important; } .contract-card-head, .contract-header{ display:grid!important; grid-template-columns: minmax(0,1fr) auto!important; align-items:start!important; gap:8px!important; width:100%!important; } .contract-card-head h2, .contract-card-head h3, .contract-header h2, .contract-header h3{ margin:0!important; min-width:0!important; font-size:1.05rem!important; overflow-wrap:anywhere!important; } /* Vertragsstatus */ .contract-status, .contract-card .status-badge{ white-space:nowrap!important; min-width:max-content!important; font-size:.68rem!important; } /* Vertragsdaten */ .contract-data, .contract-details, .contract-meta{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } .contract-data > *, .contract-details > *, .contract-meta > *{ min-width:0!important; padding:9px!important; border-radius:10px!important; overflow-wrap:anywhere!important; } /* Vertrags-ID */ .contract-card code, .contract-id{ max-width:100%!important; overflow-wrap:anywhere!important; word-break:break-all!important; } /* Vertragsbuttons */ .contract-actions, .contract-card-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; margin-top:11px!important; } .contract-actions > *, .contract-card-actions > *{ width:100%!important; min-width:0!important; min-height:46px!important; margin:0!important; white-space:normal!important; text-align:center!important; } /* ======================================================= HANDELSANFRAGEN LISTE ======================================================= */ .request-card, .trade-request-card, .v66-request-card{ width:100%!important; max-width:none!important; min-width:0!important; padding:13px!important; border-radius:14px!important; } .request-card-head, .trade-request-head{ display:grid!important; grid-template-columns: minmax(0,1fr) auto!important; gap:8px!important; align-items:start!important; } .request-card h2, .request-card h3, .trade-request-card h2, .trade-request-card h3{ margin-top:0!important; overflow-wrap:anywhere!important; font-size:1.05rem!important; } .request-meta, .trade-request-meta{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } .request-meta > *, .trade-request-meta > *{ min-width:0!important; padding:9px!important; overflow-wrap:anywhere!important; border-radius:10px!important; } .request-actions, .trade-request-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; margin-top:10px!important; } .request-actions > *, .trade-request-actions > *{ width:100%!important; min-width:0!important; min-height:46px!important; white-space:normal!important; } /* ======================================================= HANDELSANFRAGE DIALOG ======================================================= */ form.trade-dialog-shell, form.trade-dialog-shell[data-v234="1"]{ width:calc(100vw - 6px)!important; max-width:none!important; max-height:calc(100dvh - 6px)!important; margin:3px auto!important; border-radius:14px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; } form.trade-dialog-shell .zeus-v686857-top-grid{ width:100%!important; } form.trade-dialog-shell .zeus-v686833-left{ width:100%!important; max-width:none!important; } form.trade-dialog-shell .zeus-v686833-card{ width:100%!important; max-width:none!important; min-width:0!important; } form.trade-dialog-shell .zeus-v686826-qtybox{ width:100%!important; } /* Menge + Preis */ form.trade-dialog-shell #rq-amount, form.trade-dialog-shell #rq-price, form.trade-dialog-shell [data-zeus-v686857-price-input]{ width:100%!important; max-width:none!important; min-height:48px!important; font-size:16px!important; } /* Kontakt */ form.trade-dialog-shell input, form.trade-dialog-shell textarea, form.trade-dialog-shell select{ max-width:100%!important; min-width:0!important; font-size:16px!important; } /* ======================================================= INBOX ======================================================= */ .v66-inbox, .v66-inbox-list, .inbox-list{ width:100%!important; max-width:none!important; padding:0!important; } .v66-inbox-card, .inbox-card, .message-card{ width:100%!important; max-width:none!important; min-width:0!important; margin: 0 0 9px!important; padding:12px!important; border-radius:13px!important; } .v66-inbox-card-head, .inbox-card-head, .message-head{ display:grid!important; grid-template-columns: minmax(0,1fr) auto!important; gap:8px!important; align-items:start!important; } .v66-inbox-card h3, .inbox-card h3, .message-card h3{ margin-top:0!important; overflow-wrap:anywhere!important; } .v66-inbox-card p, .inbox-card p, .message-card p{ overflow-wrap:anywhere!important; line-height:1.4!important; } .v66-inbox-actions, .inbox-actions, .message-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; margin-top:9px!important; } .v66-inbox-actions > *, .inbox-actions > *, .message-actions > *{ width:100%!important; min-width:0!important; min-height:44px!important; margin:0!important; white-space:normal!important; } /* ======================================================= HANDELSCHAT ======================================================= */ #v67-chat-drawer, .v67-chat-drawer{ position:fixed!important; top:0!important; right:0!important; bottom:0!important; left:0!important; width:100vw!important; max-width:100vw!important; height:100dvh!important; max-height:100dvh!important; margin:0!important; border-radius:0!important; z-index:99999!important; } #v67-chat-drawer .v67-chat-shell, .v67-chat-drawer .v67-chat-shell{ display:grid!important; grid-template-rows: auto minmax(0,1fr) auto!important; width:100%!important; height:100%!important; max-height:100dvh!important; } /* Chatkopf */ #v67-chat-drawer .v67-chat-head, .v67-chat-drawer .v67-chat-head{ position:sticky!important; top:0!important; width:100%!important; padding: max(10px,env(safe-area-inset-top)) 12px 10px!important; z-index:3!important; } /* Chat schließen */ #v67-chat-drawer .v67-chat-close, .v67-chat-drawer .v67-chat-close{ width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; } /* Nachrichtenbereich */ #v67-chat-drawer .v67-chat-messages, .v67-chat-drawer .v67-chat-messages{ width:100%!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; padding:10px!important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain!important; } /* Einzelne Nachricht */ #v67-chat-drawer .v67-chat-message, .v67-chat-drawer .v67-chat-message{ max-width:88%!important; overflow-wrap:anywhere!important; border-radius:13px!important; } /* Texteingabe unten */ #v67-chat-drawer .v67-chat-compose, .v67-chat-drawer .v67-chat-compose{ position:sticky!important; bottom:0!important; display:grid!important; grid-template-columns: minmax(0,1fr) auto!important; gap:7px!important; width:100%!important; padding: 9px 10px max(9px,env(safe-area-inset-bottom))!important; z-index:3!important; } #v67-chat-drawer input, #v67-chat-drawer textarea, .v67-chat-drawer input, .v67-chat-drawer textarea{ width:100%!important; min-width:0!important; min-height:46px!important; font-size:16px!important; } #v67-chat-drawer .v67-chat-send, .v67-chat-drawer .v67-chat-send{ min-width:48px!important; min-height:46px!important; } /* ======================================================= CHAT BUTTON ======================================================= */ [data-v67-chat-market], .v67-trade-chat-button{ min-height:46px!important; touch-action:manipulation!important; } /* ======================================================= LEERZUSTÄNDE ======================================================= */ .inbox-empty, .request-empty, .contract-empty{ width:100%!important; padding:20px 12px!important; text-align:center!important; } } /* ========================================================= KLEINE HANDYS ========================================================= */ @media(max-width:430px){ .contract-data, .contract-details, .contract-meta, .request-meta, .trade-request-meta{ grid-template-columns:1fr!important; } .contract-actions, .contract-card-actions, .request-actions, .trade-request-actions, .v66-inbox-actions, .inbox-actions, .message-actions{ grid-template-columns:1fr!important; } /* Chatnachrichten etwas breiter */ #v67-chat-drawer .v67-chat-message, .v67-chat-drawer .v67-chat-message{ max-width:94%!important; } } /* ========================================================= SOURCE: v250-mobile-account-dialogs.css ========================================================= */ /* ========================================================= ZEUS V250 · MOBILE ACCOUNT / PROFIL / DIALOGE ========================================================= */ @media(max-width:768px){ /* ======================================================= PROFIL / ACCOUNT ======================================================= */ .profile-page, .profile-shell, .account-page, .account-shell, .settings-page, .settings-shell{ width:100%!important; max-width:none!important; min-width:0!important; padding-left:8px!important; padding-right:8px!important; } .profile-grid, .account-grid, .settings-grid{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:10px!important; } .profile-card, .account-card, .settings-card{ width:100%!important; max-width:none!important; min-width:0!important; padding:13px!important; border-radius:14px!important; } /* ======================================================= PROFILKOPF ======================================================= */ .profile-header, .account-header, .user-profile-header{ display:grid!important; grid-template-columns: 58px minmax(0,1fr)!important; gap:11px!important; align-items:center!important; width:100%!important; } .profile-avatar, .account-avatar, .user-avatar{ width:58px!important; height:58px!important; min-width:58px!important; min-height:58px!important; object-fit:cover!important; border-radius:50%!important; } .profile-header h1, .profile-header h2, .account-header h1, .account-header h2{ margin:0!important; font-size:1.25rem!important; overflow-wrap:anywhere!important; } /* Discord-/Firmenname darf nicht überlaufen */ .profile-name, .discord-name, .company-name, .account-name{ max-width:100%!important; overflow-wrap:anywhere!important; word-break:break-word!important; } /* ======================================================= PROFILDATEN ======================================================= */ .profile-data, .account-data, .profile-stats{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } .profile-data > *, .account-data > *, .profile-stats > *{ min-width:0!important; padding:9px!important; border-radius:10px!important; overflow-wrap:anywhere!important; } /* ======================================================= EINSTELLUNGEN ======================================================= */ .settings-row, .setting-row, .profile-setting-row{ display:grid!important; grid-template-columns:1fr!important; gap:7px!important; width:100%!important; padding:11px 0!important; } .settings-row input, .settings-row select, .settings-row textarea, .setting-row input, .setting-row select, .setting-row textarea{ width:100%!important; max-width:none!important; min-width:0!important; min-height:46px!important; font-size:16px!important; } /* Checkbox/Switch nicht aufblasen */ .settings-row input[type="checkbox"], .setting-row input[type="checkbox"], .settings-row input[type="radio"], .setting-row input[type="radio"]{ width:22px!important; height:22px!important; min-width:22px!important; min-height:22px!important; } /* ======================================================= DISCORD LOGIN ======================================================= */ .discord-login, .discord-auth, .auth-card, .login-card, .login-panel{ width:100%!important; max-width:none!important; min-width:0!important; padding:14px!important; border-radius:14px!important; } .discord-login-button, .discord-btn, .login-discord, [data-discord-login]{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; max-width:none!important; min-width:0!important; min-height:50px!important; padding:10px 12px!important; white-space:normal!important; text-align:center!important; } /* Discord Informationen */ .discord-user, .discord-profile, .discord-account{ display:grid!important; grid-template-columns: 48px minmax(0,1fr)!important; gap:10px!important; align-items:center!important; width:100%!important; } .discord-user img, .discord-profile img, .discord-account img{ width:48px!important; height:48px!important; object-fit:cover!important; border-radius:50%!important; } /* ======================================================= ALLGEMEINE MODALS ======================================================= */ dialog, .modal, .dialog, .modal-shell, .dialog-shell, [role="dialog"]{ width:calc(100vw - 8px)!important; max-width:calc(100vw - 8px)!important; max-height:calc(100dvh - 8px)!important; margin:auto!important; overflow-x:hidden!important; overflow-y:auto!important; border-radius:14px!important; overscroll-behavior:contain!important; } /* Modal Inhalt */ .modal-content, .dialog-content, .modal-body, .dialog-body{ width:100%!important; max-width:none!important; min-width:0!important; padding:12px!important; overflow-x:hidden!important; } /* ======================================================= MODAL HEADER ======================================================= */ .modal-header, .dialog-header{ display:grid!important; grid-template-columns: minmax(0,1fr) 42px!important; gap:8px!important; align-items:center!important; width:100%!important; } .modal-header h1, .modal-header h2, .modal-header h3, .dialog-header h1, .dialog-header h2, .dialog-header h3{ min-width:0!important; margin:0!important; font-size:1.2rem!important; overflow-wrap:anywhere!important; } /* X Buttons */ .modal-close, .dialog-close, button[aria-label="Schließen"], button[aria-label="Close"]{ width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:center!important; } /* ======================================================= MODAL FORMULARE ======================================================= */ dialog input, dialog select, dialog textarea, .modal input, .modal select, .modal textarea, [role="dialog"] input, [role="dialog"] select, [role="dialog"] textarea{ width:100%!important; max-width:none!important; min-width:0!important; font-size:16px!important; } /* ======================================================= DIALOG BUTTONS ======================================================= */ .modal-actions, .dialog-actions, .account-actions, .profile-actions, .settings-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:8px!important; width:100%!important; margin-top:12px!important; } .modal-actions > *, .dialog-actions > *, .account-actions > *, .profile-actions > *, .settings-actions > *{ width:100%!important; min-width:0!important; min-height:46px!important; margin:0!important; white-space:normal!important; text-align:center!important; } /* ======================================================= TOASTS / HINWEISE ======================================================= */ .toast, .notification-toast, .alert-toast, .snackbar{ left:8px!important; right:8px!important; width:auto!important; max-width:none!important; bottom: max( 8px, env(safe-area-inset-bottom) )!important; overflow-wrap:anywhere!important; } /* ======================================================= DROPDOWNS ======================================================= */ .dropdown-menu, .user-menu, .profile-menu{ max-width:calc(100vw - 16px)!important; min-width:200px!important; right:8px!important; left:auto!important; overflow-x:hidden!important; } .dropdown-menu a, .dropdown-menu button, .user-menu a, .user-menu button, .profile-menu a, .profile-menu button{ width:100%!important; min-height:44px!important; white-space:normal!important; text-align:left!important; } } /* ========================================================= KLEINE HANDYS ========================================================= */ @media(max-width:430px){ .profile-data, .account-data, .profile-stats{ grid-template-columns:1fr!important; } .modal-actions, .dialog-actions, .account-actions, .profile-actions, .settings-actions{ grid-template-columns:1fr!important; } dialog, .modal, .dialog, [role="dialog"]{ width:calc(100vw - 4px)!important; max-width:calc(100vw - 4px)!important; max-height:calc(100dvh - 4px)!important; border-radius:12px!important; } } /* ========================================================= LANDSCAPE ========================================================= */ @media(max-width:900px) and (orientation:landscape){ dialog, .modal, [role="dialog"]{ max-height:calc(100dvh - 4px)!important; } } /* ========================================================= SOURCE: v252-mobile-real-overflow-check.css ========================================================= */ /* ========================================================= ZEUS V252 · MOBILE DEBUG ========================================================= */ @media(max-width:900px){ html.zeus-v252-debug [data-v252-overflow="1"]{ outline: 2px solid rgba(255,70,70,.95)!important; outline-offset: -2px!important; } } /* ========================================================= SOURCE: v253-mobile-trade-drawer.css ========================================================= */ /* ========================================================= ZEUS V253 · MOBILE HANDEL-SCHNELLANSICHT ========================================================= */ @media(max-width:768px){ /* Gesamter Drawer */ #trade-drawer{ position:fixed!important; inset:0!important; width:100vw!important; max-width:100vw!important; height:100dvh!important; max-height:100dvh!important; margin:0!important; padding:0!important; z-index:99990!important; overflow:hidden!important; } /* Hintergrund */ #trade-drawer .trade-drawer-backdrop{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; } /* Hauptpanel */ #trade-drawer .trade-drawer-panel{ position:absolute!important; inset:0!important; display:grid!important; grid-template-rows: auto minmax(0,1fr) auto!important; width:100vw!important; max-width:100vw!important; height:100dvh!important; max-height:100dvh!important; margin:0!important; border-radius:0!important; overflow:hidden!important; box-sizing:border-box!important; } /* ======================================================= KOPF ======================================================= */ #trade-drawer .trade-drawer-head{ position:relative!important; z-index:5!important; display:grid!important; grid-template-columns: minmax(0,1fr) 44px!important; gap:9px!important; align-items:center!important; width:100%!important; padding: max(10px,env(safe-area-inset-top)) 11px 10px!important; box-sizing:border-box!important; } #trade-drawer .trade-drawer-head > div{ min-width:0!important; } #trade-drawer .trade-drawer-head h2{ margin: 2px 0 2px!important; font-size:1.35rem!important; line-height:1.15!important; overflow-wrap:anywhere!important; } #trade-drawer .trade-drawer-head p{ margin:0!important; font-size:.78rem!important; line-height:1.3!important; overflow-wrap:anywhere!important; } /* X */ #trade-drawer .trade-drawer-close{ display:flex!important; align-items:center!important; justify-content:center!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; margin:0!important; padding:0!important; border-radius:11px!important; font-size:1.3rem!important; } /* ======================================================= INHALT ======================================================= */ #trade-drawer .trade-drawer-body{ width:100%!important; min-width:0!important; min-height:0!important; padding: 10px 10px 14px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; box-sizing:border-box!important; } #trade-drawer .trade-drawer-body > *{ max-width:100%!important; min-width:0!important; } /* Karten */ #trade-drawer .command-panel, #trade-drawer .trade-card, #trade-drawer .market-card, #trade-drawer article{ width:100%!important; max-width:none!important; min-width:0!important; margin-bottom:9px!important; padding:12px!important; border-radius:13px!important; box-sizing:border-box!important; } /* Produktnamen / IDs */ #trade-drawer h1, #trade-drawer h2, #trade-drawer h3, #trade-drawer p, #trade-drawer strong, #trade-drawer code{ max-width:100%!important; overflow-wrap:anywhere!important; } #trade-drawer code{ word-break:break-all!important; } /* ======================================================= HANDELSDATEN ======================================================= */ #trade-drawer .trade-detail-grid, #trade-drawer .trade-meta, #trade-drawer .market-meta, #trade-drawer .detail-grid{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } #trade-drawer .trade-detail-grid > *, #trade-drawer .trade-meta > *, #trade-drawer .market-meta > *, #trade-drawer .detail-grid > *{ min-width:0!important; } /* ======================================================= MATCHES ======================================================= */ #trade-drawer .trade-drawer-matches{ width:100%!important; max-width:none!important; padding: 0 10px 10px!important; box-sizing:border-box!important; } #trade-drawer .dashboard-match-list, #trade-drawer .v132-match-list{ display:grid!important; grid-template-columns:1fr!important; gap:8px!important; width:100%!important; } #trade-drawer .match-card-pro{ width:100%!important; max-width:none!important; min-width:0!important; } /* ======================================================= AKTIONEN UNTEN ======================================================= */ #trade-drawer .trade-drawer-actions{ position:relative!important; z-index:5!important; display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:8px!important; width:100%!important; padding: 9px 10px max(10px,env(safe-area-inset-bottom))!important; box-sizing:border-box!important; } #trade-drawer .trade-drawer-actions > *{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; min-height:47px!important; margin:0!important; padding:9px!important; white-space:normal!important; text-align:center!important; line-height:1.2!important; } /* Eingaben */ #trade-drawer input, #trade-drawer select, #trade-drawer textarea{ width:100%!important; max-width:none!important; min-width:0!important; font-size:16px!important; } } /* ========================================================= KLEINE HANDYS ========================================================= */ @media(max-width:430px){ #trade-drawer .trade-detail-grid, #trade-drawer .trade-meta, #trade-drawer .market-meta, #trade-drawer .detail-grid{ grid-template-columns:1fr!important; } #trade-drawer .trade-drawer-actions{ grid-template-columns:1fr!important; } #trade-drawer .trade-drawer-body{ padding-left:7px!important; padding-right:7px!important; } #trade-drawer .trade-drawer-matches{ padding-left:7px!important; padding-right:7px!important; } } /* ========================================================= SOURCE: v254-mobile-tools.css ========================================================= */ /* ========================================================= ZEUS V254 · MOBILE TOOLS Lieferzentrale · Rechner · Produktionsplanung ========================================================= */ @media(max-width:768px){ /* ======================================================= TOOL-SEITEN GRUNDLAYOUT ======================================================= */ .calculator, .calculator-shell, .calculator-page, .rechner, .rechner-shell, .planner, .planner-shell, .production-planner, .production-calculator, .lieferzentrale, .delivery-center, .tool-page, .tool-shell{ width:100%!important; max-width:none!important; min-width:0!important; margin-left:auto!important; margin-right:auto!important; } /* ======================================================= TOOL-GRIDS ======================================================= */ .calculator-grid, .rechner-grid, .planner-grid, .production-grid, .delivery-grid, .tool-grid, .result-grid{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:10px!important; } /* ======================================================= TOOL-KARTEN ======================================================= */ .calculator-card, .rechner-card, .planner-card, .production-card, .delivery-card, .tool-card, .result-card{ width:100%!important; max-width:none!important; min-width:0!important; padding:13px!important; border-radius:14px!important; } .calculator-card h2, .calculator-card h3, .rechner-card h2, .rechner-card h3, .planner-card h2, .planner-card h3, .production-card h2, .production-card h3, .delivery-card h2, .delivery-card h3{ margin-top:0!important; overflow-wrap:anywhere!important; font-size:1.1rem!important; line-height:1.2!important; } /* ======================================================= EINGABEFELDER ======================================================= */ .calculator input, .calculator select, .calculator textarea, .rechner input, .rechner select, .rechner textarea, .planner input, .planner select, .planner textarea, .production-planner input, .production-planner select, .production-planner textarea, .production-calculator input, .production-calculator select, .production-calculator textarea, .lieferzentrale input, .lieferzentrale select, .lieferzentrale textarea, .delivery-center input, .delivery-center select, .delivery-center textarea{ width:100%!important; max-width:none!important; min-width:0!important; min-height:48px!important; font-size:16px!important; margin-top:5px!important; padding:10px 12px!important; } /* ======================================================= FORM-ROWS ======================================================= */ .calculator-row, .rechner-row, .planner-row, .production-row, .delivery-row, .tool-row{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:8px!important; } /* ======================================================= ERGEBNISWERTE ======================================================= */ .calculator-results, .rechner-results, .planner-results, .production-results, .delivery-results, .tool-results{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; width:100%!important; gap:7px!important; } .calculator-results > *, .rechner-results > *, .planner-results > *, .production-results > *, .delivery-results > *, .tool-results > *{ min-width:0!important; padding:10px!important; border-radius:10px!important; overflow-wrap:anywhere!important; } /* ======================================================= LIEFERZENTRALE ======================================================= */ .delivery-list, .liefer-list, .shipment-list{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:9px!important; } .delivery-item, .liefer-card, .shipment-card{ width:100%!important; max-width:none!important; min-width:0!important; padding:12px!important; border-radius:13px!important; } .delivery-meta, .liefer-meta, .shipment-meta{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:7px!important; width:100%!important; } .delivery-meta > *, .liefer-meta > *, .shipment-meta > *{ min-width:0!important; overflow-wrap:anywhere!important; } /* ======================================================= PRODUKTIONSPLANUNG ======================================================= */ .production-plan, .planner-plan, .production-steps{ width:100%!important; max-width:none!important; } .production-step, .planner-step{ width:100%!important; min-width:0!important; margin-bottom:8px!important; padding:11px!important; border-radius:11px!important; } .production-step-grid, .planner-step-grid{ display:grid!important; grid-template-columns:1fr!important; gap:7px!important; } /* Rohstoffe / Zwischenprodukte */ .materials-grid, .resources-grid, .ingredients-grid{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:7px!important; } /* ======================================================= TABELLEN DER RECHNER ======================================================= */ .calculator table, .rechner table, .planner table, .production-planner table, .lieferzentrale table, .delivery-center table{ width:max-content!important; min-width:100%!important; font-size:.82rem!important; } .calculator .table-wrap, .rechner .table-wrap, .planner .table-wrap, .production-planner .table-wrap, .lieferzentrale .table-wrap, .delivery-center .table-wrap{ width:100%!important; max-width:100%!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch; } /* ======================================================= AKTIONSBUTTONS ======================================================= */ .calculator-actions, .rechner-actions, .planner-actions, .production-actions, .delivery-actions, .tool-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:8px!important; width:100%!important; margin-top:11px!important; } .calculator-actions > *, .rechner-actions > *, .planner-actions > *, .production-actions > *, .delivery-actions > *, .tool-actions > *{ width:100%!important; min-width:0!important; min-height:46px!important; margin:0!important; white-space:normal!important; text-align:center!important; } /* ======================================================= LANGE ZAHLEN ======================================================= */ .calculator-result, .rechner-result, .production-result, .delivery-result{ max-width:100%!important; overflow-wrap:anywhere!important; word-break:break-word!important; } /* ======================================================= GENERISCHER SCHUTZ FÜR TOOL-PANELS ======================================================= */ [class*="calculator"] > *, [class*="rechner"] > *, [class*="planner"] > *, [class*="liefer"] > *{ max-width:100%; } } /* ========================================================= KLEINE HANDYS ========================================================= */ @media(max-width:430px){ .calculator-results, .rechner-results, .planner-results, .production-results, .delivery-results, .tool-results, .delivery-meta, .liefer-meta, .shipment-meta{ grid-template-columns:1fr!important; } .calculator-actions, .rechner-actions, .planner-actions, .production-actions, .delivery-actions, .tool-actions{ grid-template-columns:1fr!important; } } /* ========================================================= ZEUS V256 · MOBILE CONTENT / PROJEKTE / INFO ========================================================= */ @media(max-width:768px){ /* ======================================================= PROJEKTE / PROJEKTZENTRALE ======================================================= */ .project-page, .projects-page, .project-shell, .projects-shell, .project-center, .projektzentrale, .project-planner{ width:100%!important; max-width:none!important; min-width:0!important; } .project-grid, .projects-grid, .project-center-grid, .project-list{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:10px!important; } .project-card, .projekt-card, .project-item{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; padding:13px!important; border-radius:14px!important; } .project-card h2, .project-card h3, .projekt-card h2, .projekt-card h3{ margin-top:0!important; overflow-wrap:anywhere!important; font-size:1.08rem!important; line-height:1.2!important; } /* Projektstatus / Werte */ .project-meta, .project-stats, .project-details{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; width:100%!important; gap:7px!important; } .project-meta > *, .project-stats > *, .project-details > *{ min-width:0!important; padding:9px!important; border-radius:10px!important; overflow-wrap:anywhere!important; } /* Projektfortschritt */ .project-progress, .progress-wrap{ width:100%!important; max-width:none!important; overflow:hidden!important; } .project-progress-bar, .progress-bar{ max-width:100%!important; } /* Rohstoffe / Zwischenprodukte */ .project-materials, .project-resources, .project-contributions, .contribution-grid{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:7px!important; } .project-material, .project-resource, .project-contribution{ width:100%!important; min-width:0!important; padding:10px!important; overflow-wrap:anywhere!important; } /* Projektbuttons */ .project-actions, .project-card-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; width:100%!important; gap:7px!important; margin-top:10px!important; } .project-actions > *, .project-card-actions > *{ width:100%!important; min-width:0!important; min-height:46px!important; white-space:normal!important; text-align:center!important; } /* ======================================================= BEKANNTMACHUNGEN ======================================================= */ .announcements, .announcement-page, .announcement-list, .bekanntmachungen{ width:100%!important; max-width:none!important; min-width:0!important; } .announcement-grid, .announcements-grid{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:9px!important; } .announcement-card, .announcement-item, .notice-card{ width:100%!important; max-width:none!important; min-width:0!important; padding:13px!important; border-radius:14px!important; } .announcement-card h2, .announcement-card h3, .notice-card h2, .notice-card h3{ margin-top:0!important; overflow-wrap:anywhere!important; line-height:1.2!important; } .announcement-card p, .announcement-item p, .notice-card p{ overflow-wrap:anywhere!important; line-height:1.45!important; } /* ======================================================= REGELN / SATZUNG / INFOTEXTE ======================================================= */ .rules-page, .rules-shell, .satzung-page, .satzung-shell, .info-page, .info-shell, .legal-page{ width:100%!important; max-width:none!important; min-width:0!important; } .rules-content, .satzung-content, .info-content, .legal-content{ width:100%!important; max-width:none!important; padding:13px!important; border-radius:14px!important; } .rules-content h1, .satzung-content h1, .info-content h1{ font-size:1.5rem!important; line-height:1.15!important; overflow-wrap:anywhere!important; } .rules-content h2, .satzung-content h2, .info-content h2{ margin-top:20px!important; font-size:1.18rem!important; overflow-wrap:anywhere!important; } .rules-content p, .satzung-content p, .info-content p, .rules-content li, .satzung-content li, .info-content li{ line-height:1.5!important; overflow-wrap:anywhere!important; } .rules-content ul, .rules-content ol, .satzung-content ul, .satzung-content ol, .info-content ul, .info-content ol{ padding-left:21px!important; } /* ======================================================= HÄNDLERPROFILE / FIRMEN ======================================================= */ .trader-grid, .traders-grid, .company-grid, .companies-grid{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:9px!important; } .trader-card, .company-card, .firm-card{ width:100%!important; max-width:none!important; min-width:0!important; padding:13px!important; border-radius:14px!important; } .trader-profile, .company-profile{ display:grid!important; grid-template-columns: 52px minmax(0,1fr)!important; align-items:center!important; gap:10px!important; width:100%!important; } .trader-avatar, .company-avatar{ width:52px!important; height:52px!important; min-width:52px!important; min-height:52px!important; object-fit:cover!important; border-radius:50%!important; } .trader-card h3, .company-card h3, .firm-card h3{ overflow-wrap:anywhere!important; } .trader-actions, .company-actions{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; width:100%!important; gap:7px!important; margin-top:10px!important; } .trader-actions > *, .company-actions > *{ width:100%!important; min-width:0!important; min-height:44px!important; white-space:normal!important; } /* ======================================================= HALL OF FAME ======================================================= */ .hall-of-fame, .hof-page, .hof-shell{ width:100%!important; max-width:none!important; min-width:0!important; } .hof-grid, .hall-grid, .ranking-grid{ display:grid!important; grid-template-columns:1fr!important; width:100%!important; gap:9px!important; } .hof-card, .hall-card, .ranking-card{ width:100%!important; max-width:none!important; min-width:0!important; padding:13px!important; border-radius:14px!important; } .hof-card img, .hall-card img{ max-width:100%!important; height:auto!important; object-fit:contain!important; } /* ======================================================= ACCORDIONS ======================================================= */ details{ width:100%!important; max-width:none!important; overflow:hidden!important; } summary{ width:100%!important; min-height:44px!important; padding:10px!important; overflow-wrap:anywhere!important; cursor:pointer!important; } /* ======================================================= GENERISCHER CONTENT-SCHUTZ ======================================================= */ .content-card, .info-card, .text-card{ width:100%!important; max-width:none!important; min-width:0!important; padding:13px!important; } .content-card img, .info-card img, .text-card img{ max-width:100%!important; height:auto!important; } .content-card pre, .info-card pre, .text-card pre{ max-width:100%!important; overflow-x:auto!important; white-space:pre!important; } } /* ========================================================= KLEINE HANDYS ========================================================= */ @media(max-width:430px){ .project-meta, .project-stats, .project-details{ grid-template-columns:1fr!important; } .project-actions, .project-card-actions, .trader-actions, .company-actions{ grid-template-columns:1fr!important; } .rules-content, .satzung-content, .info-content, .legal-content{ padding:10px!important; } .trader-profile, .company-profile{ grid-template-columns: 46px minmax(0,1fr)!important; } .trader-avatar, .company-avatar{ width:46px!important; height:46px!important; min-width:46px!important; min-height:46px!important; } } /* ========================================================= ZEUS V258 · MOBILE NAVIGATION BEREINIGUNG Bestehendes V99-Menü verwenden ========================================================= */ @media(max-width:768px){ /* * Alte zusätzliche V245-Schaltfläche sicher verstecken. * Nach einem Reload sollte sie ohnehin nicht mehr erzeugt * werden. */ .zeus-mobile-menu-button{ display:none!important; } /* * V99 Drawer darf niemals breiter als das Handy werden. */ #v99-mobile-drawer{ max-width:calc(100vw - 12px)!important; max-height:100dvh!important; box-sizing:border-box!important; overflow-x:hidden!important; } #v99-mobile-drawer .v99-drawer-head, #v99-mobile-drawer .v99-drawer-nav, #v99-mobile-drawer section{ max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } /* * Navigationseinträge auf Touch-Geräten groß genug. */ #v99-mobile-drawer a, #v99-mobile-drawer button{ max-width:100%!important; min-width:0!important; min-height:44px!important; overflow-wrap:anywhere!important; touch-action:manipulation!important; } #v99-mobile-drawer .v99-drawer-close{ flex:0 0 44px!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; } } /* ========================================================= ZEUS V259 · MOBILE TOUCH / SCROLL / SAFE AREA ========================================================= */ @media(max-width:768px){ /* ======================================================= TOUCHFLÄCHEN ======================================================= */ button, a.btn, .btn, [role="button"]{ min-height:44px!important; touch-action:manipulation!important; -webkit-tap-highlight-color: rgba(212,175,55,.12); } /* Iconbuttons nicht unnötig aufblasen */ button.icon-btn, .icon-btn, .v67-chat-icon-btn, .v99-drawer-close{ min-width:44px!important; min-height:44px!important; } /* ======================================================= INPUTS · MOBILE KEYBOARD ======================================================= */ input:not([type="checkbox"]):not([type="radio"]), select, textarea{ font-size:16px!important; min-height:46px!important; } textarea{ line-height:1.4!important; resize:vertical!important; } input[type="checkbox"], input[type="radio"]{ width:22px!important; height:22px!important; min-width:22px!important; min-height:22px!important; } /* ======================================================= FOCUS SICHTBAR ======================================================= */ input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible{ scroll-margin-top:90px!important; scroll-margin-bottom:120px!important; } /* ======================================================= HORIZONTALE TAB-NAVIGATION ======================================================= */ .market-tabs, .tabs, .tabbar, .v132-match-filters{ scroll-snap-type:x proximity!important; overscroll-behavior-inline:contain!important; -webkit-overflow-scrolling:touch; } .market-tabs > *, .tabs > *, .tabbar > *, .v132-match-filters > *{ scroll-snap-align:start!important; } /* ======================================================= LANGE WERTE ======================================================= */ code, .trade-id, .contract-id, .delivery-id, .company-name, .discord-name{ max-width:100%!important; overflow-wrap:anywhere!important; word-break:break-word!important; } /* Zahlen selbst möglichst zusammenhalten */ .price, .amount, .quantity, .money{ font-variant-numeric: tabular-nums!important; } /* ======================================================= FIXED ELEMENTE ======================================================= */ .floating-actions, .floating-buttons, .floating-button{ max-width: calc( 100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right) )!important; } /* ======================================================= FOOTER ======================================================= */ footer, .site-footer{ width:100%!important; max-width:100%!important; padding-left: max( 10px, env(safe-area-inset-left) )!important; padding-right: max( 10px, env(safe-area-inset-right) )!important; padding-bottom: max( 15px, env(safe-area-inset-bottom) )!important; } .footer-grid, .footer-links, .footer-nav{ display:grid!important; grid-template-columns:1fr!important; gap:8px!important; width:100%!important; } .footer-links a, .footer-nav a{ min-height:42px!important; display:flex!important; align-items:center!important; } /* ======================================================= BOTTOM-ACTIONS ======================================================= */ .sticky-actions, .bottom-actions, .mobile-bottom-actions{ max-width:100vw!important; padding-bottom: max( 8px, env(safe-area-inset-bottom) )!important; } /* ======================================================= MODALS / DRAWER + DISPLAY CUTOUT ======================================================= */ dialog, .modal, [role="dialog"], #trade-drawer .trade-drawer-panel, #v67-chat-drawer{ padding-left: env(safe-area-inset-left)!important; padding-right: env(safe-area-inset-right)!important; } /* ======================================================= MOBILE SCROLL ======================================================= */ .trade-drawer-body, .v67-chat-messages, .modal-body, .dialog-body, .v99-drawer-nav{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain!important; } /* ======================================================= BILDER ======================================================= */ img{ max-width:100%!important; } .product-image img, .trade-image img, .market-card img, .trade-card img{ object-position:center!important; } /* ======================================================= KEINE DESKTOP-HOVER-BEWEGUNG AUF TOUCH ======================================================= */ @media(hover:none){ .match-card-pro:hover, .trade-card:hover, .market-card:hover, .project-card:hover{ transform:none!important; } } } /* ========================================================= SEHR KLEINE HANDYS ========================================================= */ @media(max-width:390px){ body{ font-size:14px!important; } .page-section, .wrap{ padding-left:6px!important; padding-right:6px!important; } button, .btn, a.btn{ padding-left:8px!important; padding-right:8px!important; } h1{ overflow-wrap:anywhere!important; } } /* ========================================================= LANDSCAPE HANDY ========================================================= */ @media(max-width:900px) and (orientation:landscape){ #v99-mobile-drawer, #v67-chat-drawer, #trade-drawer .trade-drawer-panel, dialog, .modal{ max-height:100dvh!important; } } /* ========================================================= ZEUS V261 · REAL MOBILE COMPONENTS V99 Schnellnavigation + V67 Handelschat ========================================================= */ @media(max-width:768px){ /* ======================================================= V99 MOBILE SCHNELLNAVIGATION ======================================================= */ #v99-mobile-drawer{ width:min(352px,calc(100vw - 12px))!important; max-width:calc(100vw - 12px)!important; height:100dvh!important; max-height:100dvh!important; box-sizing:border-box!important; overflow:hidden!important; overscroll-behavior:contain!important; } #v99-mobile-drawer .v99-drawer-head{ display:grid!important; grid-template-columns: minmax(0,1fr) 48px!important; align-items:center!important; gap:10px!important; width:100%!important; max-width:100%!important; padding: max(12px,env(safe-area-inset-top)) 12px 10px!important; box-sizing:border-box!important; } #v99-mobile-drawer .v99-drawer-head > div{ min-width:0!important; } #v99-mobile-drawer .v99-drawer-head strong{ display:block!important; max-width:100%!important; overflow-wrap:anywhere!important; } #v99-mobile-drawer .v99-drawer-head small{ display:block!important; max-width:100%!important; margin-top:2px!important; overflow-wrap:anywhere!important; } #v99-mobile-drawer .v99-drawer-close{ display:flex!important; align-items:center!important; justify-content:center!important; width:48px!important; height:48px!important; min-width:48px!important; min-height:48px!important; margin:0!important; padding:0!important; border-radius:11px!important; font-size:1.35rem!important; } /* Navigation scrollbar */ #v99-mobile-drawer .v99-drawer-nav{ width:100%!important; max-width:100%!important; min-width:0!important; height:calc( 100dvh - 72px - env(safe-area-inset-top) )!important; padding: 6px 10px max(18px,env(safe-area-inset-bottom))!important; box-sizing:border-box!important; overflow-x:hidden!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain!important; } #v99-mobile-drawer .v99-drawer-nav section{ width:100%!important; max-width:100%!important; min-width:0!important; margin:0 0 12px!important; padding:6px!important; box-sizing:border-box!important; } #v99-mobile-drawer .v99-drawer-nav h3{ width:100%!important; max-width:100%!important; margin: 0 0 5px!important; padding: 5px 7px!important; font-size:.73rem!important; overflow-wrap:anywhere!important; } #v99-mobile-drawer .v99-drawer-nav a{ display:grid!important; grid-template-columns: 32px minmax(0,1fr)!important; align-items:center!important; gap:8px!important; width:100%!important; max-width:100%!important; min-width:0!important; min-height:46px!important; margin:2px 0!important; padding: 8px 10px!important; box-sizing:border-box!important; white-space:normal!important; overflow-wrap:anywhere!important; border-radius:9px!important; } #v99-mobile-drawer .v99-drawer-nav a > span:first-child{ display:flex!important; align-items:center!important; justify-content:center!important; width:32px!important; min-width:32px!important; text-align:center!important; } /* ======================================================= V67 HANDELSCHAT ======================================================= */ #v67-chat-drawer{ width:100vw!important; max-width:100vw!important; height:100dvh!important; max-height:100dvh!important; box-sizing:border-box!important; overflow:hidden!important; } /* Kopf */ #v67-chat-drawer .v67-chat-head{ display:flex!important; align-items:center!important; width:100%!important; max-width:100%!important; min-width:0!important; gap:7px!important; padding: max(9px,env(safe-area-inset-top)) 9px 8px!important; box-sizing:border-box!important; } #v67-chat-drawer .v67-chat-head-copy{ flex:1 1 auto!important; width:auto!important; max-width:none!important; min-width:0!important; } #v67-chat-drawer #v67-chat-title{ display:block!important; max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #v67-chat-drawer #v67-chat-subtitle{ display:block!important; max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #v67-chat-drawer .v67-chat-icon-btn{ flex:0 0 44px!important; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; padding:0!important; } /* ======================================================= CHAT TABS ======================================================= */ #v67-chat-drawer #v682-chat-tabs{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; width:100%!important; max-width:100%!important; gap:6px!important; padding: 7px 10px!important; box-sizing:border-box!important; } #v67-chat-drawer #v682-chat-tabs > button{ width:100%!important; min-width:0!important; min-height:44px!important; padding: 7px 8px!important; white-space:normal!important; line-height:1.15!important; } /* Chat Status */ #v67-chat-drawer #v67-chat-status{ width:100%!important; max-width:100%!important; padding: 5px 10px!important; box-sizing:border-box!important; overflow-wrap:anywhere!important; } /* ======================================================= CHAT BODY ======================================================= */ #v67-chat-drawer .v67-chat-body{ width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; box-sizing:border-box!important; } #v67-chat-drawer #v67-chat-list{ width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; overflow-y:auto!important; box-sizing:border-box!important; } #v67-chat-drawer .v67-chat-empty{ width:calc(100% - 20px)!important; max-width:none!important; margin: 10px auto!important; padding: 16px 12px!important; box-sizing:border-box!important; text-align:center!important; } /* ======================================================= CHAT EINGABE ======================================================= */ #v67-chat-drawer #v67-chat-compose{ display:grid!important; grid-template-columns: minmax(0,1fr) auto!important; align-items:end!important; gap:7px!important; width:100%!important; max-width:100%!important; min-width:0!important; padding: 8px 10px max(9px,env(safe-area-inset-bottom))!important; box-sizing:border-box!important; } #v67-chat-drawer #v67-chat-input{ width:100%!important; max-width:none!important; min-width:0!important; min-height:46px!important; max-height:120px!important; margin:0!important; font-size:16px!important; resize:none!important; } #v67-chat-drawer #v67-chat-compose button{ min-width:72px!important; min-height:46px!important; margin:0!important; padding: 8px 11px!important; } /* ======================================================= GENERELL KEIN MOBILE DRAWER OVERFLOW ======================================================= */ #v99-mobile-drawer *, #v67-chat-drawer *{ max-width:100%; box-sizing:border-box; } } /* ========================================================= SEHR KLEINE HANDYS ========================================================= */ @media(max-width:390px){ #v99-mobile-drawer{ width:calc(100vw - 6px)!important; max-width:calc(100vw - 6px)!important; } #v99-mobile-drawer .v99-drawer-nav{ padding-left:6px!important; padding-right:6px!important; } #v67-chat-drawer .v67-chat-head{ gap:4px!important; padding-left:6px!important; padding-right:6px!important; } #v67-chat-drawer .v67-chat-icon-btn{ flex-basis:40px!important; width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; } #v67-chat-drawer #v682-chat-tabs{ padding-left:6px!important; padding-right:6px!important; } #v67-chat-drawer #v67-chat-compose{ padding-left:6px!important; padding-right:6px!important; } } /* ========================================================= ZEUS V262 · MOBILE RUNTIME CSS ========================================================= */ @media(max-width:900px){ /* * Wenn Chat / Schnellnavigation / Handel-Drawer geöffnet * ist, soll die Seite dahinter nicht mitscrollen. */ html.zeus-mobile-overlay-open, body.zeus-mobile-overlay-open{ overflow:hidden!important; overscroll-behavior:none!important; } /* ======================================================= ECHTE MOBILE HÖHE ======================================================= */ #v67-chat-drawer, #v99-mobile-drawer, #trade-drawer, #trade-drawer .trade-drawer-panel, dialog[open], .modal.is-open, .dialog.is-open{ max-height: var( --zeus-mobile-vh, 100dvh )!important; } #v67-chat-drawer{ height: var( --zeus-mobile-vh, 100dvh )!important; } #trade-drawer .trade-drawer-panel{ height: var( --zeus-mobile-vh, 100dvh )!important; } /* ======================================================= HANDELSCHAT + TASTATUR ======================================================= */ html.zeus-mobile-keyboard-open #v67-chat-drawer{ height: var( --zeus-mobile-vh, 100dvh )!important; max-height: var( --zeus-mobile-vh, 100dvh )!important; } html.zeus-mobile-keyboard-open #v67-chat-compose{ position:sticky!important; bottom:0!important; } html.zeus-mobile-keyboard-open #v67-chat-input{ font-size:16px!important; } /* ======================================================= FORMULARE + TASTATUR ======================================================= */ html.zeus-mobile-keyboard-open form.trade-dialog-shell{ max-height: var( --zeus-mobile-vh, 100dvh )!important; } html.zeus-mobile-keyboard-open input:focus, html.zeus-mobile-keyboard-open textarea:focus, html.zeus-mobile-keyboard-open select:focus{ scroll-margin-top:70px!important; scroll-margin-bottom:90px!important; } /* ======================================================= DRAWER ======================================================= */ #v99-mobile-drawer{ max-height: var( --zeus-mobile-vh, 100dvh )!important; } #v99-mobile-drawer .v99-drawer-nav{ max-height: calc( var( --zeus-mobile-vh, 100dvh ) - 70px )!important; } /* ======================================================= ALLGEMEINE OVERLAYS ======================================================= */ html.zeus-mobile-overlay-open .floating-actions, html.zeus-mobile-overlay-open .floating-buttons{ pointer-events:none!important; visibility:hidden!important; } } /* Landscape + kleine Höhe */ @media( max-width:900px ) and ( max-height:500px ){ #v99-mobile-drawer .v99-drawer-head{ padding-top:7px!important; padding-bottom:7px!important; } #v67-chat-drawer .v67-chat-head{ padding-top:6px!important; padding-bottom:6px!important; } } /* ========================================================= ZEUS V263 · MOBILE HANDELSCHAT FINAL Keine seitliche Öffnungsanimation / kein Overflow ========================================================= */ @media(max-width:900px){ /* * Sobald der Chat geöffnet ist, muss er exakt auf * dem Viewport liegen. * * Die alte Desktop-Slide-Animation erzeugte während * des Öffnens Werte wie left:75px / left:149px. */ #v67-chat-drawer.open{ position:fixed!important; top:0!important; left:0!important; right:auto!important; bottom:0!important; inset:0!important; width:100vw!important; max-width:100vw!important; height: var(--zeus-mobile-vh,100dvh)!important; max-height: var(--zeus-mobile-vh,100dvh)!important; margin:0!important; transform:none!important; translate:none!important; transition:none!important; animation:none!important; box-sizing:border-box!important; overflow:hidden!important; } /* * Alle Hauptbereiche müssen relativ zum Chat * beginnen und dürfen keine alten Desktop-Offets * mehr übernehmen. */ #v67-chat-drawer.open .v67-chat-head, #v67-chat-drawer.open #v682-chat-tabs, #v67-chat-drawer.open #v67-chat-status, #v67-chat-drawer.open .v67-chat-body, #v67-chat-drawer.open #v67-chat-list, #v67-chat-drawer.open #v67-chat-compose{ position:relative!important; left:0!important; right:auto!important; transform:none!important; translate:none!important; width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; } /* Chatliste */ #v67-chat-drawer.open .v67-chat-thread{ width:100%!important; max-width:100%!important; left:auto!important; right:auto!important; transform:none!important; box-sizing:border-box!important; } #v67-chat-drawer.open .v67-chat-thread-copy{ min-width:0!important; max-width:100%!important; } #v67-chat-drawer.open .v67-chat-thread-copy strong, #v67-chat-drawer.open .v67-chat-thread-copy > span{ display:block!important; max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } #v67-chat-drawer.open .v67-chat-thread-meta{ flex:0 0 auto!important; white-space:nowrap!important; } /* Eingabe */ #v67-chat-drawer.open #v67-chat-compose{ grid-template-columns: minmax(0,1fr) auto!important; } #v67-chat-drawer.open #v67-chat-input{ min-width:0!important; width:100%!important; } #v67-chat-drawer.open #v67-chat-compose button{ flex:0 0 auto!important; width:auto!important; min-width:72px!important; } } /* ========================================================= ZEUS V264 · CHAT SWIPE DELETE ========================================================= */ @media(max-width:900px){ #v67-chat-list .v264-swipe-row{ position:relative!important; width:100%!important; max-width:100%!important; margin: 0 0 6px!important; overflow:hidden!important; border-radius:12px!important; box-sizing:border-box!important; } #v67-chat-list .v264-swipe-row .v67-chat-thread{ position:relative!important; z-index:2!important; width:100%!important; max-width:100%!important; margin:0!important; touch-action:pan-y!important; will-change:transform!important; } #v67-chat-list .v264-swipe-delete-bg{ position:absolute!important; top:0!important; right:0!important; bottom:0!important; z-index:1!important; display:flex!important; align-items:center!important; justify-content:center!important; flex-direction:column!important; gap:2px!important; width:112px!important; background: linear-gradient( 135deg, #c73535, #8f1f1f )!important; color:#fff!important; pointer-events:none!important; } #v67-chat-list .v264-swipe-delete-bg span{ font-size:1.25rem!important; } #v67-chat-list .v264-swipe-delete-bg strong{ font-size:.72rem!important; color:#fff!important; } #v67-chat-list .v264-swipe-row.v264-removing{ opacity:0!important; transform: scale(.97)!important; transition: opacity .20s ease, transform .20s ease!important; } /* Rückgängig Hinweis */ .v264-chat-toast{ position:fixed!important; left:50%!important; bottom: max( 18px, env(safe-area-inset-bottom) )!important; z-index:2147483647!important; display:flex!important; align-items:center!important; gap:14px!important; width: min( 360px, calc(100vw - 20px) )!important; padding: 11px 13px!important; border: 1px solid rgba(212,175,55,.28)!important; border-radius:12px!important; background: rgba(12,15,22,.97)!important; box-shadow: 0 16px 36px rgba(0,0,0,.45)!important; opacity:0!important; transform: translate(-50%,18px)!important; transition: opacity .20s ease, transform .20s ease!important; } .v264-chat-toast.is-visible{ opacity:1!important; transform: translate(-50%,0)!important; } .v264-chat-toast span{ flex:1 1 auto!important; min-width:0!important; } .v264-chat-toast button{ flex:0 0 auto!important; min-height:38px!important; padding: 6px 10px!important; border-radius:8px!important; } } /* ========================================================= ZEUS V265 · HANDELSCHAT PAPIERKORB ========================================================= */ @media(max-width:900px){ #v265-chat-trash-toggle{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; width:calc(100% - 20px)!important; min-height:42px!important; margin: 6px 10px!important; padding: 8px 11px!important; border-radius:10px!important; font-size:.76rem!important; } #v265-chat-trash-toggle strong{ display:flex!important; align-items:center!important; justify-content:center!important; min-width:25px!important; height:25px!important; padding:0 6px!important; border-radius:999px!important; } #v265-chat-trash-panel{ width:calc(100% - 20px)!important; max-width:none!important; margin: 4px 10px 10px!important; padding:10px!important; border-radius:12px!important; box-sizing:border-box!important; } #v265-chat-trash-panel[hidden]{ display:none!important; } .v265-trash-head{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; margin-bottom:9px!important; } .v265-trash-head > div{ min-width:0!important; } .v265-trash-head strong, .v265-trash-head small{ display:block!important; } .v265-trash-head small{ margin-top:2px!important; opacity:.65!important; } #v265-trash-restore-all{ flex:0 0 auto!important; min-height:38px!important; padding: 6px 9px!important; border-radius:8px!important; font-size:.7rem!important; } .v265-trash-list{ display:grid!important; grid-template-columns:1fr!important; gap:6px!important; } .v265-trash-row{ display:grid!important; grid-template-columns: minmax(0,1fr) auto!important; align-items:center!important; gap:8px!important; width:100%!important; padding:9px!important; border-radius:9px!important; box-sizing:border-box!important; } .v265-trash-copy{ min-width:0!important; } .v265-trash-copy strong, .v265-trash-copy span{ display:block!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .v265-trash-copy span{ margin-top:2px!important; font-size:.72rem!important; opacity:.65!important; } .v265-trash-restore{ min-height:38px!important; padding: 6px 9px!important; white-space:nowrap!important; border-radius:8px!important; font-size:.7rem!important; } .v265-trash-empty{ padding:12px!important; text-align:center!important; opacity:.7!important; } } @media(max-width:430px){ .v265-trash-head{ align-items:stretch!important; flex-direction:column!important; } #v265-trash-restore-all{ width:100%!important; } .v265-trash-row{ grid-template-columns:1fr!important; } .v265-trash-restore{ width:100%!important; } } /* ========================================================= ZEUS V266 · SWIPE UX ========================================================= */ @media(max-width:900px){ .v266-swipe-hint{ display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; width:calc(100% - 12px)!important; margin: 4px 6px 9px!important; padding: 9px 11px!important; box-sizing:border-box!important; border-radius:10px!important; font-size:.72rem!important; opacity:0!important; transform: translateY(-5px)!important; transition: opacity .2s ease, transform .2s ease!important; } .v266-swipe-hint.is-visible{ opacity:.72!important; transform: translateY(0)!important; } .v266-swipe-hint span{ font-size:1.15rem!important; } /* * Noch nicht an der Löschschwelle. */ .v264-swipe-delete-bg strong::after{ content:""!important; } /* * Schwelle erreicht. */ .v264-swipe-row.v266-delete-ready .v264-swipe-delete-bg{ filter: brightness(1.16)!important; } .v264-swipe-row.v266-delete-ready .v264-swipe-delete-bg strong{ font-size:0!important; } .v264-swipe-row.v266-delete-ready .v264-swipe-delete-bg strong::after{ content:"Loslassen"!important; font-size:.72rem!important; } .v264-swipe-row.v266-delete-ready .v264-swipe-delete-bg span{ transform: scale(1.12)!important; transition: transform .15s ease!important; } } /* ========================================================= ZEUS V267 · CHAT PAPIERKORB FINAL ========================================================= */ @media(max-width:900px){ .v267-chat-hidden-count{ display:block!important; width:calc(100% - 20px)!important; margin: 2px 10px 6px!important; padding: 5px 9px!important; box-sizing:border-box!important; border-radius:8px!important; text-align:center!important; font-size:.68rem!important; opacity:.64!important; } .v267-chat-hidden-count[hidden]{ display:none!important; } .v265-trash-head{ display:grid!important; grid-template-columns: minmax(0,1fr) auto auto!important; align-items:center!important; gap:7px!important; } #v267-trash-clear, #v265-trash-restore-all{ min-height:38px!important; padding: 6px 9px!important; border-radius:8px!important; font-size:.68rem!important; white-space:nowrap!important; } #v267-trash-clear{ border-color: rgba(220,70,70,.36)!important; } .v267-toast{ position:fixed!important; left:50%!important; bottom: max( 18px, env(safe-area-inset-bottom) )!important; z-index:2147483647!important; width: min( 330px, calc(100vw - 20px) )!important; padding: 11px 13px!important; box-sizing:border-box!important; border-radius:11px!important; background: rgba(11,14,21,.97)!important; text-align:center!important; opacity:0!important; transform: translate(-50%,15px)!important; transition: opacity .2s ease, transform .2s ease!important; } .v267-toast.is-visible{ opacity:1!important; transform: translate(-50%,0)!important; } } @media(max-width:520px){ .v265-trash-head{ grid-template-columns:1fr!important; } #v267-trash-clear, #v265-trash-restore-all{ width:100%!important; } } /* ========================================================= ZEUS V268 · CHAT SUCHE + SORTIERUNG ========================================================= */ @media(max-width:900px){ #v268-chat-toolbar{ width:calc(100% - 20px)!important; margin: 7px 10px!important; box-sizing:border-box!important; } .v268-search{ position:relative!important; display:grid!important; grid-template-columns: 30px minmax(0,1fr) 38px!important; align-items:center!important; width:100%!important; min-height:46px!important; border-radius:11px!important; overflow:hidden!important; } .v268-search > span{ display:flex!important; align-items:center!important; justify-content:center!important; font-size:1.1rem!important; opacity:.65!important; } #v268-chat-search{ width:100%!important; min-width:0!important; height:46px!important; min-height:46px!important; margin:0!important; padding: 8px 5px!important; border:0!important; background:transparent!important; font-size:16px!important; outline:none!important; } #v268-chat-search-clear{ display:flex!important; align-items:center!important; justify-content:center!important; width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important; margin-right:4px!important; padding:0!important; border-radius:9px!important; font-size:1.15rem!important; } #v268-chat-search-clear[hidden]{ display:none!important; } .v268-chat-summary{ display:flex!important; align-items:center!important; min-height:28px!important; padding: 4px 6px!important; font-size:.68rem!important; opacity:.62!important; } #v67-chat-list .v268-search-hidden{ display:none!important; } #v268-chat-search-empty{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:4px!important; width:calc(100% - 16px)!important; margin: 12px 8px!important; padding: 22px 13px!important; box-sizing:border-box!important; border-radius:12px!important; text-align:center!important; } #v268-chat-search-empty strong{ display:block!important; } #v268-chat-search-empty span{ display:block!important; max-width:290px!important; font-size:.72rem!important; line-height:1.35!important; opacity:.65!important; } } /* ========================================================= ZEUS V269 · CHAT FILTER ========================================================= */ @media(max-width:900px){ #v269-chat-filters{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:6px!important; width:100%!important; margin-top:3px!important; } #v269-chat-filters button{ display:flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; width:100%!important; min-width:0!important; min-height:40px!important; padding: 6px 9px!important; border-radius:9px!important; } #v269-chat-filters button strong{ display:flex!important; align-items:center!important; justify-content:center!important; min-width:23px!important; height:23px!important; padding: 0 5px!important; border-radius:999px!important; font-size:.68rem!important; } #v269-chat-filters button.active{ border-color: rgba(212,175,55,.48)!important; background: rgba(212,175,55,.10)!important; } #v67-chat-list .v269-filter-hidden{ display:none!important; } #v269-chat-filter-empty{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:5px!important; width:calc(100% - 16px)!important; margin: 14px 8px!important; padding: 24px 13px!important; box-sizing:border-box!important; border-radius:12px!important; text-align:center!important; } #v269-chat-filter-empty strong{ font-size:.95rem!important; } #v269-chat-filter-empty span{ max-width:290px!important; font-size:.72rem!important; line-height:1.4!important; opacity:.65!important; } } /* ========================================================= ZEUS V270 · MOBILE CHATLISTE FINAL ========================================================= */ @media(max-width:900px){ /* ------------------------------------------------------- Suche + Filter kompakt zusammenhalten ------------------------------------------------------- */ #v268-chat-toolbar{ position:sticky!important; top:0!important; z-index:6!important; width:100%!important; max-width:100%!important; margin:0!important; padding:8px 10px 6px!important; box-sizing:border-box!important; backdrop-filter:blur(12px)!important; } /* ------------------------------------------------------- Chatliste ------------------------------------------------------- */ #v67-chat-list{ display:block!important; width:100%!important; max-width:100%!important; padding:7px 9px 14px!important; box-sizing:border-box!important; } #v67-chat-list .v264-swipe-row{ width:100%!important; max-width:100%!important; margin:0 0 7px!important; border-radius:12px!important; } /* ------------------------------------------------------- Einzelnes Gespräch ------------------------------------------------------- */ #v67-chat-list .v67-chat-thread{ display:grid!important; grid-template-columns: 48px minmax(0,1fr) auto!important; align-items:center!important; gap:10px!important; width:100%!important; max-width:100%!important; min-height:68px!important; margin:0!important; padding:9px 10px!important; box-sizing:border-box!important; border-radius:12px!important; text-align:left!important; overflow:hidden!important; } /* Avatar / Initiale */ #v67-chat-list .v67-chat-thread > :first-child{ min-width:0!important; } /* ------------------------------------------------------- Firma + letzte Nachricht ------------------------------------------------------- */ #v67-chat-list .v67-chat-thread-copy{ display:flex!important; flex-direction:column!important; justify-content:center!important; min-width:0!important; max-width:100%!important; gap:3px!important; } #v67-chat-list .v67-chat-thread-copy strong{ display:block!important; width:100%!important; max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; font-size:.88rem!important; line-height:1.2!important; } #v67-chat-list .v67-chat-thread-copy > span{ display:block!important; width:100%!important; max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; font-size:.74rem!important; line-height:1.25!important; opacity:.68!important; } /* ------------------------------------------------------- Datum rechts ------------------------------------------------------- */ #v67-chat-list .v67-chat-thread-meta{ display:flex!important; flex-direction:column!important; align-items:flex-end!important; justify-content:center!important; flex:0 0 auto!important; min-width:42px!important; max-width:62px!important; gap:4px!important; white-space:nowrap!important; font-size:.66rem!important; opacity:.62!important; } #v67-chat-list .v67-chat-thread-meta small{ white-space:nowrap!important; } /* ------------------------------------------------------- UNGELESEN deutlicher ------------------------------------------------------- */ #v67-chat-list .v67-chat-thread.unread, #v67-chat-list .v67-chat-thread[data-unread="1"], #v67-chat-list .v67-chat-thread:has(.v67-chat-unread){ border-color: rgba(212,175,55,.42)!important; background: linear-gradient( 135deg, rgba(212,175,55,.10), rgba(255,255,255,.025) )!important; } #v67-chat-list .v67-chat-thread.unread .v67-chat-thread-copy strong, #v67-chat-list .v67-chat-thread[data-unread="1"] .v67-chat-thread-copy strong, #v67-chat-list .v67-chat-thread:has(.v67-chat-unread) .v67-chat-thread-copy strong{ font-weight:800!important; } /* Ungelesen-Punkt */ #v67-chat-list .v67-chat-unread{ display:flex!important; align-items:center!important; justify-content:center!important; min-width:20px!important; height:20px!important; padding:0 5px!important; border-radius:999px!important; font-size:.63rem!important; font-weight:800!important; } /* ------------------------------------------------------- Suchfeld ------------------------------------------------------- */ .v268-search{ min-height:44px!important; border-radius:11px!important; } #v268-chat-search{ height:44px!important; min-height:44px!important; } /* ------------------------------------------------------- Alle / Ungelesen ------------------------------------------------------- */ #v269-chat-filters{ margin-top:6px!important; } #v269-chat-filters button{ min-height:40px!important; border-radius:10px!important; } /* ------------------------------------------------------- Papierkorb kompakter ------------------------------------------------------- */ #v265-chat-trash-toggle{ margin-top:4px!important; margin-bottom:5px!important; } /* ------------------------------------------------------- Swipe-Hintergrund ------------------------------------------------------- */ #v67-chat-list .v264-swipe-delete-bg{ width:116px!important; border-radius:12px!important; } /* ------------------------------------------------------- Berührungsfeedback ------------------------------------------------------- */ @media(hover:none){ #v67-chat-list .v67-chat-thread:active{ transform:scale(.985); } } } /* ========================================================= KLEINE HANDYS ========================================================= */ @media(max-width:390px){ #v67-chat-list{ padding-left:6px!important; padding-right:6px!important; } #v67-chat-list .v67-chat-thread{ grid-template-columns: 42px minmax(0,1fr) auto!important; gap:7px!important; min-height:64px!important; padding:8px!important; } #v67-chat-list .v67-chat-thread-meta{ min-width:36px!important; font-size:.62rem!important; } #v67-chat-list .v67-chat-thread-copy strong{ font-size:.84rem!important; } #v67-chat-list .v67-chat-thread-copy > span{ font-size:.70rem!important; } } /* ========================================================= ZEUS V271 · SWIPE FIX ========================================================= */ @media(max-width:900px){ #v67-chat-list .v264-swipe-row{ position:relative!important; width:100%!important; max-width:100%!important; overflow:hidden!important; touch-action:pan-y!important; } #v67-chat-list .v264-swipe-row .v67-chat-thread{ position:relative!important; z-index:2!important; width:100%!important; max-width:100%!important; /* * Vertikales Scrollen erlaubt, * horizontale Bewegung übernimmt JS. */ touch-action:pan-y!important; user-select:none!important; -webkit-user-select:none!important; will-change:transform!important; } #v67-chat-list .v264-swipe-delete-bg{ position:absolute!important; top:0!important; right:0!important; bottom:0!important; z-index:1!important; display:flex!important; width:120px!important; align-items:center!important; justify-content:center!important; flex-direction:column!important; pointer-events:none!important; } #v67-chat-list .v264-swipe-row.v266-delete-ready .v264-swipe-delete-bg{ filter:brightness(1.18)!important; } } /* ========================================================= ZEUS V272 · DELETE NUR BEIM WISCHEN SICHTBAR ========================================================= */ @media(max-width:900px){ /* * Normalzustand: * Papierkorb komplett unsichtbar. */ #v67-chat-list .v264-swipe-delete-bg{ opacity:0!important; transform: translateX(24px)!important; visibility:hidden!important; transition: opacity .14s ease, transform .14s ease!important; } /* * Erst wenn wirklich nach links gewischt wird. */ #v67-chat-list .v264-swipe-row.v272-swiping .v264-swipe-delete-bg{ opacity:1!important; transform: translateX(0)!important; visibility:visible!important; } /* * Schwelle erreicht: * deutlicher hervorheben. */ #v67-chat-list .v264-swipe-row.v266-delete-ready .v264-swipe-delete-bg{ opacity:1!important; visibility:visible!important; transform: translateX(0) scale(1.02)!important; filter: brightness(1.22)!important; } /* * Papierkorb selbst leicht animieren. */ #v67-chat-list .v264-swipe-delete-bg span{ opacity:0!important; transform: scale(.75)!important; transition: opacity .14s ease, transform .14s ease!important; } #v67-chat-list .v264-swipe-row.v272-swiping .v264-swipe-delete-bg span{ opacity:1!important; transform: scale(1)!important; } #v67-chat-list .v264-swipe-delete-bg strong{ opacity:0!important; transition: opacity .14s ease!important; } #v67-chat-list .v264-swipe-row.v272-swiping .v264-swipe-delete-bg strong{ opacity:1!important; } } /* ========================================================= ZEUS V272 · DELETE NUR BEIM WISCHEN SICHTBAR ========================================================= */ @media(max-width:900px){ /* * Normalzustand: * Papierkorb komplett unsichtbar. */ #v67-chat-list .v264-swipe-delete-bg{ opacity:0!important; transform: translateX(24px)!important; visibility:hidden!important; transition: opacity .14s ease, transform .14s ease!important; } /* * Erst wenn wirklich nach links gewischt wird. */ #v67-chat-list .v264-swipe-row.v272-swiping .v264-swipe-delete-bg{ opacity:1!important; transform: translateX(0)!important; visibility:visible!important; } /* * Schwelle erreicht: * deutlicher hervorheben. */ #v67-chat-list .v264-swipe-row.v266-delete-ready .v264-swipe-delete-bg{ opacity:1!important; visibility:visible!important; transform: translateX(0) scale(1.02)!important; filter: brightness(1.22)!important; } /* * Papierkorb selbst leicht animieren. */ #v67-chat-list .v264-swipe-delete-bg span{ opacity:0!important; transform: scale(.75)!important; transition: opacity .14s ease, transform .14s ease!important; } #v67-chat-list .v264-swipe-row.v272-swiping .v264-swipe-delete-bg span{ opacity:1!important; transform: scale(1)!important; } #v67-chat-list .v264-swipe-delete-bg strong{ opacity:0!important; transition: opacity .14s ease!important; } #v67-chat-list .v264-swipe-row.v272-swiping .v264-swipe-delete-bg strong{ opacity:1!important; } } /* ========================================================= ZEUS V274 · GELÖSCHTE CHATS SICHER VERSTECKEN ========================================================= */ @media(max-width:900px){ #v67-chat-list .v264-swipe-row[data-v274-hidden="1"], #v67-chat-list .v67-chat-thread[data-v274-hidden="1"]{ display:none!important; } } /* ========================================================= ZEUS V275 · SWIPE CORE ========================================================= */ @media(max-width:900px){ #v67-chat-list .v275-swipe-row{ position:relative!important; display:block; width:100%!important; max-width:100%!important; overflow:hidden!important; border-radius:12px!important; touch-action:pan-y!important; } #v67-chat-list .v275-swipe-row .v67-chat-thread{ position:relative!important; z-index:2!important; width:100%!important; max-width:100%!important; touch-action:pan-y!important; user-select:none!important; -webkit-user-select:none!important; will-change:transform!important; } /* * NORMAL: * kein Papierkorb sichtbar. */ #v67-chat-list .v275-delete-bg{ position:absolute!important; top:0!important; right:0!important; bottom:0!important; z-index:1!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; width:120px!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform: translateX(25px)!important; transition: opacity .12s ease, transform .12s ease!important; } /* * Erst während des Wischens. */ #v67-chat-list .v275-swipe-row.v275-swiping .v275-delete-bg{ opacity:1!important; visibility:visible!important; transform: translateX(0)!important; } /* * Löschschwelle erreicht. */ #v67-chat-list .v275-swipe-row.v275-ready .v275-delete-bg{ opacity:1!important; visibility:visible!important; filter: brightness(1.22)!important; } .v275-trash-icon{ font-size:1.25rem!important; } .v275-delete-text{ font-size:.70rem!important; font-weight:800!important; } #v67-chat-list .v275-swipe-row.v275-ready .v275-trash-icon{ transform: scale(1.12)!important; } .v275-removing{ opacity:0!important; transform: scale(.97)!important; transition: opacity .18s ease, transform .18s ease!important; } /* Rückgängig */ .v275-undo-toast{ position:fixed!important; left:50%!important; bottom: max( 18px, env(safe-area-inset-bottom) )!important; z-index:2147483647!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:14px!important; width: min( 360px, calc(100vw - 20px) )!important; padding: 11px 13px!important; box-sizing:border-box!important; border-radius:12px!important; opacity:0!important; transform: translate(-50%,16px)!important; transition: opacity .18s ease, transform .18s ease!important; } .v275-undo-toast.show{ opacity:1!important; transform: translate(-50%,0)!important; } .v275-undo-toast span{ flex:1!important; min-width:0!important; } .v275-undo-toast button{ flex:0 0 auto!important; min-height:38px!important; padding: 6px 10px!important; } } /* ========================================================= ZEUS V276 · KEINE AUSGEBLENDETEN GESPRÄCHE MEHR ========================================================= */ #v265-chat-trash-toggle, #v265-chat-trash-panel, #v267-chat-hidden-count, .v264-chat-toast, .v275-undo-toast{ display:none!important; } /* * Alte V274 Hidden-Markierungen dürfen * keine Gespräche mehr verstecken. */ #v67-chat-list .v264-swipe-row[data-v274-hidden="1"], #v67-chat-list .v67-chat-thread[data-v274-hidden="1"]{ display:block!important; } /* ========================================================= ZEUS V280 · HANDELSANFRAGE MILLIONEN-MENGEN ========================================================= */ #rq-amount.v280-request-amount-backend{ position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; overflow:hidden!important; } .v280-request-amount-display{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; }