/* ============================================================================ GEARSYNC PRO – CSS BLOCK-REGISTER (Stufe 1: reine Dokumentation, 11.07.2026) ---------------------------------------------------------------------------- Diese Liste ist nur ein Inhaltsverzeichnis, sie aendert kein Verhalten. Vollstaendige Beschreibung: siehe GearSync_Block_Register.md ---------------------------------------------------------------------------- 1- 1815 gs-css-grundgeruest 1816- 1822 gs-v39-v45-settings-legal-pages-css 1823- 1871 gs-v103-value-badge-hardware-katalog-css 1872- 1919 gs-v106-koffer-select-info-dialog-css 1920- 1923 gs-portfolio-history-v124-css 1924- 2157 gs-ab-mobile-fix-v129 2158- 2214 gs-cross-nav-v131-css 2215- 2235 gs-v1-3-14-repair-clean-css 2236- 2264 gs-v141-onboarding-registrierung-css 2265- 2288 gs-v1-4-3-auth-loading-css 2289- 2358 gs-v1-4-5-register-design-fix-css 2359- 2372 gs-v6-polish-patch-css 2373- 2394 gs-v22-compat-stabilisierung-css 2395- 2401 gs-v24-compat-ohne-pruefen-button-css 2402- 2453 gs-v128-ab-vergleich-kaufentscheidung-css 2454- 2458 gs-v26-ab-vergleich-eigene-seite-css 2459- 2581 gs-v31-finales-menue-css 2582- 2592 gs-v33-inventory-icon-final-fix 2593- 2612 gs-v58-cases-auth-ui-fix-css 2613- 2628 gs-v67-language-settings-css 2629- 2634 gs-v86-language-currency-css 2635- 2828 gs-v89-rc20-ui-polish-safe 2829- 2845 gs-v90-release-shell-polish 2846- 2852 gs-v104-inventory-patch-style 2853- 2865 gs-phase2-case-archive-style 2866- 2872 gs-v111-archive-settings-style 2873- 2891 gs-v114-case-checklist-style 2892- 2894 gs-loan-system-v126-css 2895- 2897 gs-business-finance-v127-css 2898- 2965 gs-v132-koffer-polish-css 2966- 2972 gs-v1-4-2-onboarding-devtools-css 2973- 3009 gs-v1-4-4-ux-stabilisierung-css 3010- 3089 gearsync-v49-accessory-mobile-layout-fix 3090- 3130 gs-v88-performance-safe-css 3131- 3154 gs-v112-archive-ui-fix-style 3155- 3235 gs-v116-dashboard-usage-capture-style 3236- 3264 gs-v122-flight-baggage-clean-style 3265- 3267 gs-portfolio-v125-fix-css 3268- 3273 gs-v130-inventory-polish-loan-overview-css 3274- 3330 gs-v132-koffer-polish-css 3331- 3359 gs-v11313-critical-fix-css 3360- 3363 gs-v1-3-16-navigation-compat-fix-css 3364- 3420 gs-v133-koffer-mobile-fix-css 3421- 3428 gs-v134-usage-grip-fix-css 3429- 3445 gs-v1311-hotfix-css ============================================================================ */ /* ===== Block: gs-css-grundgeruest ===== */ /* ========================================================================== 🎨 ABSCHNITT 1: DESIGN-SYSTEM & SYSTEMFARBEN ========================================================================== */ :root { --bg-primary: #090d16; --bg-secondary: #131c2e; --bg-card: #1e293b; --bg-input: #0f172a; --text-main: #f8fafc; --text-muted: #94a3b8; --brand-color: #3b82f6; --brand-hover: #2563eb; --danger: #ef4444; --success: #10b981; --border-color: #334155; --sidebar-width: 300px; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, sans-serif; } body { background-color: var(--bg-primary); color: var(--text-main); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* ========================================================================== 📱 ABSCHNITT 2: NAVIGATION & NAVBAR DESIGN ========================================================================== */ .navbar { background-color: var(--bg-secondary); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 150; } .logo { font-size: 1.4rem; font-weight: 800; cursor: pointer; } .logo span { color: var(--brand-color); } .hamburger-btn { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 0.5rem; z-index: 210; } .hamburger-btn span { display: block; width: 28px; height: 3px; background-color: var(--text-main); transition: all 0.3s ease; } .hamburger-btn.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .hamburger-btn.open span:nth-child(2) { opacity: 0; } .hamburger-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -7px); } /* ========================================================================== 🍔 ABSCHNITT 3: SEITEN-MENÜ (SIDEBAR STYLE) ========================================================================== */ .sidebar { position: fixed; top: 0; left: calc(-1 * var(--sidebar-width)); width: var(--sidebar-width); height: 100%; background-color: var(--bg-secondary); border-right: 1px solid var(--border-color); z-index: 200; transition: left 0.3s; padding-top: 5rem; } .sidebar.open { left: 0; } .menu-list { list-style: none; padding: 0 1rem; } .menu-item { padding: 1rem; color: var(--text-muted); font-size: 0.95rem; cursor: pointer; border-radius: 8px; margin-bottom: 0.5rem; transition: all 0.2s; } .menu-item:hover, .menu-item.active { color: var(--text-main); background-color: var(--bg-card); } .menu-item.active { border-left: 4px solid var(--brand-color); border-radius: 0 8px 8px 0; } /* ========================================================================== 🔐 ABSCHNITT 4: REGISTRIERUNG- UND LOGIN-MASKE DESIGN ========================================================================== */ .main-content { flex-grow: 1; max-width: 1300px; width: 100%; margin: 0 auto; padding: 2.5rem 1.5rem; } .view-section { display: none; } .view-section.active { display: block; } .cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; max-width: 900px; margin: 0 auto; } .cta-btn { background-color: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); padding: 1.2rem; border-radius: 12px; cursor: pointer; text-align: center; font-weight: 600; transition: all 0.2s; } .cta-btn:hover { border-color: var(--brand-color); transform: translateY(-2px); } .search-container { background-color: var(--bg-secondary); padding: 2rem; border-radius: 12px; margin-bottom: 2rem; border: 1px solid var(--border-color); } .category-tabs { display: flex; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; } .tab-btn { background-color: var(--bg-input); color: var(--text-muted); padding: 0.75rem 1.5rem; border-radius: 8px; cursor: pointer; border: 1px solid var(--border-color); font-weight: 600; } .tab-btn.active { background-color: var(--brand-color); color: var(--text-main); border-color: var(--brand-color); } .subcategory-panel { display: none; gap: 0.75rem; padding: 0.75rem; background-color: var(--bg-input); border-radius: 8px; margin-bottom: 1.5rem; } .sub-tab-btn { background-color: var(--bg-card); padding: 0.5rem 1rem; border-radius: 6px; color: var(--text-muted); cursor: pointer; border: 1px solid var(--border-color); } .sub-tab-btn.active { border-color: var(--brand-color); color: var(--brand-color); } .main-search-input { width: 100%; padding: 1rem; background-color: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 8px; } .catalog-group-wrap { display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; } .catalog-brand-group, .catalog-mount-group { border:1px solid var(--border-color); border-radius:18px; overflow:hidden; background:rgba(31,31,33,.72); } .catalog-brand-summary, .catalog-mount-summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; font-weight:900; color:var(--text-main); } .catalog-brand-summary::-webkit-details-marker, .catalog-mount-summary::-webkit-details-marker { display:none; } .catalog-brand-summary { font-size:1.05rem; background:linear-gradient(135deg, rgba(0,196,106,.13), rgba(255,255,255,.02)); } .catalog-mount-summary { font-size:.95rem; background:rgba(255,255,255,.035); color:var(--text-muted); } .catalog-count-badge { font-size:.75rem; color:#08130D; background:var(--brand-color); border-radius:999px; padding:.25rem .6rem; white-space:nowrap; } .catalog-group-content { padding:1rem; } .catalog-mount-group + .catalog-mount-group { margin-top:.75rem; } .catalog-group-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; } .catalog-card-img { width:100%; height:150px; border-radius:14px; background-image:url('images/bg-quer.jpg'); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:.9rem; position:relative; } .catalog-card-img::after{ content:""; position:absolute; inset:8px; pointer-events:none; background: linear-gradient(to right, rgba(255,255,255,.28) 1.5px, transparent 1.5px) top left / 11px 1.5px no-repeat, linear-gradient(to bottom, rgba(255,255,255,.28) 1.5px, transparent 1.5px) top left / 1.5px 11px no-repeat, linear-gradient(to left, rgba(255,255,255,.28) 1.5px, transparent 1.5px) top right / 11px 1.5px no-repeat, linear-gradient(to bottom, rgba(255,255,255,.28) 1.5px, transparent 1.5px) top right / 1.5px 11px no-repeat, linear-gradient(to right, rgba(255,255,255,.28) 1.5px, transparent 1.5px) bottom left / 11px 1.5px no-repeat, linear-gradient(to top, rgba(255,255,255,.28) 1.5px, transparent 1.5px) bottom left / 1.5px 11px no-repeat, linear-gradient(to left, rgba(255,255,255,.28) 1.5px, transparent 1.5px) bottom right / 11px 1.5px no-repeat, linear-gradient(to top, rgba(255,255,255,.28) 1.5px, transparent 1.5px) bottom right / 1.5px 11px no-repeat; } .catalog-card-img img { width:100%; height:100%; object-fit:contain; display:block; position:relative; z-index:1; padding:.8rem; box-sizing:border-box; } .catalog-spec-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:.8rem 0 1rem; } .catalog-spec-pill { background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:.55rem .65rem; min-width:0; } .catalog-spec-label { color:var(--text-muted); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.03em; display:block; margin-bottom:.18rem; } .catalog-spec-value { color:var(--text-main); font-size:.92rem; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .catalog-chevron { color:var(--brand-color); transition:transform .2s ease; } details[open] > summary .catalog-chevron { transform:rotate(90deg); } .catalog-brand-group[open] > .catalog-brand-summary .catalog-chevron, .catalog-mount-group[open] > .catalog-mount-summary .catalog-chevron { transform: rotate(90deg) !important; display:inline-block; } .results-catalog, .gear-grid, .preset-grid, .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .catalog-card, .gear-card, .preset-card, .stats-card { background-color: var(--bg-secondary); border-radius: 12px; padding: 1.5rem; border: 1px solid var(--border-color); } .inventory-section { margin-bottom: 2.25rem; } .inventory-section-title { display:flex; align-items:center; gap:0.75rem; color:var(--brand-color); margin:0 0 1rem 0; font-size:1.25rem; } .inventory-category-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:1.25rem; } .gear-card-modern { background: linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.95)); border:1px solid var(--border-color); border-radius:16px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.18); } .gear-card-modern-header { padding:1rem 1.15rem; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; } .gear-title { font-size:1rem; font-weight:800; line-height:1.25; } .gear-brand { color:var(--text-muted); font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.25rem; } .gear-chip { font-size:0.72rem; color:var(--brand-color); background:rgba(59,130,246,0.13); border:1px solid rgba(59,130,246,0.35); padding:0.3rem 0.5rem; border-radius:999px; white-space:nowrap; } .gear-card-modern-body { padding:1rem 1.15rem; } .gear-spec-grid { display:grid; grid-template-columns: 1fr 1fr; gap:0.65rem; } .gear-spec { background:rgba(15,23,42,0.8); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:0.65rem; min-height:58px; } .gear-spec-label { color:var(--text-muted); font-size:0.7rem; font-weight:700; text-transform:uppercase; margin-bottom:0.25rem; } .gear-spec-value { color:var(--text-main); font-weight:800; font-size:0.95rem; } .edit-gear-btn { background:transparent; color:var(--brand-color); border:1px solid var(--brand-color); border-radius:8px; padding:0.6rem 0.8rem; cursor:pointer; font-weight:700; width:100%; margin-top:1rem; } .add-gear-btn { background-color: var(--brand-color); color: var(--text-main); padding: 0.75rem; border: none; border-radius: 6px; width: 100%; cursor: pointer; margin-top: 1rem; font-weight: 600; } .gear-card-banner { height: 120px; background: linear-gradient(45deg, #1e293b 0%, #334155 100%); padding: 1.2rem; display: flex; justify-content: space-between; border-radius: 12px 12px 0 0; margin: -1.5rem -1.5rem 1.5rem -1.5rem; } .purchase-box { background-color: var(--bg-input); padding: 0.85rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.85rem; border: 1px solid var(--border-color); } .purchase-row { display: flex; justify-content: space-between; margin-bottom: 0.25rem; } .edit-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 300; } .edit-modal { background: var(--bg-secondary); border-radius: 16px; width: 100%; max-width: 550px; padding: 2rem; max-height: 90vh; overflow-y: auto; border: 1px solid var(--border-color); } .form-group { margin-bottom: 1rem; } .form-control { width: 100%; padding: 0.75rem; background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 6px; } /* Bugfix: native Zahlen-Spinner-Pfeile passen optisch nicht zum dunklen UI (z.B. Mengenfeld im Koffer-Zubehör) */ input[type="number"].form-control{ -moz-appearance:textfield; appearance:textfield; } input[type="number"].form-control::-webkit-inner-spin-button, input[type="number"].form-control::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; } .form-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .modal-footer { display: flex; justify-content: space-between; margin-top: 1.5rem; } .btn-save { background: var(--success); color: white; padding: 0.75rem 1.5rem; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; } .btn-delete { background: var(--danger); color: white; padding: 0.75rem 1.2rem; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; } .btn-cancel { background: transparent; color: var(--text-muted); border: 1px solid var(--border-color); padding: 0.75rem; border-radius: 6px; cursor: pointer; } .btn-custom-add { background: var(--bg-secondary); color: var(--brand-color); border: 2px dashed var(--brand-color); padding: 0.6rem 1.2rem; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; } .btn-mini-plus { background: var(--bg-input); color: var(--brand-color); border: 1px dashed var(--brand-color); padding: 0.45rem 0.75rem; border-radius: 8px; cursor: pointer; font-weight: 700; width: 100%; margin-top: 0.5rem; } .planer-tab-nav { display: flex; gap: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 2rem; } .p-tab-btn { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; } .p-tab-btn.active { background: var(--bg-card); color: var(--brand-color); } .planer-layout { display: grid; grid-template-columns: 1fr 400px; gap: 2rem; } @media (max-width: 968px) { .planer-layout { grid-template-columns: 1fr; } } .planer-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; } .planer-row-select { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; margin-bottom: 1rem; align-items: center; } .dashboard-box { background: linear-gradient(135deg, #1e293b, #0f172a); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--border-color); } .dashboard-own { border: 2px solid var(--brand-color); } .dashboard-wish { border: 2px solid #a855f7; } .dashboard-metric { font-size: 1.8rem; font-weight: 800; margin: 0.5rem 0; } .ampel-indicator { padding: 0.5rem; border-radius: 6px; text-align: center; margin-top: 1rem; font-weight: bold; font-size: 0.8rem; } .ampel-green { background: rgba(16,185,129,0.2); color: var(--success); border: 1px solid var(--success); } .ampel-yellow { background: rgba(234,179,8,0.2); color: #eab308; border: 1px solid #eab308; } .ampel-red { background: rgba(239,68,68,0.2); color: var(--danger); border: 1px solid var(--danger); } .ampel-neutral { background: var(--bg-input); color: var(--text-muted); border: 1px dashed var(--border-color); } .preset-list { list-style: none; margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--text-muted); } .preset-list li { padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .checkbox-group { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-muted); } /* Fortschrittsbalken für Auslastung */ .progress-bar-bg { width: 100%; background-color: var(--bg-input); height: 10px; border-radius: 5px; margin-top: 0.5rem; overflow: hidden; } .progress-bar-fill { background-color: var(--brand-color); height: 100%; border-radius: 5px; transition: width 0.4s; } .toast { position: fixed; bottom: 20px; right: 20px; background: var(--brand-color); color: white; padding: 1rem; border-radius: 8px; display: none; z-index: 400; } .financial-table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .financial-table th, .financial-table td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; } .financial-table th { color: var(--text-muted); font-weight: 600; } /* GearSync Modern Theme */ body{ background:#111111 !important; font-family: Inter, system-ui, sans-serif !important; } .header,.topbar{ background:#171717 !important; border-bottom:1px solid rgba(255,255,255,.06) !important; } .card,.catalog-card,.gear-card-modern,.preset-card,.stats-card,.panel{ background:#1C1C1E !important; border:1px solid rgba(255,255,255,.05) !important; box-shadow:0 10px 30px rgba(0,0,0,.25) !important; } button.active, .tab-btn.active, .sub-tab-btn.active{ background:#00C46A !important; color:#111 !important; border-color:#00C46A !important; } .catalog-card, .gear-card-modern{ border-radius:18px !important; } input,select{ background:#171717 !important; border:1px solid rgba(255,255,255,.08) !important; } .inventory-section-title, h1,h2,h3, .brand-accent{ color:#00C46A !important; } /* ========================================================================== GearSync Pro – Premium UI Upgrade ========================================================================== */ :root{ --bg-primary:#101010; --bg-secondary:#171717; --bg-card:#1F1F21; --bg-input:#151515; --text-main:#F5F5F5; --text-muted:#9CA3AF; --brand-color:#00C46A; --brand-hover:#00B368; --danger:#EF4444; --success:#00C46A; --border-color:rgba(255,255,255,.075); } body{ background: radial-gradient(circle at top left, rgba(0,196,106,.09), transparent 32%), radial-gradient(circle at top right, rgba(255,255,255,.035), transparent 24%), #101010 !important; letter-spacing:-0.01em; } .navbar{ background:rgba(18,18,18,.82) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom:1px solid rgba(255,255,255,.06) !important; padding:1.1rem 2rem !important; } .logo{ font-size:1.55rem !important; letter-spacing:-0.045em; } .logo span{ color:var(--brand-color) !important; } .sidebar{ background:rgba(18,18,18,.96) !important; backdrop-filter:blur(20px); border-right:1px solid rgba(255,255,255,.06) !important; } .menu-item{ border-radius:14px !important; font-weight:700; } .menu-item:hover, .menu-item.active{ background:rgba(255,255,255,.06) !important; color:#fff !important; } .menu-item.active{ border-left:none !important; box-shadow: inset 0 0 0 1px rgba(0,196,106,.25); } .main-content{ max-width:1380px !important; } .search-container, .planer-box, .dashboard-box, .catalog-card, .preset-card, .stats-card, .gear-card-modern{ background:rgba(31,31,33,.82) !important; border:1px solid rgba(255,255,255,.075) !important; box-shadow:0 18px 50px rgba(0,0,0,.28) !important; backdrop-filter:blur(14px); } .search-container, .planer-box, .dashboard-box, .catalog-card, .preset-card, .gear-card-modern{ border-radius:22px !important; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .catalog-card:hover, .preset-card:hover, .gear-card-modern:hover{ transform:translateY(-3px); border-color:rgba(0,196,106,.28) !important; box-shadow:0 24px 60px rgba(0,0,0,.35) !important; } .category-tabs, .planer-tab-nav{ border-bottom:1px solid rgba(255,255,255,.08) !important; gap:.75rem !important; flex-wrap:wrap; } .tab-btn, .sub-tab-btn, .p-tab-btn, .cta-btn{ border-radius:999px !important; border:1px solid rgba(255,255,255,.08) !important; background:#151515 !important; color:#A3A3A3 !important; font-weight:800 !important; } .tab-btn.active, .sub-tab-btn.active, .p-tab-btn.active{ background:#00C46A !important; color:#08130D !important; border-color:#00C46A !important; box-shadow:0 10px 28px rgba(0,196,106,.22); } .form-control, .main-search-input{ border-radius:16px !important; background:#141414 !important; border:1px solid rgba(255,255,255,.09) !important; color:#F5F5F5 !important; min-height:46px; } .form-control:focus, .main-search-input:focus{ outline:none; border-color:rgba(0,196,106,.7) !important; box-shadow:0 0 0 4px rgba(0,196,106,.12); } .add-gear-btn, .btn-save{ border-radius:14px !important; background:#00C46A !important; color:#08130D !important; font-weight:900 !important; box-shadow:0 12px 28px rgba(0,196,106,.2); } .add-gear-btn:hover, .btn-save:hover{ background:#00B368 !important; } .btn-custom-add, .btn-mini-plus, .edit-gear-btn{ border-radius:14px !important; border:1px dashed rgba(0,196,106,.7) !important; background:rgba(0,196,106,.06) !important; color:#00C46A !important; } .btn-delete{ border-radius:14px !important; } .planer-layout{ align-items:start; } .planer-row-select{ grid-template-columns:120px 1fr !important; } .planer-row-select label{ color:#D4D4D8; font-weight:800; } .dashboard-box{ position:relative; overflow:hidden; } .dashboard-box::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,196,106,.10), transparent 44%); pointer-events:none; } .dashboard-own, .dashboard-wish{ border:1px solid rgba(0,196,106,.34) !important; } .dashboard-wish{ border-color:rgba(0,196,106,.22) !important; } .dashboard-metric{ font-size:2.15rem !important; letter-spacing:-0.055em; } .ampel-indicator{ border-radius:14px !important; padding:.8rem 1rem !important; } .ampel-green{ background:rgba(0,196,106,.11) !important; border:1px solid rgba(0,196,106,.55) !important; color:#00E07A !important; } .ampel-yellow{ background:rgba(245,158,11,.11) !important; } .ampel-red{ background:rgba(239,68,68,.11) !important; } .inventory-section{ margin-bottom:2.75rem !important; } .inventory-section-title{ color:#F5F5F5 !important; font-size:1.2rem !important; letter-spacing:-0.03em; } .gear-card-modern-header{ background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,0)); } .gear-chip{ background:rgba(0,196,106,.10) !important; color:#00C46A !important; border-color:rgba(0,196,106,.25) !important; } .gear-spec{ background:#151515 !important; border:1px solid rgba(255,255,255,.065) !important; border-radius:14px !important; } .gear-spec-label{ color:#8F8F96 !important; } .gear-spec-value{ color:#F5F5F5 !important; } .financial-table th, .financial-table td{ border-bottom:1px solid rgba(255,255,255,.06) !important; } .toast{ background:#00C46A !important; color:#08130D !important; border-radius:16px !important; font-weight:900; } @media (max-width:768px){ .catalog-card{ padding:1rem !important; } .catalog-card-img{ height:135px !important; } .catalog-spec-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.5rem !important; } .catalog-spec-value{ font-size:.88rem !important; } .catalog-group-wrap{ gap:.85rem !important; } .catalog-brand-summary{ padding:1rem !important; font-size:1rem !important; } .catalog-mount-summary{ padding:.85rem 1rem !important; } .catalog-group-content{ padding:.75rem !important; } .catalog-group-cards{ grid-template-columns:1fr !important; gap:.85rem !important; } .navbar{ padding:1rem 1.25rem !important; } .logo{ font-size:1.35rem !important; } .main-content{ padding:2rem 1rem !important; } .planer-row-select{ grid-template-columns:1fr !important; gap:.5rem !important; } .dashboard-metric{ font-size:1.8rem !important; } .category-tabs{ justify-content:center; } } /* ========================================================================== GearSync Dashboard + Product Cards + Transport Check ========================================================================== */ .dashboard-hero{ display:grid; grid-template-columns: 1.4fr .9fr; gap:1.5rem; margin-bottom:2rem; } .dashboard-main-card{ background:linear-gradient(135deg, rgba(0,196,106,.16), rgba(31,31,33,.9) 42%, rgba(31,31,33,.82)); border:1px solid rgba(0,196,106,.22); border-radius:28px; padding:2rem; box-shadow:0 24px 70px rgba(0,0,0,.34); } .dashboard-main-card h1{ color:#F5F5F5 !important; font-size:2.25rem; letter-spacing:-.06em; margin-bottom:.6rem; } .dashboard-main-card p{ color:var(--text-muted); max-width:760px; line-height:1.55; } .dashboard-quick-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; } .dashboard-action-btn{ background:#00C46A; color:#08130D; border:0; border-radius:999px; padding:.85rem 1.15rem; cursor:pointer; font-weight:900; } .dashboard-action-btn.secondary{ background:rgba(255,255,255,.06); color:#F5F5F5; border:1px solid rgba(255,255,255,.08); } .dashboard-side-card{ background:rgba(31,31,33,.82); border:1px solid rgba(255,255,255,.075); border-radius:28px; padding:1.5rem; box-shadow:0 18px 50px rgba(0,0,0,.28); } .dashboard-stat-grid{ display:grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap:1rem; margin-bottom:2rem; } .dashboard-stat-card{ background:rgba(31,31,33,.82); border:1px solid rgba(255,255,255,.075); border-radius:22px; padding:1.2rem; box-shadow:0 16px 42px rgba(0,0,0,.25); } .dashboard-stat-label{ color:var(--text-muted); font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; } .dashboard-stat-value{ margin-top:.35rem; font-size:1.65rem; font-weight:950; letter-spacing:-.05em; } .dashboard-section-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; } .dashboard-mini-list{ list-style:none; margin-top:1rem; } .dashboard-mini-list li{ display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.06); color:#F5F5F5; } .dashboard-mini-list span{ color:var(--text-muted); } .product-card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1.25rem; } .product-card{ background:rgba(31,31,33,.86); border:1px solid rgba(255,255,255,.075); border-radius:26px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.28); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .product-card:hover{ transform:translateY(-3px); border-color:rgba(0,196,106,.28); box-shadow:0 26px 70px rgba(0,0,0,.36); } .product-image{ height:170px; background-image:url('images/bg-quer.jpg'); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; } /* gs-cat-bg-corners-v1: adaptive Ecken-Klammern, reines CSS, keine extra Bilddatei/Markup noetig */ .product-image::after{ content:""; position:absolute; inset:9px; pointer-events:none; background: linear-gradient(to right, rgba(255,255,255,.28) 1.5px, transparent 1.5px) top left / 11px 1.5px no-repeat, linear-gradient(to bottom, rgba(255,255,255,.28) 1.5px, transparent 1.5px) top left / 1.5px 11px no-repeat, linear-gradient(to left, rgba(255,255,255,.28) 1.5px, transparent 1.5px) top right / 11px 1.5px no-repeat, linear-gradient(to bottom, rgba(255,255,255,.28) 1.5px, transparent 1.5px) top right / 1.5px 11px no-repeat, linear-gradient(to right, rgba(255,255,255,.28) 1.5px, transparent 1.5px) bottom left / 11px 1.5px no-repeat, linear-gradient(to top, rgba(255,255,255,.28) 1.5px, transparent 1.5px) bottom left / 1.5px 11px no-repeat, linear-gradient(to left, rgba(255,255,255,.28) 1.5px, transparent 1.5px) bottom right / 11px 1.5px no-repeat, linear-gradient(to top, rgba(255,255,255,.28) 1.5px, transparent 1.5px) bottom right / 1.5px 11px no-repeat; } .product-image img{ width:100%; height:100%; object-fit:contain; padding:1.25rem; position:relative; z-index:1; } .product-image-placeholder{ font-size:3.4rem; opacity:.9; filter:drop-shadow(0 12px 24px rgba(0,0,0,.35)); position:relative; z-index:1; } .product-card-body{ padding:1.1rem; } .product-eyebrow{ color:#00C46A; font-size:.74rem; font-weight:950; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.35rem; } .product-title{ font-size:1.1rem; font-weight:950; letter-spacing:-.035em; line-height:1.25; min-height:2.75rem; } .product-spec-row{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:1rem; } .product-spec-pill{ background:#151515; border:1px solid rgba(255,255,255,.065); border-radius:14px; padding:.65rem; } .product-spec-pill small{ display:block; color:var(--text-muted); font-size:.68rem; font-weight:900; text-transform:uppercase; margin-bottom:.25rem; } .product-spec-pill b{ font-size:.92rem; } .transport-check{ margin-top:1rem; display:grid; gap:.65rem; } .transport-check-item{ display:flex; justify-content:space-between; align-items:center; gap:1rem; background:#151515; border:1px solid rgba(255,255,255,.065); border-radius:16px; padding:.85rem 1rem; } .transport-check-status{ font-weight:950; white-space:nowrap; } .transport-ok{ color:#00E07A; } .transport-warn{ color:#F59E0B; } .transport-bad{ color:#EF4444; } @media(max-width:968px){ .dashboard-hero, .dashboard-section-grid{ grid-template-columns:1fr; } .dashboard-stat-grid{ grid-template-columns: repeat(2, minmax(140px, 1fr)); } } @media(max-width:520px){ .dashboard-stat-grid{ grid-template-columns:1fr; } } /* GearSync Utility Modules */ .details-toggle{width:100%;margin-top:.75rem;background:#151515;border:1px solid rgba(255,255,255,.07);color:#F5F5F5;border-radius:16px;padding:.85rem 1rem;cursor:pointer;font-weight:950;display:flex;justify-content:space-between;align-items:center} .details-panel{display:none;margin-top:.75rem;background:#151515;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:1rem} .details-panel.open{display:block} .clean-list{list-style:none;margin-top:.75rem} .clean-list li{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.06)} .clean-list span{color:var(--text-muted)} .notice-box{background:rgba(245,158,11,.11);border:1px solid rgba(245,158,11,.35);color:#F59E0B;border-radius:16px;padding:.85rem 1rem;margin-top:.85rem;font-weight:800} /* Eigene Kategorien */ .type-plus-row{ display:grid; grid-template-columns:1fr 46px; gap:.5rem; align-items:end; } .btn-category-plus{ height:46px; border-radius:14px; border:1px dashed rgba(0,196,106,.7); background:rgba(0,196,106,.08); color:#00C46A; cursor:pointer; font-size:1.35rem; font-weight:950; } /* Collapsible inventory + travel mode */ .inventory-section-title{ cursor:pointer; user-select:none; display:flex; justify-content:space-between; align-items:center; } .inventory-title-left{display:flex;align-items:center;gap:.7rem;} .inventory-count{ color:var(--text-muted); font-size:.85rem; font-weight:900; } .inventory-chevron{ color:#00C46A; font-weight:950; transition:transform .18s ease; } .inventory-section.collapsed .inventory-chevron{ transform:rotate(-90deg); } .inventory-section.collapsed .product-card-grid{ display:none; } .travel-mode-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-top:.5rem; } .travel-mode-btn{ background:#151515; color:#F5F5F5; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:.9rem; cursor:pointer; font-weight:900; text-align:left; } .travel-mode-btn.active{ background:#00C46A; color:#08130D; border-color:#00C46A; } .travel-dependent{ margin-top:1rem; } /* ========================================================================== GearSync Pro – Mobile App Optimierung Ziel: Desktop bleibt erhalten, Handy wird deutlich kompakter und bedienbarer ========================================================================== */ @media (max-width: 768px) { :root { --sidebar-width: 82vw; } body { display: block !important; min-height: 100svh; overflow-x: hidden; font-size: 15px; } .navbar { padding: 0.85rem 1rem !important; min-height: 64px; gap: 0.75rem; } .logo { font-size: 1.25rem !important; line-height: 1.1; white-space: nowrap; } #userDisplayEmail { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem !important; } .hamburger-btn span { width: 30px; height: 3px; } .sidebar { width: var(--sidebar-width) !important; left: calc(-1 * var(--sidebar-width)); padding-top: 4.5rem !important; } .menu-list { padding: 0 0.8rem !important; } .menu-item { font-size: 1rem !important; padding: 0.95rem 1rem !important; margin-bottom: 0.45rem !important; } .main-content { width: 100% !important; max-width: none !important; padding: 1rem !important; } h1 { font-size: 1.65rem !important; } h2 { font-size: 1.35rem !important; } h3 { font-size: 1.08rem !important; } .search-container, .planer-box, .dashboard-box, .dashboard-main-card, .dashboard-side-card { padding: 1rem !important; border-radius: 18px !important; margin-bottom: 1rem !important; } .category-tabs, .planer-tab-nav { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0.5rem !important; padding-bottom: 0.75rem !important; margin-bottom: 1rem !important; } .planer-tab-nav { grid-template-columns: 1fr; } .tab-btn, .sub-tab-btn, .p-tab-btn, .travel-mode-btn { padding: 0.75rem 0.65rem !important; font-size: 0.84rem !important; border-radius: 14px !important; text-align: center !important; } .subcategory-panel { display: none; grid-template-columns: 1fr; gap: 0.5rem !important; padding: 0.5rem !important; overflow: visible !important; } .subcategory-panel[style*="flex"], .subcategory-panel[style*="display: flex"] { display: grid !important; } .main-search-input, .form-control { min-height: 48px !important; font-size: 16px !important; /* verhindert iOS/Android Zoom beim Fokus */ border-radius: 14px !important; } .results-catalog, .gear-grid, .preset-grid, .stats-grid, .inventory-category-grid, .product-card-grid { grid-template-columns: 1fr !important; gap: 0.9rem !important; margin-top: 1rem !important; } .catalog-card, .gear-card, .gear-card-modern, .preset-card, .product-card, .stats-card { border-radius: 18px !important; padding: 1rem !important; } .product-image { min-height: 140px; background-image:url('images/bg-hoch.jpg') !important; } .product-image img { padding: 0.55rem !important; object-fit: contain !important; } .product-image-placeholder { font-size: 2.2rem !important; } .product-card-body { padding: 0.9rem !important; min-width: 0; } .product-title { min-height: 0 !important; font-size: 0.98rem !important; line-height: 1.22 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-eyebrow { font-size: 0.68rem !important; margin-bottom: 0.25rem !important; } .product-spec-row, .gear-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.45rem !important; margin-top: 0.65rem !important; } .product-spec-pill, .gear-spec { border-radius: 12px !important; padding: 0.52rem !important; min-height: auto !important; } .product-spec-pill small, .gear-spec-label { font-size: 0.58rem !important; margin-bottom: 0.15rem !important; } .product-spec-pill b, .gear-spec-value { font-size: 0.8rem !important; line-height: 1.15; } .add-gear-btn, .edit-gear-btn, .btn-custom-add, .btn-mini-plus, .btn-save, .btn-delete, .btn-cancel { min-height: 46px !important; border-radius: 14px !important; font-size: 0.92rem !important; } .planer-layout, .dashboard-hero, .dashboard-section-grid, .form-row-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .planer-row-select { grid-template-columns: 1fr !important; gap: 0.45rem !important; margin-bottom: 0.9rem !important; } .planer-row-select label, .form-group label { font-size: 0.9rem !important; font-weight: 800; } .dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem !important; } .dashboard-stat-card { padding: 0.9rem !important; border-radius: 18px !important; } .dashboard-stat-value, .dashboard-metric { font-size: 1.35rem !important; } .dashboard-main-card h1 { font-size: 1.65rem !important; } .dashboard-quick-actions { display: grid !important; grid-template-columns: 1fr; gap: 0.6rem !important; } .dashboard-action-btn { width: 100%; min-height: 46px; } .inventory-section-title { padding: 0.35rem 0; font-size: 1.05rem !important; } .inventory-count { font-size: 0.78rem !important; } .travel-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.55rem !important; } .edit-overlay { align-items: flex-end !important; padding: 0 !important; } .edit-modal { width: 100vw !important; max-width: none !important; max-height: 92svh !important; border-radius: 24px 24px 0 0 !important; padding: 1.1rem !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .edit-modal h3 { font-size: 1.35rem !important; margin-bottom: 0.75rem !important; } .modal-footer { position: sticky; bottom: -1.1rem; background: rgba(23,23,23,.96); backdrop-filter: blur(14px); margin: 1rem -1.1rem -1.1rem -1.1rem !important; padding: 0.85rem 1.1rem 1rem !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.65rem !important; border-top: 1px solid rgba(255,255,255,.08); } .modal-footer > div { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.65rem !important; } .modal-footer .btn-delete { grid-column: 1 / -1; } .financial-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .toast { left: 1rem !important; right: 1rem !important; bottom: 1rem !important; text-align: center; } } @media (max-width: 420px) { .product-image { min-height: 128px; } .product-spec-row, .gear-spec-grid { grid-template-columns: 1fr 1fr !important; } .dashboard-stat-grid { grid-template-columns: 1fr !important; } .travel-mode-grid { grid-template-columns: 1fr !important; } } /* GearSync Fixes – Text Overflow + Mobile readability */ .product-title, .product-eyebrow, .product-spec-pill b, .product-spec-pill small, .catalog-spec-value, .gear-spec-value, .clean-list li, .transport-check-item, select, option { overflow-wrap:anywhere !important; word-break:normal !important; white-space:normal !important; } .product-spec-pill, .catalog-spec-pill, .gear-spec { min-width:0 !important; } .product-spec-row, .catalog-spec-grid, .gear-spec-grid { align-items:stretch !important; } .notice-box.catalog-warning, .product-card .notice-box, .catalog-card .notice-box { display:none !important; } @media(max-width:768px){ .product-spec-row { grid-template-columns:1fr 1fr !important; } .product-spec-pill b { font-size:.76rem !important; line-height:1.18 !important; } .product-spec-pill small { font-size:.55rem !important; } .catalog-spec-value { white-space:normal !important; font-size:.8rem !important; line-height:1.18 !important; } } /* GearSync Accessory Category Patch */ @media (max-width: 768px) { .subcategory-panel { grid-template-columns: 1fr !important; } .sub-tab-btn { min-height: 54px !important; line-height: 1.15 !important; white-space: normal !important; } } @media (min-width: 769px) { .subcategory-panel { flex-wrap: wrap !important; } } /* GearSync Compatibility + Accessory System */ .compat-check-list{display:grid;gap:.75rem;margin-top:1rem} .compat-check-item{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:16px;padding:.9rem 1rem} .compat-check-title{font-weight:950;margin-bottom:.25rem} .compat-check-text{color:var(--text-muted);font-size:.9rem;line-height:1.35} .compat-ok{border-color:rgba(0,196,106,.45)!important} .compat-warn{border-color:rgba(245,158,11,.45)!important} .compat-bad{border-color:rgba(239,68,68,.45)!important} .compat-neutral{border-color:rgba(255,255,255,.075)!important} @media (max-width:768px){ .subcategory-panel{grid-template-columns:1fr!important} .sub-tab-btn{white-space:normal!important;min-height:54px!important;line-height:1.15!important} } @media (min-width:769px){ .subcategory-panel{flex-wrap:wrap!important} } /* GearSync Accessory Accordion Groups */ .accessory-group-wrap{ display:grid; gap:.75rem; margin-bottom:1rem; align-items:start; } /* Jede Spalte ist ein eigener Flex-Stapel. Dadurch beeinflusst eine aufgeklappte Karte NUR ihre eigene Spalte - keine gestreckte Nachbarkarte und keine Luecke auf der anderen Seite. */ .accessory-group-col{ display:flex; flex-direction:column; gap:.75rem; min-width:0; } .accessory-group{ border:1px solid rgba(255,255,255,.075); border-radius:18px; background:#151515; overflow:hidden; } .accessory-group-summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; font-weight:950; color:#F5F5F5; background:linear-gradient(135deg, rgba(0,196,106,.10), rgba(255,255,255,.02)); } .accessory-group-summary::-webkit-details-marker{display:none;} .accessory-group-title{ display:flex; align-items:center; gap:.65rem; } .accessory-group-chevron{ color:#00C46A; display:inline-block; transition:transform .18s ease; } .accessory-group-chevron{ font-size:0; transform:none !important; } .accessory-group-chevron::before{ content:"▶"; font-size:1rem; } .accessory-group[open] .accessory-group-chevron{ transform:none !important; } .accessory-group[open] .accessory-group-chevron::before{ content:"▼"; } .accessory-group-content{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; padding:.75rem; } .accessory-group-content .sub-tab-btn{ width:100%; min-height:52px; white-space:normal!important; } @media(min-width:769px){ .accessory-group-wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); } .accessory-group-content{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:768px){ .accessory-group-wrap{ display:flex; flex-direction:column; } /* Spalten-Container aufloesen: die Karten werden direkte Flex-Items. Das inline gesetzte "order" stellt die urspruengliche Reihenfolge her. */ .accessory-group-col{ display:contents; } } /* GearSync Safety + Info Modal */ .info-dot{border:0;background:rgba(0,196,106,.16);color:#00C46A;border-radius:999px;width:28px;height:28px;font-weight:900;margin-left:.35rem;cursor:pointer} .gs-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.76);display:none;align-items:center;justify-content:center;z-index:9999;padding:1rem} .gs-confirm-box{width:min(460px,100%);background:#1C1C1E;border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:1.25rem;box-shadow:0 30px 90px rgba(0,0,0,.55)} .gs-confirm-box h3{margin:0 0 .7rem;color:#F5F5F5!important}.gs-confirm-box p{color:#B8BBC2;line-height:1.45;margin-bottom:1rem}.gs-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.gs-confirm-danger{background:#ef4444!important;color:#fff!important}.gs-confirm-cancel{background:#151515!important;color:#F5F5F5!important;border:1px solid rgba(255,255,255,.09)!important} /* GearSync UX Rebuild – Inventory Tiles + Preset Blocks */ .inventory-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}.inventory-overview>div{background:rgba(31,31,33,.86);border:1px solid rgba(255,255,255,.075);border-radius:20px;padding:1rem}.inventory-overview small{display:block;color:var(--text-muted);font-weight:900;text-transform:uppercase;font-size:.68rem}.inventory-overview strong{display:block;margin-top:.25rem;font-size:1.35rem;letter-spacing:-.04em}.inventory-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.85rem;margin-bottom:1rem}.inv-tile{background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:20px;color:#F5F5F5;padding:1rem;text-align:left;display:grid;gap:.25rem;cursor:pointer}.inv-tile.active{border-color:#00C46A;background:linear-gradient(135deg,rgba(0,196,106,.18),#151515)!important;color:#F5F5F5!important}.inv-tile-icon{font-size:1.4rem}.inv-tile-title{font-weight:950}.inv-tile-count{color:var(--text-muted);font-size:.8rem;font-weight:800}.inventory-detail{background:rgba(31,31,33,.55);border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:1rem}.inventory-detail.empty{text-align:center;padding:1.25rem}.qty-controls{display:inline-grid;grid-template-columns:42px 52px 42px;align-items:center;gap:.35rem;margin:.7rem 0 .2rem}.qty-controls button{height:38px;border-radius:12px;border:1px solid rgba(0,196,106,.45);background:rgba(0,196,106,.10);color:#00C46A;font-weight:950;font-size:1.1rem}.qty-controls strong{text-align:center;background:#151515;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:.55rem .35rem}.preset-block{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:20px;padding:1rem;margin-bottom:1rem}.preset-block h4{margin:0 0 .85rem;color:#00C46A;font-size:1rem} /* Koffer-Dialog: Bloecke aufklappbar. Die Kopfzeile zeigt zusaetzlich, was im zugeklappten Block steckt - so muss man nicht erst oeffnen. */ details.preset-block>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;color:#00C46A;font-size:1rem;font-weight:900;margin:0} details.preset-block>summary::-webkit-details-marker{display:none} details.preset-block[open]>summary{margin-bottom:.85rem} details.preset-block>summary>span:first-child{flex:1 1 auto;min-width:0} details.preset-block>summary::after{content:'\25B6';color:#00C46A;font-size:.75rem;flex:0 0 auto;transition:transform .15s ease} details.preset-block[open]>summary::after{transform:rotate(90deg)} .preset-block-sum{color:var(--text-muted);font-weight:800;font-size:.74rem;text-align:right;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} details.preset-block[open] .preset-block-sum{display:none}.preset-line{display:grid;grid-template-columns:minmax(0,1fr) 86px 42px;gap:.5rem;align-items:center;margin:.5rem 0}.preset-line:not(.extra-line){grid-template-columns:minmax(0,1fr) 86px}.preset-line>select:only-child{grid-column:1/-1}.preset-remove{height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#1f1f21;color:#F5F5F5;font-weight:950}.preset-options{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:.7rem;margin-top:.8rem}.travel-mode-btn.active{background:#00C46A!important;color:#08130D!important}.product-image{min-height:190px}.inv-product-card .product-image img{padding:.7rem!important}@media(max-width:768px){.inventory-overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.inventory-overview>div{padding:.75rem}.inventory-overview strong{font-size:1rem}.inventory-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.inv-tile{padding:.85rem;border-radius:18px}.inventory-detail{padding:.8rem}.preset-line,.preset-line:not(.extra-line){grid-template-columns:minmax(0,1fr) 78px}.preset-line.extra-line{grid-template-columns:minmax(0,1fr) 72px 38px}.product-image{min-height:160px!important}}@media(max-width:420px){.inventory-overview{grid-template-columns:1fr 1fr}.inventory-overview>div:first-child{grid-column:1/-1}.inventory-tile-grid{grid-template-columns:1fr 1fr}.inv-tile-title{font-size:.9rem}.inv-tile-count{font-size:.72rem}} /* GearSync SVG Icons */ .gs-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:#00C46A} .gs-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .inv-tile-icon{font-size:0!important;line-height:0!important} .inv-tile-icon .gs-icon{width:36px;height:36px} .product-image-placeholder{font-size:0!important} .product-image-placeholder .gs-icon{width:64px;height:64px} /* GearSync Dashboard v8 – compact mobile premium layout */ .home-dashboard-v8{ display:grid; gap:1rem; } .home-hero-v8{ background:linear-gradient(135deg, rgba(0,196,106,.18), rgba(31,31,33,.92) 42%, rgba(20,20,20,.92)); border:1px solid rgba(0,196,106,.24); border-radius:28px; padding:1.35rem; box-shadow:0 24px 70px rgba(0,0,0,.34); } .home-hero-v8 h1{ color:#F5F5F5!important; margin:0 0 .45rem; font-size:2rem; letter-spacing:-.06em; } .home-hero-v8 p{ color:var(--text-muted); line-height:1.45; margin:0 0 1.05rem; } .home-actions-v8{ display:grid; grid-template-columns:1fr; gap:.65rem; } .home-actions-v8 button{ min-height:52px; border-radius:999px; border:1px solid rgba(255,255,255,.08); font-weight:950; cursor:pointer; } .home-actions-v8 .primary{ background:#00C46A; color:#08130D; } .home-actions-v8 .secondary{ background:rgba(255,255,255,.065); color:#F5F5F5; } .home-topline-v8{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; } .home-metric-v8{ background:rgba(31,31,33,.86); border:1px solid rgba(255,255,255,.075); border-radius:22px; padding:1rem; } .home-metric-v8 small{ display:block; color:var(--text-muted); font-size:.68rem; font-weight:950; text-transform:uppercase; letter-spacing:.05em; } .home-metric-v8 strong{ display:block; margin-top:.25rem; color:#F5F5F5; font-size:1.45rem; letter-spacing:-.055em; } .home-last-v8{ background:rgba(31,31,33,.86); border:1px solid rgba(255,255,255,.075); border-radius:24px; padding:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; } .home-last-v8 small{ color:var(--text-muted); font-size:.68rem; font-weight:950; text-transform:uppercase; letter-spacing:.05em; } .home-last-v8 strong{ display:block; margin-top:.2rem; font-size:1.25rem; } .home-last-v8 span{ color:var(--text-muted); font-weight:800; } .home-category-grid-v8{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; } .home-cat-v8{ background:rgba(31,31,33,.86); border:1px solid rgba(255,255,255,.075); border-radius:22px; padding:1rem; min-height:118px; cursor:pointer; text-align:left; color:#F5F5F5; display:flex; flex-direction:column; justify-content:space-between; } .home-cat-v8 .gs-icon{ width:32px; height:32px; } .home-cat-v8 b{ display:block; font-size:1rem; line-height:1.15; letter-spacing:-.035em; } .home-cat-v8 span{ display:block; color:var(--text-muted); font-size:.82rem; font-weight:850; margin-top:.25rem; } .home-cat-v8:hover{ border-color:rgba(0,196,106,.35); } @media(min-width:769px){ .home-dashboard-v8{ grid-template-columns:1.1fr .9fr; align-items:start; } .home-hero-v8{ grid-row:span 2; } .home-actions-v8{ grid-template-columns:1fr 1fr; } .home-actions-v8 .primary{ grid-column:1/-1; } .home-category-grid-v8{ grid-column:1/-1; grid-template-columns:repeat(4,minmax(0,1fr)); } } @media(max-width:520px){ .home-hero-v8 h1{font-size:1.72rem!important} .home-topline-v8{grid-template-columns:1fr 1fr} .home-topline-v8 .home-metric-v8:first-child{grid-column:1/-1} .home-metric-v8{padding:.85rem} .home-metric-v8 strong{font-size:1.2rem} .home-category-grid-v8{grid-template-columns:1fr 1fr} .home-cat-v8{min-height:110px;padding:.85rem} } /* GearSync v9 Persistent Tile Icons */ .inv-tile{position:relative;padding-top:3.2rem!important} .inv-tile::before{content:"";position:absolute;left:1rem;top:1rem;width:34px;height:34px;background:#00C46A;-webkit-mask:var(--tile-icon) center/contain no-repeat;mask:var(--tile-icon) center/contain no-repeat} .inv-tile .inv-tile-icon{display:none!important} .inv-tile[data-key="camera"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h3l1.2-2h7.6L17 8h3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='14' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} .inv-tile[data-key="lens"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 6h10l2 3v6l-2 3H7l-2-3V9l2-3Z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} .inv-tile[data-key="head"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5h8v5H8zM12 10v4M6 21l6-7 6 7M9 18h6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} .inv-tile[data-key="tripod"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4h6v4H9zM12 8v5M12 13 5 22M12 13l7 9M12 13v9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} .inv-tile[data-key="converter"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8h8v8H5zM13 10h6v4h-6M3 10v4M21 9v6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} .inv-tile[data-key="battery"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='7' width='15' height='10' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M19 10h2v4h-2M8 12h6' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} .inv-tile[data-key="card"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h9l3 3v15H6zM9 3v5h6M9 17h6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} .inv-tile[data-key="bag"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8V6a5 5 0 0 1 10 0v2' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='4' y='8' width='16' height='12' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} .inv-tile[data-key="grip"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8v6H8zM9 9h6l1 11H8zM10 13h4M10 16h4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} .inv-tile[data-key="drone"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5.5' cy='5.5' r='2.6' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18.5' cy='5.5' r='2.6' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.6' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.6' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m7.4 7.4 2.3 2.3M16.6 7.4l-2.3 2.3M7.4 16.6l2.3-2.3M16.6 16.6l-2.3-2.3' stroke='black' stroke-width='2'/%3E%3Crect x='9.4' y='9.4' width='5.2' height='5.2' rx='1.6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} .inv-tile[data-key="accessory"]{--tile-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")} @media(max-width:768px){.inv-tile{padding-top:3rem!important}.inv-tile::before{width:30px;height:30px}} /* GearSync v10 – Planer nur noch Koffer */ #ptab-compare, #planer-view-compare, #view-planer .planer-tab-nav{ display:none!important; } #planer-view-presets{ display:block!important; } #view-planer::before{ content:"Koffer-Planer"; display:block; color:#00C46A; font-size:1.9rem; font-weight:950; letter-spacing:-.05em; margin-bottom:.35rem; } #view-planer::after{ content:"Plane Einsatz-Koffer, Reisen und Packlisten. Der alte A/B-Vergleich ist in den Kompatibilitätscheck verschoben."; display:block; color:var(--text-muted); margin:0 0 1.25rem; line-height:1.4; } .compat-compare-box{ background:rgba(31,31,33,.82); border:1px solid rgba(255,255,255,.075); border-radius:22px; padding:1rem; margin-bottom:1rem; } .compat-compare-box h3{ color:#00C46A!important; margin-bottom:.5rem; } /* GearSync v11 – Dashboard Fokus + Einsatzdaten im Kofferplaner */ .dashboard-clean-v11{display:grid;gap:1rem} .dash-hero-v11{ background:linear-gradient(135deg,rgba(0,196,106,.18),rgba(31,31,33,.92) 45%,rgba(20,20,20,.92)); border:1px solid rgba(0,196,106,.24);border-radius:28px;padding:1.35rem;box-shadow:0 24px 70px rgba(0,0,0,.34) } .dash-hero-v11 h1{color:#F5F5F5!important;font-size:2rem;letter-spacing:-.06em;margin:0 0 .45rem} .dash-hero-v11 p{color:var(--text-muted);line-height:1.45;margin:0 0 1.05rem} .dash-actions-v11{display:grid;grid-template-columns:1fr;gap:.65rem} .dash-actions-v11 button{min-height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.08);font-weight:950;cursor:pointer} .dash-actions-v11 .primary{background:#00C46A;color:#08130D}.dash-actions-v11 .secondary{background:rgba(255,255,255,.065);color:#F5F5F5} .dash-next-v11,.dash-stats-v11,.dash-goal-v11{ background:rgba(31,31,33,.86);border:1px solid rgba(255,255,255,.075);border-radius:24px;padding:1rem } .dash-label-v11{display:block;color:var(--text-muted);font-size:.68rem;font-weight:950;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem} .dash-next-title-v11{font-size:1.35rem;font-weight:950;letter-spacing:-.04em} .dash-countdown-v11{font-size:2.25rem;color:#00C46A;font-weight:950;letter-spacing:-.07em;margin:.45rem 0} .dash-meta-v11{color:var(--text-muted);font-weight:800;line-height:1.4} .dash-stat-grid-v11{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem} .dash-stat-v11{background:#151515;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:.9rem} .dash-stat-v11 small{display:block;color:var(--text-muted);font-size:.65rem;font-weight:950;text-transform:uppercase} .dash-stat-v11 strong{display:block;margin-top:.25rem;font-size:1.25rem;letter-spacing:-.05em} .event-info-details{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:22px;margin-bottom:1rem;overflow:hidden} .event-info-details summary{list-style:none;cursor:pointer;padding:1rem 1.1rem;font-weight:950;color:#00C46A;display:flex;justify-content:space-between;align-items:center} .event-info-details summary::-webkit-details-marker{display:none} .event-info-content{padding:0 1rem 1rem} .event-summary-line{color:var(--text-muted);font-size:.88rem;font-weight:800;margin-top:.25rem} .event-info-details[open] .event-chevron{transform:rotate(90deg)} .event-chevron{transition:.18s;display:inline-block} @media(min-width:769px){.dashboard-clean-v11{grid-template-columns:1.1fr .9fr}.dash-hero-v11{grid-row:span 2}.dash-actions-v11{grid-template-columns:1fr 1fr}.dash-actions-v11 .primary{grid-column:1/-1}.dash-stats-v11,.dash-goal-v11{grid-column:1/-1}} @media(max-width:520px){.dash-hero-v11 h1{font-size:1.7rem!important}.dash-stat-grid-v11{grid-template-columns:1fr 1fr}.dash-stat-grid-v11 .dash-stat-v11:first-child{grid-column:1/-1}.dash-countdown-v11{font-size:1.9rem}} /* GearSync v12 Dashboard/Koffer Fix */ #view-planer .planer-tab-nav{display:none!important} #ptab-compare,#planer-view-compare{display:none!important} #planer-view-presets{display:block!important} #eventInfoBox{display:none!important} .koffer-event-card{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:22px;margin:0 0 1rem;overflow:hidden} .koffer-event-card summary{list-style:none;cursor:pointer;padding:1rem 1.1rem;color:#00C46A;font-weight:950;display:flex;justify-content:space-between;align-items:center} .koffer-event-card summary::-webkit-details-marker{display:none} .koffer-event-body{padding:0 1rem 1rem} .koffer-event-line{color:var(--text-muted);font-size:.88rem;font-weight:800;padding:0 1.1rem .7rem} .koffer-event-card[open] .event-chevron{transform:rotate(90deg)} .event-chevron{transition:.18s;display:inline-block} .dashboard-clean-v11 .home-category-grid-v8,.dashboard-clean-v11 .home-cat-v8{display:none!important} /* GearSync v13 – Allgemeine Informationen im Kofferformular */ #kofferEventInfo, #eventInfoBox{ display:none!important; } .general-info-toggle{ width:100%; background:#151515; border:1px solid rgba(255,255,255,.075); border-radius:22px; margin:0 0 1rem; overflow:hidden; } .general-info-toggle summary{ list-style:none; cursor:pointer; padding:1rem 1.1rem; color:#00C46A; font-weight:950; display:flex; justify-content:space-between; align-items:center; } .general-info-toggle summary::-webkit-details-marker{display:none} .general-info-toggle[open] .event-chevron{transform:rotate(90deg)} .general-info-body{padding:0 1rem 1rem} .general-info-line{ color:var(--text-muted); font-size:.88rem; font-weight:800; padding:0 1.1rem .7rem; } .general-travel-grid{ display:grid; grid-template-columns:1fr; gap:.55rem; margin:.5rem 0 1rem; } .general-travel-grid .travel-mode-btn{ min-height:48px; } .general-info-toggle .travel-mode-btn.active{ background:#00C46A!important; color:#08130D!important; border-color:#00C46A!important; } /* GearSync v14 – Allgemeine Infos nur im Koffer-Modal */ #generalInfoBox, #kofferEventInfo, #eventInfoBox{ display:none!important; } .pack-modal-general-info{ background:#151515; border:1px solid rgba(255,255,255,.075); border-radius:22px; margin:0 0 1rem; overflow:hidden; } .pack-modal-general-info summary{ list-style:none; cursor:pointer; padding:1rem 1.1rem; color:#00C46A; font-weight:950; display:flex; justify-content:space-between; align-items:center; } .pack-modal-general-info summary::-webkit-details-marker{display:none} .pack-modal-general-info[open] .event-chevron{transform:rotate(90deg)} .pack-modal-general-body{padding:0 1rem 1rem} .pack-modal-general-line{ color:var(--text-muted); font-size:.88rem; font-weight:800; padding:0 1.1rem .7rem; } .pack-modal-travel-grid{ display:grid; grid-template-columns:1fr; gap:.55rem; margin:.5rem 0 1rem; } .pack-modal-travel-grid .travel-mode-btn{ min-height:48px; } .pack-modal-general-info .travel-mode-btn.active{ background:#00C46A!important; color:#08130D!important; border-color:#00C46A!important; } /* GearSync Catalog Polish – no data mutation */ .catalog-result-meta{margin-top:.8rem;color:var(--text-muted);font-weight:900;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;min-height:1.1rem} .catalog-inventory-badge{display:inline-flex;align-items:center;gap:.35rem;background:rgba(0,196,106,.14);border:1px solid rgba(0,196,106,.35);color:#00C46A;border-radius:999px;padding:.32rem .58rem;font-size:.72rem;font-weight:950;margin-bottom:.65rem} .catalog-card-headerline{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.25rem} .catalog-card-headerline h4{margin:0;line-height:1.2} .catalog-empty-state{grid-column:1/-1} .catalog-empty-state p{color:var(--text-muted);margin-top:.35rem} /* GearSync v21 – Inventar UX Feinschliff */ .form-help{display:block;color:var(--text-muted);font-size:.78rem;font-weight:750;margin-top:.45rem;line-height:1.35} .readonly-data-box{background:#151515;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:1rem;margin-bottom:1rem} .readonly-data-box h4{margin:0 0 .75rem;color:#00C46A;font-size:.95rem} .readonly-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem} .readonly-pill{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:.65rem;min-width:0} .readonly-pill small{display:block;color:var(--text-muted);font-size:.66rem;font-weight:950;text-transform:uppercase;margin-bottom:.2rem} .readonly-pill b{display:block;color:#F5F5F5;font-size:.9rem;overflow-wrap:anywhere} @media(max-width:520px){.readonly-data-grid{grid-template-columns:1fr 1fr}.custom-image-field input[type=file]{font-size:.9rem}} /* GearSync v28 – Portfolio-Analyse UX polish */ .analytics-title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap} .analytics-title-icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:#00C46A} .analytics-title-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .analytics-jump-btn{margin-top:1rem;background:#00C46A;color:#08130D;border:0;border-radius:999px;padding:.85rem 1.2rem;font-weight:950;cursor:pointer;box-shadow:0 12px 28px rgba(0,196,106,.2)} .analytics-unused-badge{display:inline-block;margin-left:.45rem;color:#F59E0B;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.32);border-radius:999px;padding:.15rem .55rem;font-size:.72rem;font-weight:950;white-space:nowrap} .analytics-score-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem} .analytics-score-head .info-dot{margin-left:0;flex:0 0 auto} @media(max-width:768px){.analytics-title-icon{width:32px;height:32px}.analytics-jump-btn{width:100%;min-height:48px}} /* GearSync v30 Finance Tresor UX */ .finance-status-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.32rem .65rem;background:rgba(0,196,106,.12);border:1px solid rgba(0,196,106,.28);color:#00C46A;font-weight:950;font-size:.78rem;white-space:nowrap} .finance-value-strong{font-weight:950;color:#F5F5F5} .finance-detail-grid{display:grid;grid-template-columns:1fr;gap:.65rem} .finance-detail-row{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;background:#151515;border:1px solid rgba(255,255,255,.065);border-radius:14px;padding:.75rem .85rem} .finance-detail-row span{color:var(--text-muted);font-weight:850;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em} .finance-detail-row strong{text-align:right;color:#F5F5F5;font-weight:950} @media(max-width:768px){ .financial-table{display:block!important;width:100%!important;overflow:visible!important} .financial-table thead{display:none!important} .financial-table tbody{display:grid!important;gap:.85rem!important} .financial-table tr{display:grid!important;grid-template-columns:1fr!important;background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:18px;padding:.9rem!important} .financial-table td{display:flex!important;justify-content:space-between;align-items:flex-start;gap:1rem;border-bottom:1px solid rgba(255,255,255,.06)!important;padding:.65rem 0!important;font-size:.92rem!important} .financial-table td:last-child{border-bottom:0!important} .financial-table td::before{content:attr(data-label);color:var(--text-muted);font-weight:950;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;max-width:42%;line-height:1.2} .financial-table td:first-child{display:block!important;font-size:1rem!important} .financial-table td:first-child::before{display:block;margin-bottom:.25rem;max-width:none} .financial-table td b,.financial-table td span.finance-cell-value{text-align:right;max-width:58%;overflow-wrap:anywhere} } /* GearSync Pro v54 – Auth Komfort */ .gs-password-row{position:relative;display:flex;align-items:center;} .gs-password-row input{padding-right:4.25rem!important;} .gs-password-toggle{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);height:38px;min-width:54px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.055);color:var(--text-muted);font-weight:900;font-size:.78rem;cursor:pointer;} .gs-password-toggle:hover{border-color:rgba(0,196,106,.35);color:var(--brand-color);background:rgba(0,196,106,.08);} .gs-auth-secondary{margin-top:.65rem;text-align:center;color:var(--text-muted);font-size:.88rem;line-height:1.5;} .gs-auth-secondary span{color:var(--brand-color);cursor:pointer;font-weight:800;} .gs-auth-hint{margin-top:.85rem;color:var(--text-muted);font-size:.84rem;line-height:1.45;text-align:center;} /* GearSync v92 – Release-Fix Akku-Rechner + Airline-Limit */ .transport-check-item > strong, .transport-check-label{ flex:0 0 auto; min-width:max-content; white-space:nowrap !important; overflow-wrap:normal !important; word-break:normal !important; } .transport-check-status{ min-width:0; white-space:normal !important; overflow-wrap:normal !important; word-break:normal !important; text-align:right; } .battery-check-item{ display:grid !important; grid-template-columns:max-content minmax(0,1fr); align-items:center; } .battery-check-item .transport-check-status{ display:flex; align-items:center; justify-content:flex-end; gap:.45rem; flex-wrap:wrap; } @media(max-width:520px){ .transport-check-item, .battery-check-item{ display:grid !important; grid-template-columns:1fr; align-items:start; gap:.45rem; } .transport-check-status, .battery-check-item .transport-check-status{ justify-content:flex-start; text-align:left; } } /* ===== Block: gs-v39-v45-settings-legal-pages-css ===== */ /* GearSync v39 – Einstellungen & Fotografenprofil */ .settings-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}.settings-page-head p{color:var(--text-muted);max-width:760px;margin-top:.35rem;line-height:1.45}.settings-profile-status{background:rgba(0,196,106,.10);border:1px solid rgba(0,196,106,.28);color:#00C46A;border-radius:999px;padding:.55rem .85rem;font-weight:950;white-space:nowrap}.settings-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1rem}.settings-nav-card,.settings-content-card{background:rgba(31,31,33,.86);border:1px solid rgba(255,255,255,.075);border-radius:24px;padding:1rem;box-shadow:0 18px 50px rgba(0,0,0,.24)}.settings-nav-card{height:max-content;display:grid;gap:.6rem}.settings-tab{display:flex;align-items:center;gap:.75rem;min-height:50px;text-align:left;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:16px;color:#F5F5F5;padding:.8rem .9rem;font-weight:950;cursor:pointer}.settings-tab.active{background:rgba(0,196,106,.14);border-color:rgba(0,196,106,.45);color:#00C46A}.settings-section-title{margin-bottom:1rem}.settings-section-title h3{color:#00C46A!important;margin-bottom:.3rem}.settings-section-title p,.settings-hint{color:var(--text-muted);line-height:1.45;font-size:.92rem}.settings-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.settings-block{margin:1rem 0}.settings-block-label{display:block;font-weight:900;margin-bottom:.55rem}.settings-chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.55rem}.settings-chip-grid label{display:flex;align-items:center;gap:.45rem;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:.75rem;color:#F5F5F5;font-weight:800}.settings-chip-grid input{width:auto!important}.settings-slider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.settings-slider-grid label{display:grid;gap:.45rem;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:.8rem;color:#F5F5F5;font-weight:800}.settings-slider-grid input{width:100%}.settings-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.25rem}.settings-hidden{display:none!important}.settings-readonly-list{display:grid;gap:.75rem}.settings-readonly-list>div{display:flex;justify-content:space-between;gap:1rem;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:.85rem}.settings-readonly-list span{color:var(--text-muted);font-weight:800}.settings-readonly-list strong{text-align:right;overflow-wrap:anywhere}@media(max-width:768px){.settings-page-head{display:grid}.settings-profile-status{width:max-content}.settings-layout{grid-template-columns:1fr}.settings-nav-card{grid-template-columns:1fr}.settings-form-grid,.settings-slider-grid{grid-template-columns:1fr}.settings-chip-grid{grid-template-columns:1fr}.settings-actions{display:grid;grid-template-columns:1fr 1fr}} /* GearSync v45 – Rechtliche Seiten (Alt, In-App) */ .legal-page-head{margin-bottom:1.25rem}.legal-page-head p{color:var(--text-muted);line-height:1.5;max-width:820px}.legal-card{background:rgba(31,31,33,.88);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:1.25rem;box-shadow:0 18px 50px rgba(0,0,0,.24);margin-bottom:1rem}.legal-card h3{color:#00C46A!important;margin:0 0 .8rem}.legal-card h4{margin:1.1rem 0 .4rem;color:#F5F5F5}.legal-card p,.legal-card li{color:var(--text-muted);line-height:1.55}.legal-card ul{padding-left:1.15rem;margin:.55rem 0}.legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.legal-kv{display:grid;gap:.45rem;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:.95rem}.legal-kv span{color:var(--text-muted);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}.legal-kv strong{color:#F5F5F5;overflow-wrap:anywhere}.legal-note{border-color:rgba(0,196,106,.35);background:linear-gradient(135deg,rgba(0,196,106,.12),rgba(31,31,33,.88))}.legal-warning{border-color:rgba(255,193,7,.35)}.app-footer{display:flex;flex-wrap:wrap;gap:.65rem 1rem;align-items:center;justify-content:center;margin:2rem auto 0;padding:1.25rem;color:var(--text-muted);font-size:.82rem;text-align:center}.app-footer span{width:100%;display:block;margin-bottom:.25rem}.app-footer button{background:none;border:0;color:var(--text-muted);font-weight:800;cursor:pointer;padding:.25rem .35rem}.app-footer button:hover{color:#00C46A}@media(max-width:768px){.legal-grid{grid-template-columns:1fr}.legal-card{padding:1rem}.app-footer{padding-bottom:5rem}} /* ===== Block: gs-v103-value-badge-hardware-katalog-css ===== */ .value-unconfirmed-dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:999px;background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.55);color:#f59e0b;font-size:12px;font-weight:900;vertical-align:middle;} .value-confirm-notice{border-color:rgba(245,158,11,.35)!important;background:rgba(245,158,11,.10)!important;color:#f8d08a!important;} .readonly-data-box h4{margin-bottom:16px;} /* GearSync v1.0.3 – Hardware-Katalog Feinschliff */ #view-search .search-container{ background: radial-gradient(circle at 12% 0%, rgba(0,196,106,.16), transparent 34%), linear-gradient(135deg, rgba(31,31,33,.92), rgba(20,20,20,.92)) !important; border-color:rgba(0,196,106,.18) !important; } #view-search .search-container h2{ letter-spacing:-.045em; margin-bottom:.85rem; } #view-search .category-tabs{ background:rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.045) !important; border-radius:22px; padding:.7rem !important; } #view-search .main-search-input{ background:linear-gradient(135deg, rgba(21,21,21,.98), rgba(0,196,106,.045)) !important; } #view-search .catalog-brand-group, #view-search .catalog-mount-group, #view-search .accessory-group{ background:linear-gradient(135deg, rgba(31,31,33,.9), rgba(15,15,15,.94)) !important; border-color:rgba(255,255,255,.085) !important; box-shadow:0 18px 48px rgba(0,0,0,.22); } #view-search .catalog-brand-summary, #view-search .accessory-group-summary{ background:linear-gradient(135deg, rgba(0,196,106,.18), rgba(255,255,255,.035)) !important; } #view-search .catalog-mount-summary{ background:linear-gradient(135deg, rgba(0,196,106,.075), rgba(255,255,255,.025)) !important; } #view-search .catalog-card{ background: radial-gradient(circle at 18% 0%, rgba(0,196,106,.11), transparent 34%), rgba(31,31,33,.88) !important; } #view-search .dashboard-box{ background:linear-gradient(135deg, rgba(0,196,106,.12), rgba(31,31,33,.88)) !important; } /* ===== Block: gs-v106-koffer-select-info-dialog-css ===== */ /* GearSync v1.0.6 – Koffer-UI Fix: lange Auswahlnamen + Info-Dialog */ #presetModalOverlay .preset-line select, #presetModalOverlay .form-row-grid select, #presetModalOverlay #presetBag, #presetModalOverlay #presetAirline{ min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #presetModalOverlay .preset-line{ min-width:0 !important; } #presetModalOverlay .preset-full-label{ grid-column:1 / -1; color:var(--text-muted); font-size:.72rem; font-weight:800; line-height:1.25; margin:-.18rem .15rem .15rem; overflow-wrap:anywhere; display:none; } #presetModalOverlay .preset-full-label.has-text{ display:block; } .gs-confirm-actions:has(#gsConfirmCancel[style*="display: none"]){ grid-template-columns:1fr !important; } /* GearSync v1.0.7 – Navigation Clean Fix (ohne Scrollbar-Änderungen) */ .navbar-left, .navbar-right{ display:flex; align-items:center; gap:1rem; } .navbar-left{ min-width:0; } .navbar-right{ margin-left:auto; } .hamburger-btn.open span:nth-child(1){ transform:rotate(45deg) translate(6px,6px); } .hamburger-btn.open span:nth-child(2){ opacity:0; } .hamburger-btn.open span:nth-child(3){ transform:rotate(-45deg) translate(6px,-7px); } @media(max-width:768px){ .navbar-left{ gap:.75rem; } .navbar-right{ max-width:38vw; overflow:hidden; } } /* ===== Block: gs-portfolio-history-v124-css ===== */ .gs-analytics-tools-v124{margin-top:1.25rem;display:grid;gap:1rem}.gs-analytics-panel-v124{border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.42);border-radius:1.25rem;overflow:hidden}.gs-analytics-head-v124{width:100%;border:0;background:transparent;color:var(--brand-color);font-weight:900;font-size:1.05rem;padding:1rem 1.15rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left}.gs-analytics-count-v124{color:var(--brand-color);font-weight:900}.gs-analytics-body-v124{display:none;padding:0 1.15rem 1.15rem}.gs-analytics-panel-v124.open .gs-analytics-body-v124{display:block}.gs-history-row-v124{border-radius:1rem;background:rgba(0,0,0,.23);border:1px solid rgba(148,163,184,.14);padding:1rem;margin-top:.75rem}.gs-history-title-v124{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.gs-history-title-v124 strong{font-size:1rem}.gs-history-meta-v124,.gs-history-items-v124{color:var(--text-muted);font-size:.88rem;margin-top:.25rem}.gs-history-items-v124{line-height:1.45}.gs-history-delete-v124{border:1px solid rgba(244,63,94,.55);background:rgba(244,63,94,.13);color:#fb7185;border-radius:.75rem;padding:.55rem .75rem;font-weight:800;cursor:pointer;white-space:nowrap}.gs-missing-badge-v124{display:inline-flex;align-items:center;border-radius:999px;border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.13);color:#f59e0b;font-weight:900;font-size:.75rem;padding:.18rem .55rem;margin-left:.35rem;vertical-align:middle}.gs-usage-count-control-v124{display:flex;align-items:center;gap:.4rem;justify-content:flex-end}.gs-usage-count-control-v124 input{width:4.6rem;max-width:4.6rem;background:rgba(0,0,0,.25);border:1px solid rgba(148,163,184,.25);color:var(--text-main);border-radius:.65rem;padding:.35rem .45rem;font-weight:900;text-align:center}.gs-analytics-settings-text-v124{color:var(--text-muted);font-size:.9rem;line-height:1.45;margin-bottom:1rem}.gs-analytics-reset-v124{width:100%;border:0;border-radius:.95rem;background:linear-gradient(135deg,#fb7185,#e11d48);color:white;font-weight:900;padding:.95rem 1rem;cursor:pointer}.gs-analytics-empty-v124{color:var(--text-muted);padding:.8rem 0}.gs-history-chevron-v124{transition:transform .18s ease}.gs-analytics-panel-v124.open .gs-history-chevron-v124{transform:rotate(180deg)} @media(max-width:720px){.gs-history-title-v124{display:grid}.gs-history-delete-v124{width:100%}.gs-usage-count-control-v124{justify-content:flex-start;margin-top:.35rem}.gs-analytics-head-v124{font-size:1rem}} /* ===== Block: gs-ab-mobile-fix-v129 ===== */ /* GearSync v1.2.9 – A/B Vergleich Mobile Fix */ @media (max-width: 768px){ #gsAbCompareSection{ padding: .9rem !important; border-radius: 20px !important; overflow: hidden !important; } #view-abcompare .compat-compare-box{ padding: .9rem !important; border-radius: 20px !important; } #view-abcompare .gs-section-head{ display: block !important; margin-bottom: .85rem !important; } #view-abcompare .gs-section-head h3{ font-size: 1.18rem !important; line-height: 1.15 !important; } #view-abcompare .gs-section-head p{ font-size: .86rem !important; line-height: 1.35 !important; } .gs-ab-mode-toggle{ grid-template-columns: 1fr 1fr !important; gap: .4rem !important; padding: .35rem !important; border-radius: 16px !important; } .gs-ab-mode-btn{ min-height: 44px !important; font-size: .86rem !important; border-radius: 13px !important; } .gs-ab-grid{ grid-template-columns: 1fr !important; gap: .65rem !important; margin-bottom: .75rem !important; } .gs-ab-select-card{ padding: .75rem !important; border-radius: 16px !important; } .gs-ab-select-card label{ font-size: .78rem !important; margin-bottom: .4rem !important; color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: .04em; } /* A/B Produktkarten auf Handy kompakt nebeneinander */ .gs-ab-product-grid{ grid-template-columns: 1fr 1fr !important; gap: .55rem !important; margin: .75rem 0 !important; } .gs-ab-product{ padding: .75rem !important; border-radius: 18px !important; min-height: 112px !important; } .gs-ab-product small{ font-size: .61rem !important; margin-bottom: .25rem !important; } .gs-ab-product strong{ font-size: .88rem !important; line-height: 1.15 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .gs-ab-product-meta{ font-size: .72rem !important; line-height: 1.2 !important; margin-top: .4rem !important; } /* Schnellvergleich kompakter */ .gs-ab-summary-grid{ grid-template-columns: 1fr 1fr !important; gap: .55rem !important; margin: .75rem 0 !important; } .gs-ab-summary-tile{ padding: .68rem !important; border-radius: 15px !important; } .gs-ab-summary-tile small{ font-size: .58rem !important; margin-bottom: .18rem !important; } .gs-ab-summary-tile strong{ font-size: .82rem !important; line-height: 1.18 !important; display: block; overflow-wrap: anywhere; } /* Analyse: weniger Höhe, leichter erfassbar */ .gs-ab-analysis{ padding: .75rem !important; border-radius: 18px !important; margin-top: .75rem !important; } .gs-ab-analysis h3{ font-size: 1rem !important; margin-bottom: .55rem !important; } .gs-ab-analysis-grid{ grid-template-columns: 1fr !important; gap: .55rem !important; } .gs-ab-analysis-card{ padding: .7rem .75rem !important; border-radius: 15px !important; } .gs-ab-analysis-kicker{ font-size: .58rem !important; margin-bottom: .25rem !important; } .gs-ab-analysis-winner{ font-size: .9rem !important; margin-bottom: .25rem !important; } .gs-ab-analysis-reasons{ font-size: .8rem !important; line-height: 1.25 !important; margin-top: .25rem !important; } .gs-ab-analysis-reasons li{ margin: .12rem 0 !important; } .gs-ab-analysis-note{ font-size: .76rem !important; margin-top: .55rem !important; } .gs-ab-details-toggle{ min-height: 54px !important; border-radius: 16px !important; padding: .85rem .95rem !important; margin-top: .75rem !important; } /* Detail-Tabelle wird auf Handy zu echten Vergleichskarten: kein horizontales Abschneiden */ .gs-ab-details{ overflow: visible !important; } .gs-ab-table, .gs-ab-table tbody, .gs-ab-table tr, .gs-ab-table td{ display: block !important; width: 100% !important; } .gs-ab-table{ border-collapse: collapse !important; border-spacing: 0 !important; table-layout: fixed !important; } .gs-ab-table thead{ display: none !important; } .gs-ab-table tbody{ display: grid !important; gap: .65rem !important; } .gs-ab-table tr{ display: grid !important; grid-template-columns: 1fr 1fr !important; background: #151515 !important; border: 1px solid rgba(255,255,255,.075) !important; border-radius: 17px !important; overflow: hidden !important; } .gs-ab-table td{ border: 0 !important; border-radius: 0 !important; padding: .68rem .75rem !important; min-width: 0 !important; overflow-wrap: anywhere !important; word-break: normal !important; background: transparent !important; box-shadow: none !important; font-size: .86rem !important; line-height: 1.25 !important; } .gs-ab-table td:first-child{ grid-column: 1 / -1 !important; width: 100% !important; background: rgba(255,255,255,.035) !important; color: var(--text-muted) !important; font-size: .7rem !important; font-weight: 950 !important; text-transform: uppercase !important; letter-spacing: .04em !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; } .gs-ab-table td:nth-child(2){ background: linear-gradient(135deg,rgba(0,196,106,.08),rgba(21,21,21,.95)) !important; border-right: 1px solid rgba(255,255,255,.06) !important; } .gs-ab-table td:nth-child(3){ background: linear-gradient(135deg,rgba(59,130,246,.07),rgba(21,21,21,.95)) !important; } .gs-ab-table td:nth-child(2)::before, .gs-ab-table td:nth-child(3)::before{ display: block; margin-bottom: .22rem; font-size: .58rem; font-weight: 950; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } .gs-ab-table td:nth-child(2)::before{ content: 'A'; color: #00C46A; } .gs-ab-table td:nth-child(3)::before{ content: 'B'; color: #93C5FD; } } @media (max-width: 420px){ .gs-ab-product-grid, .gs-ab-summary-grid{ grid-template-columns: 1fr !important; } .gs-ab-product{ min-height: auto !important; } } /* ===== Block: gs-cross-nav-v131-css ===== */ /* GearSync v1.3.1 – Direkter Wechsel Katalog ↔ Inventar */ .gs-page-head-actions-v131{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; } .gs-page-head-actions-v131 h2{ margin:0; } .gs-page-action-row-v131{ display:flex; flex-wrap:wrap; gap:.65rem; justify-content:flex-end; } .gs-cross-nav-btn-v131{ min-height:46px; border-radius:999px!important; border:1px solid rgba(0,196,106,.55)!important; background:rgba(0,196,106,.08)!important; color:#00C46A!important; padding:.72rem 1rem!important; font-weight:950!important; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; white-space:nowrap; } .gs-cross-nav-btn-v131:hover{ background:rgba(0,196,106,.14)!important; border-color:rgba(0,196,106,.8)!important; } @media(max-width:768px){ .gs-page-head-actions-v131{ display:grid; grid-template-columns:1fr; gap:.75rem; margin-bottom:.85rem; } .gs-page-action-row-v131{ display:grid; grid-template-columns:1fr; width:100%; gap:.55rem; } .gs-cross-nav-btn-v131, .gs-page-action-row-v131 .btn-custom-add{ width:100%; min-height:48px!important; } } /* ===== Block: gs-v1-3-14-repair-clean-css ===== */ /* GearSync v1.3.14 – Reparaturverwaltung sauber integriert */ #analyticsCategoryDistributionBox{display:none!important;} .gs-repair-pill-v1340{ cursor:pointer; border-color:rgba(0,196,106,.24)!important; background:rgba(0,196,106,.055)!important; transition:border-color .16s ease, background .16s ease; } .gs-repair-pill-v1340:hover{border-color:rgba(0,196,106,.55)!important;background:rgba(0,196,106,.10)!important;} .gs-repair-pill-v1340 b{color:#00C46A!important;} .gs-repair-modal-list-v1340{display:grid;gap:.65rem;margin:1rem 0;} .gs-repair-row-v1340{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:16px;padding:.8rem;display:grid;gap:.35rem;} .gs-repair-row-head-v1340{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start;} .gs-repair-row-head-v1340 strong{color:#F5F5F5;line-height:1.25;} .gs-repair-meta-v1340{color:var(--text-muted);font-size:.82rem;font-weight:800;line-height:1.35;} .gs-repair-delete-v1340{border:1px solid rgba(239,68,68,.55);background:rgba(239,68,68,.12);color:#fb7185;border-radius:12px;padding:.45rem .65rem;font-weight:900;cursor:pointer;white-space:nowrap;} .gs-finance-dev-note-v1340{color:var(--text-muted);font-size:.86rem;line-height:1.35;margin-top:.45rem;} body:not(.gs-business-mode-v1340) #finDepreciationDevBoxV1340, body:not(.gs-business-mode-v1340) [data-gs-depreciation-dev-v1340]{display:none!important;} /* ===== Block: gs-v141-onboarding-registrierung-css ===== */ /* GearSync Pro v1.4.1 – Onboarding & Registrierung */ .gs-register-extra-v141{display:grid;gap:1rem;margin-bottom:1rem;} .gs-register-name-grid-v141{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .gs-user-type-grid-v141{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;} .gs-user-type-option-v141{position:relative;display:block;} .gs-user-type-option-v141 input{position:absolute;opacity:0;pointer-events:none;} .gs-user-type-card-v141{display:block;min-height:74px;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:.8rem .85rem;cursor:pointer;font-weight:950;color:#F5F5F5;line-height:1.2;} .gs-user-type-card-v141 small{display:block;margin-top:.32rem;color:var(--text-muted);font-size:.72rem;font-weight:800;line-height:1.25;} .gs-user-type-option-v141 input:checked + .gs-user-type-card-v141{background:rgba(0,196,106,.14);border-color:rgba(0,196,106,.55);box-shadow:0 0 0 3px rgba(0,196,106,.09);color:#00C46A;} .gs-welcome-overlay-v141{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:12000;display:none;align-items:center;justify-content:center;padding:1rem;} .gs-welcome-modal-v141{width:min(720px,100%);max-height:92svh;overflow:auto;background:linear-gradient(135deg,rgba(0,196,106,.13),rgba(31,31,33,.98) 34%,rgba(18,18,18,.98));border:1px solid rgba(0,196,106,.26);border-radius:28px;box-shadow:0 36px 110px rgba(0,0,0,.58);padding:1.35rem;} .gs-welcome-kicker-v141{display:inline-flex;align-items:center;gap:.45rem;color:#00C46A;font-weight:950;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem;} .gs-welcome-modal-v141 h2{font-size:2rem!important;line-height:1.05!important;margin:0 0 .65rem;color:#F5F5F5!important;letter-spacing:-.06em;} .gs-welcome-modal-v141 p{color:var(--text-muted);line-height:1.5;margin:.35rem 0;} .gs-welcome-intro-v141{font-size:1.02rem;color:#D7DADF!important;} .gs-welcome-steps-v141{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1.15rem 0;} .gs-welcome-step-v141{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:18px;padding:.85rem;} .gs-welcome-step-v141 strong{display:block;color:#F5F5F5;margin-bottom:.25rem;font-size:.95rem;} .gs-welcome-step-v141 span{display:block;color:var(--text-muted);font-size:.84rem;line-height:1.35;} .gs-welcome-actions-v141{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.1rem;} .gs-welcome-actions-v141 button{min-height:52px;border-radius:999px;font-weight:950;cursor:pointer;border:1px solid rgba(255,255,255,.08);} .gs-welcome-start-v141{background:#00C46A;color:#08130D;border-color:#00C46A!important;} .gs-welcome-guide-v141{background:rgba(255,255,255,.06);color:#F5F5F5;} .gs-welcome-footer-v141{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-top:1rem;color:var(--text-muted);font-size:.82rem;} .gs-welcome-footer-v141 label{display:flex;align-items:center;gap:.45rem;} @media(max-width:680px){.gs-register-name-grid-v141,.gs-user-type-grid-v141,.gs-welcome-steps-v141,.gs-welcome-actions-v141{grid-template-columns:1fr}.gs-welcome-modal-v141{border-radius:24px;padding:1rem}.gs-welcome-modal-v141 h2{font-size:1.55rem!important}.gs-welcome-footer-v141{display:grid}.gs-user-type-card-v141{min-height:auto}} /* ===== Block: gs-v1-4-3-auth-loading-css ===== */ /* GearSync Pro v1.4.5 – sauberer Start ohne Auth-Flicker */ .gs-startup-screen-v143{ position:fixed; inset:0; z-index:13000; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at top left, rgba(0,196,106,.14), transparent 32%), #101010; color:#F5F5F5; padding:1.5rem; transition:opacity .18s ease, visibility .18s ease; } .gs-startup-card-v143{ width:min(440px,100%); background:rgba(31,31,33,.88); border:1px solid rgba(0,196,106,.25); border-radius:28px; padding:1.4rem; text-align:center; box-shadow:0 30px 90px rgba(0,0,0,.46); } .gs-startup-logo-v143{font-size:1.55rem;font-weight:950;letter-spacing:-.05em;margin-bottom:.45rem;} .gs-startup-logo-v143 span{color:#00C46A;} .gs-startup-text-v143{color:var(--text-muted);font-weight:800;line-height:1.35;} .gs-startup-spinner-v143{ width:34px; height:34px; margin:0 auto 1rem; border-radius:999px; border:3px solid rgba(255,255,255,.12); border-top-color:#00C46A; animation:gsSpinV143 .8s linear infinite; } @keyframes gsSpinV143{to{transform:rotate(360deg)}} body.gs-app-ready-v143 .gs-startup-screen-v143{opacity:0;visibility:hidden;pointer-events:none;} body.gs-app-booting-v143 #view-auth, body.gs-app-booting-v143 #appNavbar, body.gs-app-booting-v143 #appMainLayout{display:none!important;} /* ===== Block: gs-v1-4-5-register-design-fix-css ===== */ /* GearSync Pro v1.4.5 – Registrierungsfenster: Text statt Emojis, sauberer Zeilenumbruch */ #view-auth label{ line-height: 1.2 !important; } .gs-user-type-grid-v141{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .7rem !important; } .gs-user-type-card-v141{ min-height: 96px !important; padding: .8rem .78rem !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: .3rem !important; overflow: hidden !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: auto !important; } .gs-user-type-card-v141 strong{ display:block !important; font-size: clamp(.92rem, 1.05vw, 1.02rem) !important; line-height: 1.12 !important; letter-spacing: -.025em !important; color: inherit !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; } .gs-user-type-card-v141 small{ margin-top: 0 !important; font-size: .72rem !important; line-height: 1.2 !important; overflow-wrap: normal !important; word-break: normal !important; color: var(--text-muted) !important; } .gs-user-type-option-v141 input:checked + .gs-user-type-card-v141 small{ color: rgba(245,245,245,.88) !important; } @media(max-width: 760px){ .gs-register-name-grid-v141{grid-template-columns:1fr !important; gap:.75rem !important;} .gs-user-type-grid-v141{grid-template-columns:1fr !important;} .gs-user-type-card-v141{min-height:auto !important; align-items:flex-start !important; padding:.9rem 1rem !important;} .gs-user-type-card-v141 strong{font-size:1rem !important;} } /* ===== Block: gs-v6-polish-patch-css ===== */ /* GearSync v6 Polish Patch */ .gs-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem} .gs-mode-btn{border:1px solid rgba(255,255,255,.08);background:#151515;color:#F5F5F5;border-radius:16px;padding:.85rem;font-weight:900;cursor:pointer} .gs-mode-btn.active{background:#00C46A!important;color:#08130D!important;border-color:#00C46A!important} .gs-result-card{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:18px;padding:1rem;margin-top:.8rem} .gs-result-card h4{margin:0 0 .35rem;color:#F5F5F5!important} .gs-result-card p{color:var(--text-muted);line-height:1.35} .gs-finance-details.open{display:block!important} .swipe-hint{font-size:.78rem;color:var(--text-muted);margin-top:.45rem} @media(max-width:768px){ .gs-mode-toggle{grid-template-columns:1fr} } /* ===== Block: gs-v22-compat-stabilisierung-css ===== */ /* GearSync v22 – Compatibility Check Stabilisierung */ .gs-compat-action{ width:100%; min-height:52px; border:0; border-radius:999px; background:#00C46A; color:#08130D; font-weight:950; cursor:pointer; margin-top:1rem; box-shadow:0 12px 28px rgba(0,196,106,.18); } .gs-compat-count{ color:var(--text-muted); font-size:.82rem; font-weight:850; margin:-.2rem 0 1rem; } .gs-compat-mode-note{color:var(--text-muted);font-size:.9rem;line-height:1.35;margin:.35rem 0 1rem} /* ===== Block: gs-v24-compat-ohne-pruefen-button-css ===== */ /* GearSync v24 – Kompatibilitätscheck ohne Prüfen-Button */ #view-compatibility #gsCompatAction, #view-compatibility #gsCompatCount{display:none!important;} #view-compatibility .compat-compare-box{cursor:pointer;} #view-compatibility .compat-compare-box:hover{border-color:rgba(0,196,106,.28)!important;} /* ===== Block: gs-v128-ab-vergleich-kaufentscheidung-css ===== */ /* GearSync v1.2.8 – A/B-Vergleich Kaufentscheidung */ #view-compatibility .compat-compare-box{cursor:pointer;} #view-compatibility .compat-compare-box:hover{border-color:rgba(0,196,106,.28)!important;} .gs-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;} .gs-section-head h3{color:var(--brand-color);margin:0 0 .35rem;font-size:1.35rem;} .gs-section-head p{color:var(--text-muted);margin:0;line-height:1.4;} .gs-ab-compare-section{margin-top:1.5rem;} .gs-ab-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1rem;background:#151515;border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:.45rem;} .gs-ab-mode-btn{min-height:48px;border-radius:16px;border:0;background:transparent;color:#F5F5F5;font-weight:950;cursor:pointer;} .gs-ab-mode-btn.active{background:#00C46A;color:#08130D;box-shadow:0 12px 28px rgba(0,196,106,.18);} .gs-ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;} .gs-ab-select-card{background:#151515;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:1rem;} .gs-ab-select-card label{display:block;font-weight:950;margin-bottom:.65rem;color:#F5F5F5;} .gs-ab-result{margin-top:1rem;} .gs-ab-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;} .gs-ab-product{border:1px solid rgba(255,255,255,.075);border-radius:22px;padding:1rem;min-width:0;box-shadow:0 14px 36px rgba(0,0,0,.18);} .gs-ab-product-a{background:linear-gradient(135deg,rgba(0,196,106,.13),rgba(31,31,33,.76));border-color:rgba(0,196,106,.20);} .gs-ab-product-b{background:linear-gradient(135deg,rgba(59,130,246,.10),rgba(31,31,33,.76));border-color:rgba(59,130,246,.18);} .gs-ab-product small{display:block;font-weight:950;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;margin-bottom:.3rem;} .gs-ab-product-a small{color:#00C46A}.gs-ab-product-b small{color:#93C5FD} .gs-ab-product strong{display:block;font-size:1.15rem;line-height:1.2;overflow-wrap:anywhere;} .gs-ab-product-meta{color:var(--text-muted);font-size:.85rem;font-weight:850;margin-top:.45rem;} .gs-ab-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin:1rem 0;} .gs-ab-summary-tile{background:#151515;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:.85rem;} .gs-ab-summary-tile small{display:block;color:var(--text-muted);font-size:.68rem;font-weight:950;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;} .gs-ab-summary-tile strong{font-size:1rem;line-height:1.25;overflow-wrap:anywhere;} .gs-ab-analysis{margin-top:1rem;background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:20px;padding:1rem;} .gs-ab-analysis h3{margin:0 0 .75rem;color:#F5F5F5!important;font-size:1.05rem;} .gs-ab-analysis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;} .gs-ab-analysis-card{background:rgba(31,31,33,.72);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:.9rem;} .gs-ab-analysis-card.ok{border-color:rgba(0,196,106,.35);} .gs-ab-analysis-card.warn{border-color:rgba(245,158,11,.35);} .gs-ab-analysis-kicker{color:#00C46A;font-weight:950;text-transform:uppercase;letter-spacing:.05em;font-size:.68rem;margin-bottom:.35rem;} .gs-ab-analysis-winner{font-weight:950;color:#F5F5F5;margin-bottom:.45rem;line-height:1.25;} .gs-ab-analysis-reasons{margin:.45rem 0 0;padding-left:1rem;color:#B8BBC2;font-size:.88rem;line-height:1.35;} .gs-ab-analysis-reasons li{margin:.22rem 0;} .gs-ab-analysis-note{color:var(--text-muted);font-size:.86rem;line-height:1.35;margin-top:.7rem;} .gs-ab-details-toggle{width:100%;margin-top:1rem;border:1px dashed rgba(0,196,106,.55);background:rgba(0,196,106,.06);color:#00C46A;border-radius:18px;padding:.95rem 1rem;font-weight:950;cursor:pointer;display:flex;justify-content:space-between;align-items:center;} .gs-ab-details{display:none;margin-top:1rem;} .gs-ab-details.open{display:block;} .gs-ab-table{width:100%;border-collapse:separate;border-spacing:0 .55rem;} .gs-ab-table th{color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:0 .65rem;} .gs-ab-table td{background:#151515;border-top:1px solid rgba(255,255,255,.065);border-bottom:1px solid rgba(255,255,255,.065);padding:.8rem .65rem;font-weight:850;vertical-align:top;} .gs-ab-table td:first-child{border-left:1px solid rgba(255,255,255,.065);border-radius:14px 0 0 14px;color:#AEB3BE;font-weight:950;width:30%;} .gs-ab-table td:last-child{border-right:1px solid rgba(255,255,255,.065);border-radius:0 14px 14px 0;} .gs-ab-cell-a{background:linear-gradient(135deg,rgba(0,196,106,.055),#151515)!important;} .gs-ab-cell-b{background:linear-gradient(135deg,rgba(59,130,246,.045),#151515)!important;} .gs-ab-cell-diff{box-shadow:inset 0 0 0 1px rgba(0,196,106,.16);} .gs-ab-empty{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:18px;padding:1rem;color:var(--text-muted);font-weight:850;} @media(max-width:768px){.gs-ab-grid,.gs-ab-product-grid{grid-template-columns:1fr}.gs-ab-analysis-grid{grid-template-columns:1fr}.gs-ab-analysis{padding:.85rem;border-radius:18px}.gs-ab-table{font-size:.9rem}.gs-ab-table td:first-child{width:36%}} /* ===== Block: gs-v26-ab-vergleich-eigene-seite-css ===== */ /* GearSync v26 – A/B-Vergleich als eigene Seite */ #view-compatibility .compat-compare-box{display:none!important;} #view-abcompare .gs-ab-compare-section{margin-top:0;} /* ===== Block: gs-v31-finales-menue-css ===== */ /* GearSync v31 – finales Menü für Version 1.0 */ .sidebar{ padding-top:4.75rem!important; display:flex!important; flex-direction:column!important; } .gs-menu-shell{ height:100%; display:flex; flex-direction:column; padding:0 1rem 1rem; } .gs-menu-title{ color:#F5F5F5; font-size:.82rem; font-weight:950; text-transform:uppercase; letter-spacing:.08em; margin:.25rem 0 .9rem; opacity:.72; } .gs-menu-list{ padding:0!important; margin:0!important; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; } .gs-menu-section-label{ list-style:none; color:#7F858F; font-size:.72rem; font-weight:950; text-transform:uppercase; letter-spacing:.08em; padding:.9rem .85rem .45rem; } .gs-menu-settings-placeholder{ display:none!important; } .gs-menu-item{ position:relative; display:flex!important; align-items:center; gap:.8rem; min-height:52px; padding:.85rem .95rem!important; border-radius:16px!important; border:1px solid transparent!important; margin-bottom:.45rem!important; color:#A9AFBA!important; font-weight:900!important; background:transparent!important; width:100%; text-align:left; } .gs-menu-item:hover{ color:#F5F5F5!important; background:rgba(255,255,255,.055)!important; } .gs-menu-item.active{ color:#F5F5F5!important; background:linear-gradient(135deg, rgba(0,196,106,.14), rgba(255,255,255,.035))!important; border-color:rgba(0,196,106,.32)!important; box-shadow:inset 4px 0 0 #00C46A, 0 12px 32px rgba(0,0,0,.22)!important; } .gs-menu-icon{ width:24px; height:24px; flex:0 0 24px; color:currentColor; display:inline-flex; align-items:center; justify-content:center; } .gs-menu-icon svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .gs-menu-item.active .gs-menu-icon{ color:#00C46A; } .gs-menu-logout{ margin-top:auto!important; color:#EF4444!important; border-color:rgba(239,68,68,.22)!important; background:rgba(239,68,68,.045)!important; } .gs-menu-logout:hover{ background:rgba(239,68,68,.10)!important; color:#FF6B6B!important; } .gs-menu-logout .gs-menu-icon{ color:#EF4444; } @media(max-width:768px){ .sidebar{padding-top:4.25rem!important;} .gs-menu-shell{padding:.15rem 1rem 1rem;} .gs-menu-title{margin:.15rem 0 .75rem;} .gs-menu-item{min-height:50px!important;font-size:1rem!important;} } /* GearSync v47 – Mobile Menü sauber scroll- und bedienbar */ .gs-menu-shell{min-height:0!important;} .gs-menu-list{min-height:0!important;max-height:calc(100vh - 11.5rem)!important;overflow-y:auto!important;padding-right:.2rem!important;} .gs-menu-logout{flex:0 0 auto!important;margin:0 0 env(safe-area-inset-bottom,0)!important;} @media(max-width:768px){ :root{--sidebar-width:86vw!important;} .sidebar{max-width:370px!important;} .gs-menu-shell{padding:.2rem .75rem .75rem!important;} .gs-menu-title{font-size:.72rem!important;margin:.05rem 0 .45rem!important;} .gs-menu-section-label{font-size:.66rem!important;padding:.55rem .65rem .25rem!important;} .gs-menu-item{min-height:43px!important;padding:.62rem .7rem!important;margin-bottom:.28rem!important;border-radius:14px!important;font-size:.92rem!important;gap:.65rem!important;} .gs-menu-icon{width:21px!important;height:21px!important;flex-basis:21px!important;} .gs-menu-list{max-height:calc(100vh - 9.6rem)!important;} .gs-menu-logout{min-height:45px!important;margin-top:.45rem!important;} } /* ===== Block: gs-v33-inventory-icon-final-fix ===== */ /* GearSync v33 – Inventory tile icon final fix The old mask based fallback could render as green squares if data-key was missing. We disable the pseudo icon and render the existing SVG icon element directly. */ .inv-tile::before{display:none!important;content:none!important;-webkit-mask:none!important;mask:none!important;background:none!important;} .inv-tile{padding-top:1rem!important;} .inv-tile .inv-tile-icon{display:inline-flex!important;width:38px!important;height:38px!important;margin-bottom:.35rem!important;color:#00C46A!important;font-size:0!important;line-height:0!important;align-items:center!important;justify-content:center!important;} .inv-tile .inv-tile-icon .gs-icon{width:38px!important;height:38px!important;color:#00C46A!important;display:inline-flex!important;} .inv-tile .inv-tile-icon .gs-icon svg{width:100%!important;height:100%!important;stroke:currentColor!important;fill:none!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;} @media(max-width:768px){.inv-tile{padding-top:.85rem!important}.inv-tile .inv-tile-icon{width:34px!important;height:34px!important}.inv-tile .inv-tile-icon .gs-icon{width:34px!important;height:34px!important}} /* ===== Block: gs-v58-cases-auth-ui-fix-css ===== */ /* v58: Koffer-Toolbar und Auth-Startansicht stabilisieren */ .gs-case-toolbar-v58{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:2rem; } .gs-case-toolbar-v58 h2{margin:0!important;color:#F5F5F5!important;} .gs-case-toolbar-actions-v58{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:flex-end;} .gs-case-toolbar-actions-v58 .btn-custom-add, .gs-case-toolbar-actions-v58 .edit-gear-btn{margin:0!important;width:auto!important;white-space:nowrap;} @media(max-width:768px){ .gs-case-toolbar-v58{display:grid;grid-template-columns:1fr;gap:.75rem;margin-bottom:1rem;} .gs-case-toolbar-actions-v58{display:grid;grid-template-columns:1fr;gap:.55rem;} .gs-case-toolbar-actions-v58 .btn-custom-add, .gs-case-toolbar-actions-v58 .edit-gear-btn{width:100%!important;min-height:48px!important;} } /* ===== Block: gs-v67-language-settings-css ===== */ /* GearSync Pro v67 – Spracheinstellung */ .gs-app-settings-block-v67{ margin-top:1.25rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08); } .gs-lang-inline-note-v67{ display:inline-flex; align-items:center; gap:.35rem; color:var(--text-muted); font-size:.86rem; font-weight:800; } /* ===== Block: gs-v86-language-currency-css ===== */ /* GearSync Pro v86 – Sprache + Währung */ .gs-currency-note-v86{color:var(--text-muted);font-size:.86rem;font-weight:800;line-height:1.35;margin-top:.45rem;} .gs-settings-mini-grid-v86{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;} @media(max-width:768px){.gs-settings-mini-grid-v86{grid-template-columns:1fr;}} /* ===== Block: gs-v89-rc20-ui-polish-safe ===== */ /* ============================================================ GearSync Pro v89 RC20 – UI Feinschliff ------------------------------------------------------------ Nur visuelle Glättung. Keine Datenlogik, kein Sync, keine Koffer-/Inventar-/Realtime-Funktionen werden verändert. ============================================================ */ :root{ --gs-radius-xl: 28px; --gs-radius-lg: 22px; --gs-radius-md: 16px; --gs-soft-border: rgba(255,255,255,.085); --gs-soft-fill: rgba(31,31,33,.84); } /* bessere Lesbarkeit und ruhigeres Rendering */ body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Header: ruhiger und weniger wuchtig auf kleinen Screens */ .navbar{ box-shadow: 0 10px 28px rgba(0,0,0,.22) !important; } .logo{ letter-spacing:-.055em !important; } #userDisplayEmail{ opacity:.88; } /* Einheitlichere Karten */ .search-container, .planer-box, .dashboard-box, .dashboard-main-card, .dashboard-side-card, .product-card, .catalog-card, .gear-card-modern, .preset-card, .stats-card, .inventory-detail, .home-hero-v8, .home-metric-v8, .home-last-v8, .home-cat-v8, .gs-dev-card, .gs-finance-card, .gs-finance-summary, .gs-finance-table-wrap{ border-color: var(--gs-soft-border) !important; } /* Buttons: konsistente Höhe und mehr Touch-Komfort */ button, .btn-save, .btn-delete, .btn-cancel, .add-gear-btn, .edit-gear-btn, .dashboard-action-btn, .home-actions-v8 button, .tab-btn, .sub-tab-btn, .p-tab-btn{ min-height:44px; touch-action:manipulation; } button:active, .add-gear-btn:active, .edit-gear-btn:active, .btn-save:active, .btn-cancel:active, .home-actions-v8 button:active{ transform: translateY(1px) scale(.995); } /* Fokus sichtbar, aber nicht grell */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline: 2px solid rgba(0,196,106,.72) !important; outline-offset: 3px; } /* Inputs optisch ruhiger */ input,select,textarea,.form-control,.main-search-input{ transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; } /* Tabellen/Karten im Finanztresor mobil lesbarer */ .gs-finance-card, .gs-finance-row, .financial-table td, .financial-table th{ line-height:1.28; } /* Inventar-Kacheln: weniger flackernde Hover-Effekte auf Touch */ @media (hover:hover){ .product-card:hover, .catalog-card:hover, .gear-card-modern:hover, .home-cat-v8:hover{ border-color:rgba(0,196,106,.32) !important; } } @media (hover:none){ .product-card:hover, .catalog-card:hover, .gear-card-modern:hover, .home-cat-v8:hover{ transform:none !important; box-shadow:0 18px 50px rgba(0,0,0,.28) !important; } } /* Toasts auf Smartphone nicht über die Navigation quetschen */ .toast{ max-width:min(520px, calc(100vw - 2rem)); line-height:1.25; } /* Mobile Layout Feinschliff */ @media(max-width:768px){ .navbar{ min-height:62px !important; padding:.82rem 1rem !important; } .main-content{ padding:1rem .9rem 2.25rem !important; } .view-section > h1:first-child, .view-section > h2:first-child, .view-section > .section-title:first-child{ margin-top:.25rem; } .product-card, .catalog-card, .preset-card, .gear-card-modern, .home-hero-v8, .home-metric-v8, .home-last-v8, .home-cat-v8, .search-container, .planer-box, .dashboard-box, .inventory-detail{ border-radius:20px !important; } .home-actions-v8 button, .dashboard-action-btn, .add-gear-btn, .edit-gear-btn, .btn-save, .btn-cancel, .btn-delete{ min-height:50px !important; } .home-hero-v8 h1, .dashboard-main-card h1{ line-height:1.05 !important; } .home-last-v8{ align-items:stretch; } .inventory-overview, .dashboard-stat-grid, .home-topline-v8{ gap:.65rem !important; } .edit-modal{ box-shadow:0 -18px 60px rgba(0,0,0,.52) !important; } .modal-footer{ padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px)) !important; } footer, .footer{ padding-bottom:calc(1.2rem + env(safe-area-inset-bottom, 0px)) !important; } } /* sehr kleine Geräte */ @media(max-width:390px){ .logo{font-size:1.16rem !important;} #userDisplayEmail{max-width:104px !important;} .main-content{padding-left:.78rem !important;padding-right:.78rem !important;} .product-image{min-height:122px !important;} } /* ===== Block: gs-v90-release-shell-polish ===== */ /* GearSync Pro v90 RC21 – sichere Shell-Verbesserungen ohne App-Logik */ .gs-network-banner{ position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:10000; display:none;padding:.95rem 1rem;border-radius:18px; background:#151515;color:#F5F5F5;border:1px solid rgba(245,158,11,.45); box-shadow:0 18px 50px rgba(0,0,0,.38);font-weight:900;text-align:center; } .gs-network-banner strong{color:#F59E0B;} .gs-app-error-card{ background:rgba(31,31,33,.86);border:1px solid rgba(255,255,255,.075); border-radius:24px;padding:1.25rem;margin:1rem 0;box-shadow:0 18px 50px rgba(0,0,0,.28); } .gs-app-error-card h2{color:#00C46A!important;margin:0 0 .5rem;} .gs-app-error-card p{color:#9CA3AF;line-height:1.45;margin:0 0 1rem;} .gs-app-error-card button{width:100%;min-height:48px;border-radius:999px;border:0;background:#00C46A;color:#08130D;font-weight:950;cursor:pointer;} /* ===== Block: gs-v104-inventory-patch-style ===== */ /* GearSync Pro v1.0.4 – Inventar Patch: Dezimalpreise, Anzahl, Maße, Seriennummer */ .gs-inventory-edit-block{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:18px;padding:1rem;margin:1rem 0;} .gs-inventory-edit-block h4{margin:0 0 .85rem;color:#00C46A;font-size:.95rem;} .gs-inventory-edit-block .form-row-grid{margin-bottom:.75rem;} .gs-inventory-edit-block .form-row-grid:last-child{margin-bottom:0;} /* ===== Block: gs-phase2-case-archive-style ===== */ /* GearSync Phase 2.1 – Koffer-Archiv */ .gs-case-archive-note{margin:.85rem 0 0;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.32);color:#F6C66B;border-radius:16px;padding:.75rem .85rem;font-weight:850;line-height:1.35} .gs-case-archive-note button{margin-top:.55rem;width:100%;min-height:42px;border-radius:14px;border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.12);color:#F6C66B;font-weight:950;cursor:pointer} .gs-case-archive-section{grid-column:1/-1;margin-top:1.2rem;border:1px solid rgba(255,255,255,.075);background:rgba(31,31,33,.72);border-radius:24px;overflow:hidden} .gs-case-archive-section summary{list-style:none;cursor:pointer;padding:1rem 1.15rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#00C46A;font-weight:950} .gs-case-archive-section summary::-webkit-details-marker{display:none} .gs-case-archive-content{padding:0 1rem 1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem} .gs-case-archive-empty{color:var(--text-muted);padding:.2rem 0 1rem;font-weight:800} .gs-case-archived-card{opacity:.82} .gs-case-archived-pill{display:inline-flex;align-items:center;gap:.35rem;margin:.65rem 0 0;padding:.32rem .6rem;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:var(--text-muted);font-size:.74rem;font-weight:950;text-transform:uppercase;letter-spacing:.035em} @media(max-width:768px){.gs-case-archive-content{grid-template-columns:1fr;padding:.85rem}.gs-case-actions-v110{grid-template-columns:1fr!important}} /* ===== Block: gs-v111-archive-settings-style ===== */ /* GearSync Pro v1.1.1 – Archiv-Einstellungen + kompaktes Archiv */ .gs-archive-settings-card{display:grid;gap:1rem} .gs-settings-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1rem} .gs-settings-toggle strong{display:block;color:#F5F5F5;margin-bottom:.25rem}.gs-settings-toggle span{display:block;color:var(--text-muted);line-height:1.35;font-weight:700;font-size:.9rem}.gs-settings-toggle input{width:auto!important;transform:scale(1.15);margin-top:.2rem}.gs-archive-delay-wrap{background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1rem}.gs-archive-delay-wrap.is-disabled{opacity:.45;pointer-events:none}.gs-archive-coming-soon{background:rgba(0,196,106,.06);border:1px dashed rgba(0,196,106,.28);border-radius:18px;padding:1rem;color:var(--text-muted);font-weight:800}.gs-archive-search{padding:0 1rem 1rem}.gs-archive-search input{width:100%;min-height:46px;border-radius:16px;background:#111;border:1px solid rgba(255,255,255,.10);color:#F5F5F5;padding:.8rem .95rem;font-weight:850}.gs-case-archive-content{display:grid!important;grid-template-columns:1fr!important;gap:.75rem!important}.gs-archive-item{border:1px solid rgba(255,255,255,.075);background:rgba(20,20,21,.76);border-radius:20px;overflow:hidden}.gs-archive-item-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;background:transparent;border:0;color:#F5F5F5;text-align:left;cursor:pointer}.gs-archive-item-title{min-width:0}.gs-archive-item-title .product-eyebrow{margin-bottom:.25rem}.gs-archive-item-title h3{margin:0;color:#F5F5F5!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gs-archive-item-meta{color:var(--text-muted);font-size:.82rem;font-weight:900;margin-top:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gs-archive-chevron{color:#00C46A;font-size:1.25rem;font-weight:950;flex:0 0 auto}.gs-archive-item-body{display:none;padding:0 1rem 1rem}.gs-archive-item.open .gs-archive-item-body{display:block}.gs-archive-no-results{color:var(--text-muted);font-weight:850;padding:1rem;text-align:center} @media(max-width:768px){.gs-case-archive-section summary{padding:1rem}.gs-archive-search{padding:.85rem}.gs-archive-item-head{padding:.95rem}.gs-archive-item-body{padding:0 .85rem .85rem}.gs-archive-item-body .preset-card{border-radius:18px;padding:0;background:transparent;border:0;box-shadow:none}} /* ===== Block: gs-v114-case-checklist-style ===== */ /* GearSync Pro v1.1.4 – Koffer-Checkliste */ .gs-checklist-open-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:42px;border-radius:14px;border:1px solid rgba(0,196,106,.38);background:rgba(0,196,106,.10);color:#00C46A;font-weight:950;cursor:pointer;padding:.55rem .75rem;white-space:nowrap} .gs-checklist-open-btn:hover{background:rgba(0,196,106,.18)} .gs-checklist-top-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto} .gs-checklist-archive-head-btn{min-width:42px;min-height:42px;padding:0;border-radius:14px;margin-left:auto;margin-right:.25rem} .gs-checklist-modal-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.74);display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(8px)} .gs-checklist-modal{width:min(720px,100%);max-height:92vh;overflow:auto;background:#1d1d1f;border:1px solid rgba(255,255,255,.10);border-radius:26px;box-shadow:0 24px 80px rgba(0,0,0,.55);padding:1.25rem} .gs-checklist-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem} .gs-checklist-modal h3{margin:0;color:#F5F5F5!important;font-size:1.35rem}.gs-checklist-modal p{margin:.35rem 0 0;color:var(--text-muted);font-weight:800} .gs-checklist-close{border:0;background:rgba(255,255,255,.08);color:#F5F5F5;border-radius:14px;min-width:44px;min-height:44px;font-size:1.2rem;font-weight:950;cursor:pointer} .gs-checklist-section{background:#121212;border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:1rem;margin-top:1rem} .gs-checklist-section-title{display:flex;align-items:center;justify-content:space-between;gap:.75rem;color:#00C46A;font-weight:950;margin-bottom:.75rem} .gs-checklist-list{display:flex;flex-direction:column;gap:.55rem}.gs-checklist-row{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055)} .gs-checklist-row input[type="checkbox"]{width:22px;height:22px;accent-color:#00C46A;flex:0 0 auto}.gs-checklist-row span{font-weight:850;color:#F5F5F5;line-height:1.3}.gs-checklist-row.done span{text-decoration:line-through;color:var(--text-muted)} .gs-checklist-delete{margin-left:auto;border:0;background:rgba(239,68,68,.16);color:#ff6b6b;border-radius:12px;min-width:38px;min-height:38px;font-weight:950;cursor:pointer} .gs-checklist-add{display:grid;grid-template-columns:1fr auto;gap:.6rem;margin-top:.75rem}.gs-checklist-add input{min-height:48px;border-radius:16px;background:#0e0e0f;border:1px solid rgba(255,255,255,.10);color:#F5F5F5;padding:.75rem 1rem;font-weight:850}.gs-checklist-add button,.gs-checklist-print{min-height:48px;border-radius:16px;border:1px solid rgba(0,196,106,.35);background:rgba(0,196,106,.12);color:#00C46A;font-weight:950;padding:0 1rem;cursor:pointer}.gs-checklist-print{width:100%;margin-top:1rem} @media(max-width:768px){.gs-checklist-modal-overlay{align-items:flex-end;padding:.75rem}.gs-checklist-modal{max-height:88vh;border-radius:24px 24px 18px 18px;padding:1rem}.gs-checklist-add{grid-template-columns:1fr}.gs-checklist-open-btn{min-width:42px;padding:.55rem}.gs-checklist-open-btn .gs-checklist-btn-text{display:none}} /* ===== Block: gs-loan-system-v126-css ===== */ .gs-loan-badge-v126{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.24rem .58rem;font-size:.72rem;font-weight:950;border:1px solid rgba(255,255,255,.12);margin:.35rem .35rem 0 0;line-height:1.15;white-space:normal}.gs-loan-owned-v126{background:rgba(0,196,106,.12);border-color:rgba(0,196,106,.34);color:#00C46A}.gs-loan-out-v126{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.42);color:#f59e0b}.gs-loan-borrowed-v126{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.42);color:#60a5fa}.gs-loan-panel-v126{background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1rem;margin-top:1rem}.gs-loan-panel-v126 h4{color:#00C46A!important;margin:0 0 .75rem;font-size:.98rem}.gs-loan-status-grid-v126{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:.55rem 0 1rem}.gs-loan-status-btn-v126{min-height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:#f5f5f5;font-weight:950;cursor:pointer}.gs-loan-status-btn-v126.active[data-status="owned"]{background:#00C46A;color:#08130D;border-color:#00C46A}.gs-loan-status-btn-v126.active[data-status="lent_out"]{background:#f59e0b;color:#111;border-color:#f59e0b}.gs-loan-status-btn-v126.active[data-status="borrowed"]{background:#3b82f6;color:#fff;border-color:#3b82f6}.gs-loan-fields-v126{display:none}.gs-loan-fields-v126.open{display:block}.gs-loan-note-v126{border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.10);color:#f8d08a;border-radius:14px;padding:.75rem .85rem;margin:.75rem 0;font-weight:850;line-height:1.35}.gs-loan-note-v126.borrowed{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.10);color:#93c5fd}.gs-dashboard-loan-v126{background:rgba(31,31,33,.86);border:1px solid rgba(255,255,255,.075);border-radius:24px;padding:1rem;margin-top:1rem}.gs-dashboard-loan-v126 h3{color:#00C46A!important;margin:0 0 .65rem}.gs-dashboard-loan-grid-v126{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.gs-dashboard-loan-cell-v126{background:#151515;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:.85rem}.gs-dashboard-loan-cell-v126 small{display:block;color:var(--text-muted);font-size:.68rem;font-weight:950;text-transform:uppercase}.gs-dashboard-loan-cell-v126 strong{display:block;margin-top:.25rem;font-size:1.35rem}.gs-loan-list-v126{margin-top:.75rem;color:var(--text-muted);font-size:.88rem;line-height:1.5}@media(max-width:720px){.gs-loan-status-grid-v126{grid-template-columns:1fr}.gs-dashboard-loan-grid-v126{grid-template-columns:1fr}.gs-loan-panel-v126{padding:.85rem}} /* ===== Block: gs-business-finance-v127-css ===== */ .gs-user-type-v127{border:1px solid rgba(0,196,106,.24);background:rgba(0,196,106,.06);border-radius:20px;padding:1rem;margin:1rem 0}.gs-user-type-v127 h4{color:#00C46A;margin:0 0 .5rem}.gs-user-type-grid-v127{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.gs-user-type-option-v127{display:flex;gap:.6rem;align-items:flex-start;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:.85rem;cursor:pointer}.gs-user-type-option-v127 input{width:auto!important;margin-top:.2rem}.gs-user-type-option-v127 strong{display:block}.gs-user-type-option-v127 span{display:block;color:var(--text-muted);font-size:.82rem;line-height:1.35;margin-top:.15rem}.gs-finance-mode-card-v127{border:1px solid rgba(0,196,106,.24);background:linear-gradient(135deg,rgba(0,196,106,.10),rgba(31,31,33,.82));border-radius:22px;padding:1rem;margin-bottom:1rem}.gs-finance-mode-card-v127 strong{color:#00C46A}.gs-finance-pro-grid-v127{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.8rem}.gs-finance-pro-pill-v127{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:16px;padding:.85rem}.gs-finance-pro-pill-v127 small{display:block;color:var(--text-muted);font-weight:950;text-transform:uppercase;font-size:.68rem;margin-bottom:.25rem}.gs-finance-pro-pill-v127 b{font-size:1.1rem}.gs-business-fields-v127{background:#151515;border:1px solid rgba(0,196,106,.18);border-radius:18px;padding:1rem;margin-top:1rem}.gs-business-fields-v127 h4{color:#00C46A;margin:0 0 .75rem}.gs-business-hidden-v127{display:none!important}@media(max-width:720px){.gs-user-type-grid-v127,.gs-finance-pro-grid-v127{grid-template-columns:1fr}} /* ===== Block: gs-v132-koffer-polish-css ===== */ /* GearSync v1.3.2 – Koffer-Planer Feinschliff */ #presetGrid{ align-items:start !important; } #presetGrid .preset-card{ align-self:start !important; height:auto !important; } .gs-availability-label-v132{ grid-column:1 / -1; color:var(--text-muted); font-size:.74rem; font-weight:850; line-height:1.25; margin:.22rem .15rem .15rem; opacity:.86; } .gs-availability-label-v132 strong{ color:#00C46A; font-weight:950; } .gs-mobile-case-carousel-v132{ display:contents; } @media(min-width:769px){ #presetGrid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:1.25rem !important; align-items:start !important; } #presetGrid > .preset-card{ min-width:0 !important; } } @media(max-width:768px){ #presetGrid{ display:grid !important; grid-template-columns:1fr !important; gap:1rem !important; } #presetGrid .gs-mobile-case-carousel-v132{ grid-column:1 / -1; display:flex !important; gap:.85rem !important; overflow-x:auto !important; overflow-y:hidden !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:.15rem 1rem .75rem 0; margin-right:-1rem; scrollbar-width:none; } #presetGrid .gs-mobile-case-carousel-v132::-webkit-scrollbar{display:none;} #presetGrid .gs-mobile-case-carousel-v132 > .preset-card{ flex:0 0 min(88vw, 420px) !important; width:min(88vw, 420px) !important; max-width:min(88vw, 420px) !important; scroll-snap-align:start; margin:0 !important; } #presetGrid > .gs-case-archive-section{ grid-column:1 / -1; margin-top:.35rem !important; } } /* ===== Block: gs-v1-4-2-onboarding-devtools-css ===== */ /* GearSync Pro v1.4.2 – Onboarding-Testbutton in Entwicklertools */ .gs-dev-onboarding-actions-v142{display:grid;gap:.75rem;margin-top:1rem;} .gs-dev-onboarding-note-v142{color:var(--text-muted);font-size:.9rem;line-height:1.45;margin-top:.65rem;} .gs-dev-onboarding-btn-v142{min-height:48px;border-radius:999px!important;border:1px solid rgba(0,196,106,.55)!important;background:rgba(0,196,106,.10)!important;color:#00C46A!important;font-weight:950!important;cursor:pointer;padding:.8rem 1rem!important;} .gs-dev-onboarding-btn-v142:hover{background:rgba(0,196,106,.16)!important;border-color:rgba(0,196,106,.85)!important;} /* ===== Block: gs-v1-4-4-ux-stabilisierung-css ===== */ /* GearSync Pro v1.4.5 – Menü-Scrollbar, Dev-Ansichten, stabiler Start */ .sidebar, .gs-menu-shell{ scrollbar-width: thin; scrollbar-color: rgba(0,196,106,.45) transparent; } .sidebar::-webkit-scrollbar, .gs-menu-shell::-webkit-scrollbar{ width: 8px; height: 8px; } .sidebar::-webkit-scrollbar-track, .gs-menu-shell::-webkit-scrollbar-track{ background: transparent; } .sidebar::-webkit-scrollbar-thumb, .gs-menu-shell::-webkit-scrollbar-thumb{ background: rgba(0,196,106,.45); border-radius: 999px; border: 2px solid rgba(18,18,18,.96); } .sidebar::-webkit-scrollbar-thumb:hover, .gs-menu-shell::-webkit-scrollbar-thumb:hover{ background: rgba(0,196,106,.72); } .sidebar::-webkit-scrollbar-corner, .gs-menu-shell::-webkit-scrollbar-corner{ background: transparent; } .gs-auth-preview-actions-v144{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1rem;} .gs-auth-preview-actions-v144 button{min-height:48px;border-radius:999px;border:1px solid rgba(0,196,106,.45);background:rgba(0,196,106,.08);color:#00C46A;font-weight:950;cursor:pointer;} .gs-auth-preview-actions-v144 button:hover{background:rgba(0,196,106,.14);} .gs-dev-note-v144{color:var(--text-muted);font-size:.88rem;line-height:1.45;margin-top:.75rem;} body.gs-app-booting-v143 #dashboardHome{visibility:hidden;} @media(max-width:720px){.gs-auth-preview-actions-v144{grid-template-columns:1fr;}} /* ===== Block: gearsync-v49-accessory-mobile-layout-fix ===== */ /* v49: Mobile fix for accessory group/subcategory layout */ #subcatPanel .accessory-group-summary, #subcatPanel .accessory-group-content .sub-tab-btn{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:.75rem !important; text-align:left !important; } #subcatPanel .accessory-group-summary > span:first-child, #subcatPanel .accessory-group-content .sub-tab-btn > span:first-child{ display:flex !important; align-items:center !important; gap:.55rem !important; min-width:0 !important; flex:1 1 auto !important; line-height:1.15 !important; } #subcatPanel .accessory-group-chevron, #subcatPanel .catalog-chevron{ position:static !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; width:1rem !important; min-width:1rem !important; margin:0 !important; transform:none !important; color:#00C46A !important; } #subcatPanel .catalog-count-badge{ flex:0 0 auto !important; margin-left:.5rem !important; position:static !important; transform:none !important; } #subcatPanel .accessory-group-content .sub-tab-btn{ min-height:58px !important; padding:.85rem 1rem !important; border-radius:16px !important; } @media(max-width:768px){ #subcatPanel{ padding:.7rem !important; } #subcatPanel .accessory-group-wrap{ display:flex !important; flex-direction:column !important; gap:.75rem !important; } #subcatPanel .accessory-group-col{ display:contents !important; } #subcatPanel .accessory-group-content{ display:grid !important; grid-template-columns:1fr !important; gap:.65rem !important; padding:.7rem !important; } #subcatPanel .accessory-group-summary{ min-height:64px !important; padding:.95rem 1rem !important; } #subcatPanel .accessory-group-content .sub-tab-btn{ width:100% !important; min-width:0 !important; } } @media(min-width:769px){ #subcatPanel .accessory-group-content{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } /* ===== Block: gs-v88-performance-safe-css ===== */ /* ============================================================ GearSync Pro v88 RC19 – Performance Safe CSS ------------------------------------------------------------ Nur Rendering-Optimierung. Keine Datenlogik, kein Sync, kein Koffer-/Inventar-Speicherpfad. ============================================================ */ .catalog-card, .gear-card-modern, .preset-card, .stats-card, .dashboard-box, .search-container, .planer-box, .gs-finance-card, .gs-dev-card { content-visibility: auto; contain-intrinsic-size: 1px 320px; } @media (max-width: 768px) { .catalog-card:hover, .preset-card:hover, .gear-card-modern:hover, .product-card:hover { transform: none !important; box-shadow: 0 18px 50px rgba(0,0,0,.28) !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ===== Block: gs-v112-archive-ui-fix-style ===== */ /* GearSync Pro v1.1.2 – Archiv UI Fix */ #view-planer::after{content:""!important;display:none!important;} .gs-case-toolbar-actions-v58{display:flex!important;gap:.75rem!important;align-items:stretch!important;justify-content:flex-end!important;} .gs-case-toolbar-actions-v58 button{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;} @media(max-width:768px){ .gs-case-toolbar-actions-v58{display:grid!important;grid-template-columns:1fr!important;width:100%!important;} .gs-case-toolbar-actions-v58 button{width:100%!important;min-height:56px!important;justify-content:center!important;text-align:center!important;} } .gs-archive-search-v112{margin:.75rem 0 1rem;} .gs-archive-search-v112 input{width:100%;min-height:48px;border-radius:16px;background:#111;border:1px solid rgba(255,255,255,.10);color:#F5F5F5;padding:.85rem 1rem;font-weight:850;} .gs-archive-item-v112{border:1px solid rgba(255,255,255,.08);background:rgba(20,20,21,.78);border-radius:20px;overflow:hidden;margin:.75rem 0;} .gs-archive-head-v112{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;background:transparent;border:0;color:#F5F5F5;text-align:left;cursor:pointer;} .gs-archive-title-v112{min-width:0;} .gs-archive-title-v112 .product-eyebrow{margin-bottom:.25rem;} .gs-archive-title-v112 h3{margin:0;color:#F5F5F5!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.15rem;} .gs-archive-meta-v112{margin-top:.35rem;color:var(--text-muted);font-weight:850;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .gs-archive-chevron-v112{color:#00C46A;font-size:1.25rem;font-weight:950;flex:0 0 auto;} .gs-archive-body-v112{display:none;padding:0 .85rem .85rem;} .gs-archive-item-v112.open .gs-archive-body-v112{display:block;} .gs-archive-no-results-v112{display:none;color:var(--text-muted);font-weight:850;text-align:center;padding:1rem;} .gs-archive-body-v112>.preset-card{margin:0!important;border-radius:18px!important;} @media(max-width:768px){.gs-archive-head-v112{padding:.95rem}.gs-archive-body-v112{padding:0 .7rem .7rem}.gs-archive-body-v112>.preset-card{padding:1rem!important}} /* ===== Block: gs-v116-dashboard-usage-capture-style ===== */ /* GearSync Pro v1.1.7 – Dashboard Nutzung erfassen UI Fix */ #gsDashboardUsageBtnV116{ background:#181a19!important; color:#F5F5F5!important; border:1px solid rgba(255,255,255,.1)!important; } .gs-usage-modal-v116{position:fixed;inset:0;background:rgba(0,0,0,.76);display:none;align-items:center;justify-content:center;z-index:10020;padding:1rem;} .gs-usage-modal-v116.open{display:flex;} .gs-usage-box-v116{width:min(520px,100%);background:#1C1C1E;border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:1.15rem;box-shadow:0 30px 90px rgba(0,0,0,.58);} .gs-usage-box-v116 h3{margin:0 0 .35rem;color:#00C46A!important;font-size:1.25rem;letter-spacing:-.035em;} .gs-usage-box-v116 p{margin:0 0 1rem;color:var(--text-muted);line-height:1.4;font-weight:750;} .gs-usage-select-v116{width:100%;min-height:52px;border-radius:16px;background:#151515;border:1px solid rgba(255,255,255,.10);color:#F5F5F5;padding:.85rem 1rem;font-weight:850;font-size:1rem;} .gs-usage-actions-v116{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem;} .gs-usage-actions-v116 button{min-height:48px;border-radius:14px;font-weight:950;cursor:pointer;} .gs-usage-cancel-v116{background:#151515;color:#F5F5F5;border:1px solid rgba(255,255,255,.10);} .gs-usage-save-v116{background:#00C46A;color:#08130D;border:1px solid #00C46A;} .gs-usage-hint-v116{margin-top:.75rem;color:var(--text-muted);font-size:.82rem;line-height:1.35;} @media(max-width:768px){.gs-usage-box-v116{border-radius:24px;padding:1rem}.gs-usage-actions-v116{grid-template-columns:1fr}} /* v1.1.8: Dashboard-Button direkt im Render-Template + saubere Desktop-Höhen */ #dashboardHome .dash-actions-v11{grid-template-columns:1fr 1fr!important;} #dashboardHome .dash-actions-v11 .primary{grid-column:auto!important;} @media(min-width:769px){ #dashboardHome .dashboard-clean-v11.gs-dashboard-v62{ display:grid!important; grid-template-columns:1.25fr .85fr!important; align-items:stretch!important; gap:1rem!important; } #dashboardHome .gs-dashboard-v62 .dash-hero-v11{ grid-column:1!important; grid-row:1!important; min-height:0!important; height:auto!important; } #dashboardHome .gs-dashboard-v62 .dash-next-v11{ grid-column:2!important; grid-row:1!important; min-height:0!important; height:auto!important; display:flex!important; flex-direction:column!important; } #dashboardHome .gs-dashboard-v62 .dash-next-v11 .details-toggle{ margin-top:auto!important; } #dashboardHome .gs-dashboard-v62 .dash-stats-v11, #dashboardHome .gs-dashboard-v62 .dash-goal-v11{ grid-column:1 / -1!important; } } @media(max-width:768px){ #dashboardHome .dash-actions-v11{grid-template-columns:1fr!important;} } /* v1.1.8: Koffer-Aktionsbuttons sauber umbrechen, damit nichts aus der Karte läuft */ #presetGrid .gs-case-actions-v110{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:.65rem!important; align-items:stretch!important; } #presetGrid .gs-case-actions-v110 button{ width:100%!important; min-width:0!important; min-height:46px!important; margin:0!important; padding:.7rem .85rem!important; white-space:normal!important; overflow-wrap:anywhere!important; line-height:1.15!important; } #presetGrid .gs-case-actions-v110 .btn-delete{ background:#ef4444!important; color:#fff!important; } @media(max-width:520px){ #presetGrid .gs-case-actions-v110{grid-template-columns:1fr 1fr!important;gap:.55rem!important;} } /* ===== Block: gs-v122-flight-baggage-clean-style ===== */ /* GearSync Pro v1.2.3 – Flugreise Gepäckaufteilung UI-Fix */ .gs-flight-baggage-v122{display:none;background:#151515;border:1px solid rgba(0,196,106,.20);border-radius:22px;padding:1rem;margin:1rem 0;} .gs-flight-baggage-v122.open{display:block;} .gs-flight-baggage-v122 h4{margin:0 0 .35rem;color:#00C46A!important;font-size:1rem;} .gs-flight-baggage-v122 p{margin:0 0 .85rem;color:var(--text-muted);font-size:.86rem;font-weight:800;line-height:1.35;} .gs-flight-baggage-list-v122{display:grid;gap:.65rem;} .gs-flight-baggage-row-v122{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:.75rem;display:grid;gap:.65rem;} .gs-flight-baggage-name-v122{font-weight:950;color:#F5F5F5;line-height:1.25;overflow-wrap:anywhere;} .gs-flight-baggage-meta-v122{color:var(--text-muted);font-size:.78rem;font-weight:850;margin-top:.18rem;} .gs-flight-baggage-toggle-v122{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;} .gs-flight-baggage-toggle-v122 button{min-height:48px;border-radius:15px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.055);color:#F5F5F5;font-weight:950;cursor:pointer;} .gs-flight-baggage-toggle-v122 button.active{background:#00C46A!important;color:#08130D!important;border-color:#00C46A!important;box-shadow:0 10px 26px rgba(0,196,106,.18);} .gs-flight-baggage-details-v122{border:0;margin:0;padding:0;} .gs-flight-baggage-details-v122 summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.75rem;color:#00C46A;font-weight:950;} .gs-flight-baggage-details-v122 summary::-webkit-details-marker{display:none;} .gs-flight-baggage-details-v122 .gs-flight-chevron-v122{transition:transform .18s ease;font-size:1.35rem;line-height:1;} .gs-flight-baggage-details-v122[open] .gs-flight-chevron-v122{transform:rotate(180deg);} .gs-flight-baggage-intro-v122{margin:.45rem 0 .85rem!important;color:var(--text-muted)!important;font-size:.86rem!important;font-weight:800!important;line-height:1.35!important;} .gs-flight-baggage-summary-v122{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:.85rem;} .gs-flight-baggage-pill-v122{background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:.75rem;} .gs-flight-baggage-pill-v122 small{display:block;color:var(--text-muted);font-size:.68rem;font-weight:950;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem;} .gs-flight-baggage-pill-v122 strong{display:block;color:#F5F5F5;font-size:.95rem;line-height:1.25;} .gs-flight-card-summary-v122{background:#151515;border:1px solid rgba(0,196,106,.18);border-radius:18px;padding:.85rem;margin-top:.85rem;display:grid;grid-template-columns:1fr 1fr;gap:.65rem;} .gs-flight-card-summary-v122 div{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);border-radius:14px;padding:.65rem;} .gs-flight-card-summary-v122 small{display:block;color:#00C46A;font-weight:950;font-size:.68rem;text-transform:uppercase;margin-bottom:.25rem;} .gs-flight-card-summary-v122 strong{display:block;color:#F5F5F5;line-height:1.25;} @media(max-width:768px){.gs-flight-baggage-v122{padding:.85rem;border-radius:20px}.gs-flight-baggage-toggle-v122 button{min-height:52px}.gs-flight-baggage-summary-v122,.gs-flight-card-summary-v122{grid-template-columns:1fr}.gs-flight-baggage-row-v122{padding:.7rem}} /* ===== Block: gs-portfolio-v125-fix-css ===== */ .gs-settings-portfolio-card-v125{margin-top:1rem;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1rem;display:grid;gap:.8rem}.gs-settings-portfolio-card-v125 h4{margin:0;color:#00C46A!important}.gs-settings-portfolio-card-v125 p{margin:0;color:var(--text-muted);line-height:1.45;font-size:.92rem}.gs-analytics-panel-v124#analyticsSettingsBoxV124{display:none!important}.gs-analytics-reset-v125{width:100%;border:0;border-radius:.95rem;background:linear-gradient(135deg,#fb7185,#e11d48);color:white;font-weight:900;padding:.95rem 1rem;cursor:pointer}.gs-missing-name-v125{overflow-wrap:anywhere} /* ===== Block: gs-v130-inventory-polish-loan-overview-css ===== */ .gs-loan-overview-v130{background:rgba(31,31,33,.86);border:1px solid rgba(255,255,255,.075);border-radius:24px;padding:1rem;margin:0 0 1.25rem;box-shadow:0 18px 50px rgba(0,0,0,.22)} .gs-loan-overview-v130 summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#00C46A;font-weight:950;font-size:1.05rem} .gs-loan-overview-v130 summary::-webkit-details-marker{display:none}.gs-loan-overview-v130[open] .gs-loan-chevron-v130{transform:rotate(180deg)}.gs-loan-chevron-v130{transition:.18s ease;display:inline-block}.gs-loan-counts-v130{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}.gs-loan-pill-v130{display:inline-flex;align-items:center;border-radius:999px;padding:.22rem .55rem;font-size:.74rem;font-weight:950;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:var(--text-muted)}.gs-loan-pill-v130.out{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.42);color:#f59e0b}.gs-loan-pill-v130.borrowed{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.42);color:#60a5fa}.gs-loan-overview-body-v130{display:grid;gap:.75rem;margin-top:1rem}.gs-loan-row-v130{background:#151515;border:1px solid rgba(255,255,255,.075);border-radius:18px;padding:.9rem}.gs-loan-row-top-v130{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.gs-loan-row-v130 strong{font-size:1rem}.gs-loan-meta-v130{color:var(--text-muted);font-size:.88rem;line-height:1.45;margin-top:.25rem}.gs-loan-open-btn-v130{border:1px solid rgba(0,196,106,.5);background:rgba(0,196,106,.08);color:#00C46A;border-radius:12px;padding:.55rem .75rem;font-weight:900;cursor:pointer;white-space:nowrap}.gs-loan-empty-v130{color:var(--text-muted);line-height:1.45;padding:.3rem 0} @media(max-width:720px){.gs-loan-row-top-v130{display:grid}.gs-loan-open-btn-v130{width:100%;min-height:44px}.gs-loan-overview-v130{border-radius:20px}.gs-loan-overview-v130 summary{font-size:1rem;align-items:flex-start}.gs-loan-counts-v130{justify-content:flex-end}} /* ===== Block: gs-v132-koffer-polish-css ===== */ /* GearSync v1.3.2 – Koffer-Planer Feinschliff */ #presetGrid{ align-items:start !important; } #presetGrid .preset-card{ align-self:start !important; height:auto !important; } .gs-availability-label-v132{ grid-column:1 / -1; color:var(--text-muted); font-size:.74rem; font-weight:850; line-height:1.25; margin:.22rem .15rem .15rem; opacity:.86; } .gs-availability-label-v132 strong{ color:#00C46A; font-weight:950; } .gs-mobile-case-carousel-v132{ display:contents; } @media(max-width:768px){ #presetGrid{ display:grid !important; grid-template-columns:1fr !important; gap:1rem !important; } #presetGrid .gs-mobile-case-carousel-v132{ grid-column:1 / -1; display:flex !important; gap:.85rem !important; overflow-x:auto !important; overflow-y:hidden !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:.15rem 1rem .75rem 0; margin-right:-1rem; scrollbar-width:none; } #presetGrid .gs-mobile-case-carousel-v132::-webkit-scrollbar{display:none;} #presetGrid .gs-mobile-case-carousel-v132 > .preset-card{ flex:0 0 min(88vw, 420px) !important; width:min(88vw, 420px) !important; max-width:min(88vw, 420px) !important; scroll-snap-align:start; margin:0 !important; } #presetGrid > .gs-case-archive-section{ grid-column:1 / -1; margin-top:.35rem !important; } } /* ===== Block: gs-v11313-critical-fix-css ===== */ /* GearSync v1.3.13 – critical clean fix */ @media (min-width:769px){ #presetGrid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:1.25rem!important; align-items:start!important; } #presetGrid > .gs-mobile-case-carousel-v132, #presetGrid > .gs-mobile-case-carousel-v133{ display:contents!important; } #presetGrid > .preset-card, #presetGrid > .gs-mobile-case-carousel-v132 > .preset-card, #presetGrid > .gs-mobile-case-carousel-v133 > .preset-card{ width:auto!important; min-width:0!important; max-width:none!important; height:auto!important; align-self:start!important; margin:0!important; } #presetGrid > .gs-case-archive-section{grid-column:1/-1!important;} } @media (max-width:768px){ #presetGrid{display:block!important;width:100%!important;} } /* ===== Block: gs-v1-3-16-navigation-compat-fix-css ===== */ /* GearSync v1.3.16 – Browser-Zurück + Batteriegriff Placeholder */ #compatBatteryGrip option[value=""]{ color:var(--text-muted); } /* ===== Block: gs-v133-koffer-mobile-fix-css ===== */ /* GearSync v1.3.3 – Koffer Mobile-Fix - alte lange Select-Hinweise im Koffer-Modal ausblenden, damit Bestandsanzeige nicht doppelt erscheint - Koffer auf Handy wirklich als horizontale Kartenbahn darstellen */ #presetModalOverlay .preset-full-label{ display:none !important; } #presetModalOverlay .gs-availability-label-v132{ display:block !important; margin-top:.28rem !important; } @media(max-width:768px){ #presetGrid{ display:block !important; width:100% !important; overflow:visible !important; } #presetGrid > .gs-mobile-case-carousel-v133, #presetGrid > .gs-mobile-case-carousel-v132{ display:flex !important; flex-wrap:nowrap !important; gap:.85rem !important; width:calc(100vw - 1rem) !important; max-width:calc(100vw - 1rem) !important; margin-left:0 !important; margin-right:-1rem !important; padding:.15rem 1rem .85rem 0 !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch !important; scroll-snap-type:x mandatory !important; scrollbar-width:none !important; } #presetGrid > .gs-mobile-case-carousel-v133::-webkit-scrollbar, #presetGrid > .gs-mobile-case-carousel-v132::-webkit-scrollbar{display:none!important;} #presetGrid > .gs-mobile-case-carousel-v133 > .preset-card, #presetGrid > .gs-mobile-case-carousel-v132 > .preset-card{ flex:0 0 min(86vw,420px) !important; width:min(86vw,420px) !important; min-width:min(86vw,420px) !important; max-width:min(86vw,420px) !important; scroll-snap-align:start !important; margin:0 !important; align-self:flex-start !important; height:auto !important; } #presetGrid > .preset-card{ width:min(86vw,420px) !important; max-width:min(86vw,420px) !important; } #presetGrid > .gs-case-archive-section{ margin-top:.45rem !important; width:100% !important; } } /* ===== Block: gs-v134-usage-grip-fix-css ===== */ /* GearSync Pro v1.4.5 Registrierungsdesign – Inventar-Nutzungsgrad + Batteriegriff-Kompatibilität */ .gs-usage-stats-v134{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:.9rem} .gs-usage-stat-v134{background:#151515;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:.75rem} .gs-usage-stat-v134 small{display:block;color:var(--text-muted);font-size:.66rem;font-weight:950;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem} .gs-usage-stat-v134 strong{font-size:1.05rem;color:#F5F5F5} @media(max-width:520px){.gs-usage-stats-v134{grid-template-columns:1fr}.gs-usage-stat-v134{padding:.8rem}} /* ===== Block: gs-v1311-hotfix-css ===== */ /* GearSync v1.3.11 – Hotfix Koffer-Desktop + Kompatibilität + Reparaturen */ @media (min-width:769px){ #presetGrid .gs-mobile-case-carousel-v132{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)) !important; gap:1.5rem !important; grid-column:1 / -1 !important; align-items:start !important; } #presetGrid .gs-mobile-case-carousel-v132 > .preset-card{ width:auto !important; max-width:none !important; min-width:0 !important; } } /* ===== Block: gs-equipment-reset-css-v1 ===== */ /* GearSync Pro – Einstellungen: Equipment zurücksetzen (Ideenliste #9) */ .gs-equipment-reset-card-v1{margin-top:1rem;background:#151515;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1rem;display:grid;gap:.8rem} .gs-equipment-reset-card-v1 h4{margin:0;color:#00C46A!important} .gs-equipment-reset-card-v1 p{margin:0;color:var(--text-muted);line-height:1.45;font-size:.92rem} .gs-equipment-reset-btn-v1{width:100%;border:0;border-radius:.95rem;background:linear-gradient(135deg,#fb7185,#e11d48);color:white;font-weight:900;padding:.95rem 1rem;cursor:pointer} /* ===== Block: gs-nav-greeting-lang-css-v1 ===== */ /* GearSync Pro – Header: persönliche Begrüßung + Sprachumschalter (Ideenliste #6 + #8) */ .gs-nav-greeting-v1{ color:var(--text-muted); font-size:.85rem; font-weight:600; white-space:nowrap; } .gs-nav-lang-v1{ display:flex; align-items:center; gap:.2rem; background:#151515; border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:.2rem; flex-shrink:0; } .gs-nav-lang-btn-v1{ border:0; background:transparent; color:var(--text-muted); font-size:.7rem; font-weight:800; letter-spacing:.02em; border-radius:999px; padding:.3rem .55rem; cursor:pointer; line-height:1; } .gs-nav-lang-btn-v1.active{ background:var(--brand-color); color:#08130D; } @media(max-width:640px){ .gs-nav-greeting-v1{ display:none; } } @media(max-width:768px){ .navbar-right{ gap:.5rem; } } /* Alte Sprachauswahl in Einstellungen > Konto bleibt im DOM (Logik unveraendert, siehe gs-v67-language-settings-cloud), wird aber nicht mehr angezeigt, seit die Sprache oben in der Kopfzeile umgeschaltet wird (Ideenliste #6). */ .gs-app-settings-block-v67{ display:none!important; } /* Pausiert 12.07.2026: Übersetzung ist noch nicht vollständig genug für den produktiven Einsatz. Der Header-Umschalter wird bewusst ausgeblendet, bis die Übersetzung weiter ausgearbeitet ist - genau wie die Euro/Dollar- Umrechnung oben (gs-app-settings-block-v67). Die komplette Logik (Wörterbuch, tr()/t()/addDictionary(), Muster-Erkennung) bleibt unveraendert bestehen und ist sofort wieder nutzbar: einfach diese Regel entfernen. */ .gs-nav-lang-v1{ display:none!important; } /* ===== Block: gs-dream-subject-dashboard-css-v1 ===== */ /* GearSync Pro – Wunschmotive als abhakbare Karte im Dashboard (Ideenliste #4) */ .gs-dream-dash-card-v1{ display:block; } .gs-dream-dash-chips-v1{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.35rem; } .gs-dream-dash-chip-v1{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid rgba(255,255,255,.16); color:#cfcfcf; border-radius:20px; padding:.45rem .9rem; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .15s ease, border-color .15s ease; } .gs-dream-dash-chip-v1:active{ background:rgba(255,255,255,.06); } .gs-dream-dash-chip-v1 svg{ flex-shrink:0; color:#666; } .gs-dream-dash-chip-v1.done{ background:rgba(0,196,106,.14); border-color:rgba(0,196,106,.5); color:var(--brand-color); } .gs-dream-dash-chip-v1.done svg{ color:var(--brand-color); } @media(max-width:520px){ .gs-dream-dash-chip-v1{ font-size:.8rem; padding:.4rem .75rem; } } /* ===== gs-pro-settings-v1: GearSync Pro Karte in den Einstellungen ===== */ .gs-pro-settings-block-v1 .gs-pro-status-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; } .gs-pro-badge{ display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; letter-spacing:.3px; background:var(--bg-input); color:var(--text-muted); border:1px solid var(--border-color); } .gs-pro-badge.is-active{ background:rgba(0,196,106,.14); color:var(--brand-color); border-color:var(--brand-color); } .gs-pro-status-detail{ font-size:13px; color:var(--text-muted); } .gs-pro-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; } .gs-pro-actions .btn-save, .gs-pro-actions .btn-cancel{ padding:0.65rem 1.1rem; font-size:13px; } /* ===== gs-pro-paywall-v1: Sperr-Overlay fuer den Bereich "Selbstaendig" ===== */ .gs-pro-locked-v1 > *:not(.gs-pro-upsell-card-v1){ display:none !important; } .gs-pro-upsell-card-v1{ margin:24px auto; max-width:420px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--gs-radius-lg, 16px); padding:26px 22px; color:var(--text-main); text-align:center; } .gs-pro-upsell-card-v1 h3{ color:var(--brand-color); margin:0 0 10px 0; font-size:19px; } .gs-pro-upsell-card-v1 p{ color:var(--text-muted); font-size:14px; line-height:1.5; margin:0 0 18px 0; } .gs-pro-upsell-card-v1 button{ background:var(--brand-color); color:#0d0f0d; font-weight:700; border:none; border-radius:10px; padding:13px 20px; font-size:14px; cursor:pointer; } /* ===== gs-pro-page-v1: Vergleichstabelle auf der GearSync-Pro-Seite ===== */ .gs-pro-compare-table-v1{ width:100%; border-collapse:collapse; font-size:13px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; overflow:hidden; } .gs-pro-compare-table-v1 th{ text-align:left; color:var(--brand-color); font-size:11px; letter-spacing:0.5px; text-transform:uppercase; background:rgba(0,196,106,.08); padding:10px 12px; } .gs-pro-compare-table-v1 td{ padding:10px 12px; color:var(--text-main); border-top:1px solid var(--border-color); } .gs-pro-compare-table-v1 td:nth-child(2), .gs-pro-compare-table-v1 td:nth-child(3){ color:var(--text-muted); white-space:nowrap; } .gs-pro-compare-table-v1 td.gs-pro-col-v1{ color:var(--brand-color); font-weight:700; } /* ===== gs-invoices-v1: Druckansicht für Rechnungsvorschau ===== Design lokal mit wkhtmltopdf gegengeprüft (Header-/Footer-Band statt nur dünner Linie, damit der Unterschied zur Vorversion eindeutig sichtbar ist). */ .gs-invoice-paper{ position:relative; background:#fdfcfa; color:#20241f; border-radius:14px; max-width:720px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 28px rgba(0,0,0,.07); overflow:hidden; /* Ohne dies lassen Browser beim Drucken/"Als PDF speichern" alle Hintergrundfarben standardmaessig weg (Tinten-Spar-Voreinstellung) - Header-Band, Summenbox und Fusszeile wuerden sonst nur im Bildschirm-Vorschau farbig sein, im PDF/Ausdruck aber weiss. */ -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; } .gs-invoice-headerband{ background:#e9f3ec; border-bottom:1px solid #d3e8da; color:#20241f; padding:34px 44px 28px 44px; display:flex; justify-content:space-between; align-items:flex-start; } .gs-invoice-brand-name{ font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:21px; letter-spacing:-.2px; color:#173425; } .gs-invoice-brand-sub{ font-size:12px; color:#5c7566; line-height:1.6; margin-top:5px; white-space:pre-line; } .gs-invoice-logo-footer{ max-height:46px; max-width:170px; object-fit:contain; } .gs-invoice-eyebrow{ font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:#2e8a5a; font-weight:700; text-align:right; } .gs-invoice-number-big{ font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:30px; margin-top:4px; text-align:right; color:#173425; } .gs-invoice-body{ padding:32px 44px 8px 44px; } .gs-invoice-parties{ display:flex; justify-content:space-between; gap:24px; margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid #e4e1d8; } .gs-invoice-parties .label{ font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:#6b7268; margin-bottom:6px; } .gs-invoice-parties .name{ font-weight:700; } .gs-invoice-parties .addr{ font-size:13px; color:#5c6259; white-space:pre-line; } .gs-invoice-parties .right{ text-align:right; } .gs-invoice-paper table{ width:100%; border-collapse:collapse; } .gs-invoice-paper th{ text-align:left; font-size:10px; letter-spacing:.9px; text-transform:uppercase; color:#6b7268; font-weight:700; padding:0 0 9px 0; border-bottom:2px solid #20241f; } .gs-invoice-paper th.gs-num, .gs-invoice-paper td.gs-num{ text-align:right; white-space:nowrap; } .gs-invoice-paper td{ padding:11px 0; border-bottom:1px solid #e4e1d8; font-size:14px; vertical-align:top; } .gs-invoice-paper tbody tr:last-child td{ border-bottom:1px solid #20241f; } .gs-invoice-tax-note{ background:#eef5f0; border-left:3px solid #2ecc71; padding:11px 15px; font-size:12.5px; color:#33463a; line-height:1.55; margin:20px 0 0 0; border-radius:6px; } .gs-invoice-totals-wrap{ display:flex; justify-content:flex-end; margin-top:16px; } .gs-invoice-totals-card{ width:270px; background:#eef5f0; border:1px solid #d8ecdf; border-radius:12px; padding:14px 18px; } .gs-invoice-totals-row{ display:flex; justify-content:space-between; font-size:13.5px; color:#4a5650; padding:4px 0; } .gs-invoice-totals-grand{ color:#173425; font-weight:700; font-size:18px; border-top:1.5px solid #b9dcc4; margin-top:6px; padding-top:10px; } /* Echte, vollflaechige Fusszeile: bleeds bis an den Papierrand, eigener Hintergrund, damit sie sich klar vom restlichen Inhalt abhebt statt nur ein weiterer Abschnitt zu sein. */ .gs-invoice-payment{ margin-top:28px; padding:18px 44px 24px 44px; background:#f2f0e9; border-top:1px solid #e0ddd3; } .gs-invoice-payment-label{ font-size:10px; letter-spacing:.9px; text-transform:uppercase; color:#6b7268; font-weight:700; margin-bottom:11px; } .gs-invoice-payment-inner{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; } .gs-invoice-payment-cols{ display:flex; flex-wrap:wrap; gap:34px; } .gs-invoice-payment-col span{ display:block; font-size:9.5px; letter-spacing:.5px; text-transform:uppercase; color:#6b7268; margin-bottom:3px; } .gs-invoice-payment-col strong{ font-size:13px; color:#20241f; font-weight:700; } @page{ size:A4; margin:0; } @media print{ body *{ visibility:hidden; } .gs-invoice-paper, .gs-invoice-paper *{ visibility:visible; } .gs-invoice-paper{ position:absolute; top:0; left:0; width:100%; max-width:none; box-shadow:none; /* Feste A4-Hoehe minus Seitenraender, damit die Fusszeile (margin-top:auto) zuverlaessig ans Seitenende rutscht. Bei sehr langen Rechnungen (mehr Positionen als auf eine Seite passen) wird dadurch bewusst auf eine Seite begrenzt. */ height:297mm; display:flex; flex-direction:column; } .gs-invoice-payment{ margin-top:auto; } .gs-invoice-noprint{ display:none !important; } /* Manche Browser beachten color-adjust nur, wenn es direkt am druckenden Element steht, nicht nur vererbt vom Elternelement - daher hier zusaetzlich auf alle Nachfahren erzwungen. */ .gs-invoice-paper *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; } } /* ===== gs-account-backup-v1: Konto-Backup Karte/Buttons (19.07.2026) ===== Vorher komplett ungestylt (Standard-Browser-Buttons). Angepasst an die bestehenden Settings-Karten (z.B. .gs-settings-portfolio-card-v125) und an die App-Farbsprache: gruen = sichere Aktion (Backup erstellen), amber = folgenreiche/ueberschreibende Aktion (Wiederherstellen), analog zu den bereits genutzten Warnfarben (#f59e0b) bei Leihe/unbestaetigten Werten. */ .gs-account-backup-card-v1{ margin-top:1rem; background:#151515; border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:1rem; display:grid; gap:.8rem; } .gs-account-backup-card-v1 h4{ margin:0; color:#00C46A !important; } .gs-account-backup-card-v1 p{ margin:0; color:var(--text-muted); line-height:1.45; font-size:.92rem; } .gs-account-backup-btnrow-v1{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; } .gs-account-backup-btn-v1{ width:100%; border:0; border-radius:14px; padding:.85rem 1rem; font-weight:900; font-size:.92rem; line-height:1.25; cursor:pointer; text-align:center; background:#00C46A; color:#08130D; box-shadow:0 12px 28px rgba(0,196,106,.2); transition:background .15s ease, transform .1s ease; } .gs-account-backup-btn-v1:hover{ background:#00B368; } .gs-account-backup-btn-v1:active{ transform:scale(.98); } /* Wiederherstellen ueberschreibt den kompletten Kontostand - deshalb bewusst NICHT die gleiche gruene "sichere Aktion"-Farbe wie Backup erstellen, sondern die im Rest der App bereits fuer folgenreiche/Warn-Hinweise genutzte Amber-Farbe (siehe .gs-loan-note-v126, .value-unconfirmed-dot). */ .gs-account-backup-btn-v1.gs-account-backup-restore-v1{ background:rgba(245,158,11,.13); color:#f59e0b; border:1px solid rgba(245,158,11,.55); box-shadow:none; } .gs-account-backup-btn-v1.gs-account-backup-restore-v1:hover{ background:rgba(245,158,11,.20); } .gs-account-backup-hint-v1{ margin:0; color:#f59e0b; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.35); border-radius:14px; padding:.75rem .85rem; font-size:.85rem; line-height:1.4; font-weight:700; } @media(max-width:480px){ .gs-account-backup-btnrow-v1{ grid-template-columns:1fr; } } /* ===== A/B-Vergleich v1.4.7: Typ-Filter + Suche ===== */ .gs-ab-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:.65rem;} .gs-ab-filter-field{background:#151515;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:1rem;} .gs-ab-filter-field label{display:block;font-weight:950;margin-bottom:.65rem;color:#F5F5F5;} .gs-ab-filter-field input[type="search"]{width:100%;} .gs-ab-filter-hint{color:var(--text-muted);font-size:.85rem;font-weight:800;margin:0 0 1rem .35rem;} .gs-ab-analysis-subline{color:var(--text-muted);font-size:.85rem;font-weight:850;margin:-.25rem 0 .75rem 0;} @media(max-width:768px){.gs-ab-filter-row{grid-template-columns:1fr}} /* ===== Papierkorb (A5) ===== */ .gs-papierkorb-card-v1 h4 { margin-bottom: 4px; } .gs-papierkorb-btnrow-v1 { margin: 10px 0; } .gs-papierkorb-refresh-v1 { background: var(--accent, #22c55e); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 14px; cursor: pointer; } .gs-papierkorb-refresh-v1:hover { filter: brightness(1.05); } .gs-papierkorb-gruppe-v1 { margin-top: 14px; } .gs-papierkorb-gruppe-v1 h5 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; } .gs-papierkorb-zeile-v1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); margin-bottom: 8px; } .gs-papierkorb-info-v1 { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gs-papierkorb-typ-v1 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; } .gs-papierkorb-name-v1 { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } .gs-papierkorb-zeit-v1 { font-size: 12px; opacity: .55; } .gs-papierkorb-btn-v1 { flex-shrink: 0; background: transparent; color: var(--accent, #22c55e); border: 1px solid var(--accent, #22c55e); border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; white-space: nowrap; } .gs-papierkorb-btn-v1:hover { background: var(--accent, #22c55e); color: #fff; } .gs-papierkorb-btn-v1:disabled { opacity: .5; cursor: default; } .gs-papierkorb-hint-v1 { font-size: 12px; opacity: .55; margin-top: 12px; } /* ===== Block: gs-global-bg-logo-v1 ===== Globales, dezentes Logo im Hintergrund aller App-Seiten. Liegt in #appMainLayout -> nur nach Login sichtbar, nicht im Login. Rein statisch: kein JS, keine Animation, pointer-events:none. */ #gsGlobalBg{ position:fixed; right:-4%; bottom:-6%; width:min(42vw,560px); aspect-ratio:353 / 412; background:url("gs-logo.png") right bottom / contain no-repeat; opacity:.03; filter:grayscale(.25); pointer-events:none; z-index:-1; } /* ===== /Block: gs-global-bg-logo-v1 ===== */ /* ===== Block: gs-auth-login-v3 ===== Einzige Quelle fuer den Login-Look (alte .auth-container-Regeln entfernt). Die wenigen !important hier uebersteuern NUR globale Basisregeln (input,select{...!important}, h1,h2,h3{color!important}) - kein Patch-Krieg. Rein optischer Login-Reskin: durchgehende Flaeche + mittiges Logo + Aufbau. Formular, IDs und Auth-Logik unangetastet. Overrides nur unter #view-auth.gs-auth-v2. */ #view-auth.gs-auth-v2{ padding:0; background: radial-gradient(140% 120% at 22% 6%, rgba(46,204,113,.13), rgba(46,204,113,0) 72%), radial-gradient(130% 130% at -5% 115%, rgba(122,201,67,.10), rgba(122,201,67,0) 70%), linear-gradient(150deg,#0e1511 0%,#0b0d0c 55%,#0a0b0a 100%); } #view-auth.gs-auth-v2 .gs-auth-split{ position:relative; display:flex; width:100%; min-height:100vh; overflow:hidden; } /* Mittiges Logo -> durchgehende Flaeche, kein Cut */ #view-auth.gs-auth-v2 .gs-auth-split::before{ content:""; position:absolute; left:50%; top:50%; width:min(42vw,520px); aspect-ratio:353 / 412; transform:translate(-50%,-50%); background:url("gs-logo.png") center/contain no-repeat; filter:grayscale(.25); opacity:0; z-index:0; pointer-events:none; animation:gsAuthLogoIn 2.4s ease .2s both; } /* Markenseite: transparent (eine durchgehende Flaeche) */ #view-auth.gs-auth-v2 .gs-auth-brand{ position:relative; z-index:1; flex:1.05; overflow:visible; padding:60px 60px 52px; display:flex; flex-direction:column; background:transparent; } #view-auth.gs-auth-v2 .gs-auth-brand-inner{ display:flex; flex-direction:column; justify-content:space-between; flex:1; gap:30px; } #view-auth.gs-auth-v2 .gs-auth-logo{ display:flex; align-items:center; gap:14px; animation:gsAuthRise 1.05s cubic-bezier(.2,.7,.2,1) both; animation-delay:.15s; } #view-auth.gs-auth-v2 .gs-auth-logo img{ height:50px; width:auto; display:block; } #view-auth.gs-auth-v2 .gs-auth-logo > span{ font-size:22px; font-weight:800; color:#eaeceb; letter-spacing:.2px; } #view-auth.gs-auth-v2 .gs-auth-logo .ac{ color:#2ecc71; } #view-auth.gs-auth-v2 .gs-auth-headline{ font-size:clamp(36px,4vw,54px); font-weight:800; line-height:1.05; letter-spacing:-.5px; margin:0; color:#eef1ef !important; max-width:11ch; animation:gsAuthRise 1.05s cubic-bezier(.2,.7,.2,1) both; animation-delay:.40s; } #view-auth.gs-auth-v2 .gs-auth-headline em{ color:#2ecc71; font-style:normal; } #view-auth.gs-auth-v2 .gs-auth-lede{ font-size:17.5px; color:#c6ccc5; line-height:1.6; max-width:42ch; margin:20px 0 0; animation:gsAuthRise 1.05s cubic-bezier(.2,.7,.2,1) both; animation-delay:.62s; } #view-auth.gs-auth-v2 .gs-auth-features{ list-style:none; padding:0; margin:34px 0 0; display:grid; gap:15px; } #view-auth.gs-auth-v2 .gs-auth-features li{ display:flex; align-items:center; gap:12px; font-size:15.5px; color:#d9ded8; } #view-auth.gs-auth-v2 .gs-auth-features li:nth-child(1){ animation:gsAuthRise 1.05s cubic-bezier(.2,.7,.2,1) both; animation-delay:.84s; } #view-auth.gs-auth-v2 .gs-auth-features li:nth-child(2){ animation:gsAuthRise 1.05s cubic-bezier(.2,.7,.2,1) both; animation-delay:1.00s; } #view-auth.gs-auth-v2 .gs-auth-features li:nth-child(3){ animation:gsAuthRise 1.05s cubic-bezier(.2,.7,.2,1) both; animation-delay:1.16s; } #view-auth.gs-auth-v2 .gs-auth-tick{ width:25px; height:25px; flex:none; border-radius:7px; border:1px solid rgba(46,204,113,.3); background:rgba(46,204,113,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ecc71' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center/14px no-repeat; } #view-auth.gs-auth-v2 .gs-auth-foot{ font-size:12.5px; color:#6c716c; animation:gsAuthRise 1.05s cubic-bezier(.2,.7,.2,1) both; animation-delay:1.40s; } /* Formularseite: direkt auf der Flaeche, keine Karte */ #view-auth.gs-auth-v2 .gs-auth-formside{ position:relative; z-index:1; flex:.95; display:flex; align-items:center; justify-content:center; padding:40px 48px; } #view-auth.gs-auth-v2 .auth-container{ max-width:400px; width:100%; margin:0; padding:0; background:transparent; border:none; border-radius:0; box-shadow:none; backdrop-filter:none; animation:gsAuthRise 1.05s cubic-bezier(.2,.7,.2,1) both; animation-delay:.55s; } #view-auth.gs-auth-v2 #authFormTitle{ text-align:left; font-size:1.7rem; font-weight:800; letter-spacing:-.02em; color:#eef1ef !important; margin:0 0 6px; } #view-auth.gs-auth-v2 .auth-container > p{ text-align:left; color:#9aa09a; font-size:14px; margin:0 0 24px; max-width:none; } #view-auth.gs-auth-v2 .form-group{ margin-bottom:16px; } #view-auth.gs-auth-v2 .form-group label{ display:block; font-size:12.5px; font-weight:700; color:#eaeceb; margin-bottom:7px; letter-spacing:.2px; } #view-auth.gs-auth-v2 .form-control{ width:100%; background:#20221f !important; border:1px solid #33362f !important; border-radius:11px; padding:13px 15px; color:#eaeceb; font-size:15px; transition:border-color .15s, box-shadow .15s; } #view-auth.gs-auth-v2 .form-control::placeholder{ color:#6c716c; } #view-auth.gs-auth-v2 .form-control:focus{ outline:none; border-color:#2ecc71 !important; box-shadow:0 0 0 3px rgba(46,204,113,.14); } #view-auth.gs-auth-v2 .gs-password-row{ display:flex; gap:8px; } #view-auth.gs-auth-v2 .gs-password-toggle{ background:#20221f; border:1px solid #33362f; border-radius:11px; color:#9aa09a; padding:0 15px; font-size:12.5px; font-weight:700; cursor:pointer; transition:.15s; white-space:nowrap; } #view-auth.gs-auth-v2 .gs-password-toggle:hover{ border-color:#565b50; color:#eaeceb; } #view-auth.gs-auth-v2 .add-gear-btn{ width:100%; background:#2ecc71; color:#07160d; border:none; border-radius:11px; padding:14px; font-size:15px; font-weight:800; letter-spacing:.3px; cursor:pointer; margin-top:8px; transition:filter .15s, transform .05s; } #view-auth.gs-auth-v2 .add-gear-btn:hover{ filter:brightness(1.06); } #view-auth.gs-auth-v2 .auth-toggle-text{ margin-top:18px; font-size:13.5px; color:#9aa09a; text-align:left; line-height:1.9; } /* Aufbau-Animation (spielt, wenn der Login erscheint) */ @keyframes gsAuthRise{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} } @keyframes gsAuthLogoIn{ from{opacity:0; transform:translate(-50%,-50%) scale(.9);} to{opacity:.05; transform:translate(-50%,-50%) scale(1);} } /* Mobil: Markenseite aus, nur Formular */ @media (max-width:880px){ #view-auth.gs-auth-v2 .gs-auth-brand{ display:none; } #view-auth.gs-auth-v2 .gs-auth-formside{ flex:1; padding:32px 22px; } #view-auth.gs-auth-v2 .gs-auth-split::before{ width:70vw; } } @media (prefers-reduced-motion: reduce){ #view-auth.gs-auth-v2 .gs-auth-logo, #view-auth.gs-auth-v2 .gs-auth-headline, #view-auth.gs-auth-v2 .gs-auth-lede, #view-auth.gs-auth-v2 .gs-auth-features li, #view-auth.gs-auth-v2 .gs-auth-foot, #view-auth.gs-auth-v2 .auth-container{ animation:none; opacity:1; transform:none; } #view-auth.gs-auth-v2 .gs-auth-split::before{ animation:none; opacity:.05; } } /* ===== /Block: gs-auth-login-v3 ===== */ /* ===== Block: gs-dash-intro-progress-v1 ===== 1) Countdown-Balken in der "Naechster Einsatz"-Karte (fuellt die Luecke) 2) Body-Block vertikal mittig (Desktop) -> Text wird "runtergezogen" 3) Einmal-Aufbau ("gs-dash-intro") beim ersten Login, sonst still. Reiner additiver Block, gleiche Tokens wie das v62-Dashboard. */ /* -- Countdown-Balken -- */ .dash-next-progress-v1{ margin-top:.7rem; height:7px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; } .dash-next-progress-fill-v1{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#0a8f4f,#00C46A); box-shadow:0 0 10px rgba(0,196,106,.35); } /* -- Body-Block der Naechster-Einsatz-Karte -- */ .dash-next-body-v1{ display:block; } @media(min-width:769px){ #dashboardHome .gs-dashboard-v62 .dash-next-v11 .dash-next-body-v1{ margin-top:auto; } } /* -- Einmal-Aufbau beim ersten Login -- */ @keyframes gsDashRise{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} } @keyframes gsDashBarFill{ from{transform:scaleX(0);} to{transform:scaleX(1);} } .gs-dashboard-v62.gs-dash-preintro > section{ opacity:0; } .gs-dashboard-v62.gs-dash-intro > section{ animation:gsDashRise 1.15s cubic-bezier(.2,.7,.2,1) both; } .gs-dashboard-v62.gs-dash-intro > section:nth-child(1){ animation-delay:.05s; } .gs-dashboard-v62.gs-dash-intro > section:nth-child(2){ animation-delay:.30s; } .gs-dashboard-v62.gs-dash-intro > section:nth-child(3){ animation-delay:.55s; } .gs-dashboard-v62.gs-dash-intro > section:nth-child(4){ animation-delay:.80s; } .gs-dashboard-v62.gs-dash-intro > section:nth-child(5){ animation-delay:1.05s; } .gs-dashboard-v62.gs-dash-intro > section:nth-child(6){ animation-delay:1.30s; } .gs-dashboard-v62.gs-dash-intro .dash-next-progress-fill-v1{ transform-origin:left; will-change:transform; animation:gsDashBarFill 1.15s cubic-bezier(.2,.7,.2,1) .7s both; } @media (prefers-reduced-motion: reduce){ .gs-dashboard-v62.gs-dash-intro > section, .gs-dashboard-v62.gs-dash-preintro > section, .gs-dashboard-v62.gs-dash-intro .dash-next-progress-fill-v1{ animation:none; opacity:1; transform:none; } } /* ===== /Block: gs-dash-intro-progress-v1 ===== */ /* ===== Konto-Löschung / Gefahrenzone (v1) ===== */ .gs-danger-zone-v1{border:1px solid rgba(239,68,68,.45);border-radius:16px;padding:1rem;background:rgba(239,68,68,.05)} .gs-danger-zone-v1 .gs-danger-label{color:#ef4444} .gs-danger-zone-v1 .gs-danger-hint{color:#e0a3a3} .gs-danger-zone-v1 .gs-danger-export-btn{margin:.4rem 0 1.2rem} .gs-danger-zone-v1 .gs-danger-confirm-label{margin-top:.4rem} .gs-danger-zone-v1 .gs-danger-input{margin-bottom:.9rem;letter-spacing:.08em;text-align:center;font-weight:800} .gs-danger-delete-btn{width:100%;padding:.8rem 1rem;border-radius:12px;background:#ef4444;color:#fff;border:none;font-weight:900;cursor:pointer} .gs-danger-delete-btn:hover{background:#d63c3c} .gs-danger-delete-btn:disabled{background:#4a2323;color:#a97b7b;cursor:not-allowed} /* GearSync Launch – Footer-Links, Auth-Consent & Auth-Legal-Zeile */ .app-footer a{background:none;border:0;color:var(--text-muted);font-weight:800;cursor:pointer;padding:.25rem .35rem;text-decoration:none} .app-footer a:hover{color:#00C46A} .gs-auth-consent-v1{margin:0 0 1rem;display:none} .gs-consent-label-v1{display:flex;gap:.6rem;align-items:flex-start;color:var(--text-muted);font-size:.9rem;line-height:1.45;cursor:pointer} .gs-consent-label-v1 input[type="checkbox"]{margin-top:.2rem;width:18px;height:18px;flex-shrink:0;accent-color:var(--brand-color)} .gs-consent-label-v1 a{color:var(--brand-color);text-decoration:none} .gs-consent-label-v1 a:hover{text-decoration:underline} .gs-auth-legal-v1{display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)} .gs-auth-legal-v1 a{color:var(--text-muted);font-size:.82rem;font-weight:700;text-decoration:none} .gs-auth-legal-v1 a:hover{color:var(--brand-color)} /* ===== Block: gs-auth-more-v1 (Info-Panel "Was kann GearSync Pro?" auf der Login-Seite) ===== Additiv, nur Optik. Trigger sitzt im Formularbereich (auch mobil sichtbar, da die linke Markenseite unter 880px ausgeblendet wird). Panel schwebt fixiert ueber der Seite, daher kein Seiten-Scroll. Farben an die Auth-Seite angeglichen (#2ecc71). Aufbau-Fade analog gsAuthRise (Opazitaet + leichtes Aufsteigen). */ .gs-auth-more-trigger-v1{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:14px; padding:13px 15px; box-sizing:border-box; background:#20221f; border:1px solid #33362f; border-radius:11px; color:#eaeceb; font-size:13.5px; font-weight:700; cursor:pointer; transition:border-color .15s, background .15s; text-align:left; font-family:inherit; } .gs-auth-more-trigger-v1:hover{ border-color:#565b50; background:#24261f; } .gs-auth-more-trigger-v1 .gs-auth-more-chevron-v1{ flex:none; color:#9aa09a; transition:transform .2s; } .gs-auth-more-trigger-v1[aria-expanded="true"] .gs-auth-more-chevron-v1{ transform:rotate(180deg); } .gs-auth-more-overlay-v1{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; background:rgba(0,0,0,.62); } .gs-auth-more-overlay-v1.is-open{ display:flex; animation:gsAuthMoreFadeV1 .25s ease both; } .gs-auth-more-panel-v1{ background:#171814; border:1px solid #2c2f27; border-radius:18px; width:100%; max-width:430px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5); } .gs-auth-more-overlay-v1.is-open .gs-auth-more-panel-v1{ animation:gsAuthMoreRiseV1 .5s cubic-bezier(.2,.7,.2,1) both; } .gs-auth-more-head-v1{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px 12px; border-bottom:1px solid rgba(255,255,255,.06); flex:none; } .gs-auth-more-title-v1{ color:#eef1ef; font-size:15px; font-weight:800; } .gs-auth-more-close-v1{ background:none; border:none; color:#9aa09a; cursor:pointer; padding:2px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; transition:color .15s; } .gs-auth-more-close-v1:hover{ color:#eaeceb; } .gs-auth-more-body-v1{ overflow-y:auto; padding:4px 18px 6px; } .gs-auth-more-intro-v1{ color:#d9ded8; font-size:14px; line-height:1.55; margin:12px 0 6px; } .gs-auth-more-list-v1{ margin:0; } .gs-auth-more-item-v1{ display:flex; gap:13px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.06); } .gs-auth-more-item-v1:last-child{ border-bottom:none; } .gs-auth-more-item-v1 .gs-auth-more-ico-v1{ flex:none; margin-top:1px; color:#2ecc71; } .gs-auth-more-item-v1 h4{ color:#eaeceb; font-size:13.5px; font-weight:700; margin:0 0 2px; } .gs-auth-more-item-v1 p{ color:#9aa09a; font-size:12.5px; line-height:1.5; margin:0; } .gs-auth-more-foot-v1{ padding:12px 18px 18px; border-top:1px solid rgba(255,255,255,.06); flex:none; } .gs-auth-more-cta-v1{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.42); border-radius:13px; color:#2ecc71; font-size:14px; font-weight:800; padding:13px; cursor:pointer; transition:background .15s; font-family:inherit; } .gs-auth-more-cta-v1:hover{ background:rgba(46,204,113,.18); } @keyframes gsAuthMoreFadeV1{ from{opacity:0;} to{opacity:1;} } @keyframes gsAuthMoreRiseV1{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} } @media(max-width:480px){ .gs-auth-more-panel-v1{ max-height:90vh; } } /* ===== /Block: gs-auth-more-v1 ===== */