/* ============================================================ Sparhenne – Themes (Weiß / Braun / Schwarz) Theme-Switch via data-theme auf , persisted in localStorage. ============================================================ */ :root, html[data-theme="weiss"] { color-scheme: light; --bg: #ffffff; --bg-alt: #f7f7f8; --bg-elev: #ffffff; --text: #1a1a1a; --text-muted: #6b6b6b; --border: #e6e6e8; --border-strong:#d0d0d4; --brand: #c89a32; --brand-hover: #a17a22; --brand-soft: #fff6df; --accent: #c0392b; --good: #198754; --bad: #c0392b; --shadow: 0 4px 18px rgba(20,20,20,.06); --shadow-lg: 0 12px 40px rgba(20,20,20,.10); } html[data-theme="braun"] { color-scheme: light; --bg: #f4ecdf; --bg-alt: #ead9bf; --bg-elev: #fbf5e8; --text: #3a2614; --text-muted: #7a5a3a; --border: #d6bc94; --border-strong:#b89466; --brand: #a0673c; --brand-hover: #7a4a25; --brand-soft: #f0d8b4; --accent: #b04522; --good: #4f7a2a; --bad: #b04522; --shadow: 0 4px 18px rgba(120,80,40,.10); --shadow-lg: 0 12px 40px rgba(120,80,40,.16); } html[data-theme="schwarz"] { color-scheme: dark; --bg: #121212; --bg-alt: #1c1c1e; --bg-elev: #242427; --text: #f0f0f0; --text-muted: #a0a0a0; --border: #303034; --border-strong:#454549; --brand: #f5a623; --brand-hover: #ffb84d; --brand-soft: #3a2a10; --accent: #e74c3c; --good: #51cf66; --bad: #ff6b6b; --shadow: 0 4px 18px rgba(0,0,0,.45); --shadow-lg: 0 12px 40px rgba(0,0,0,.6); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); text-decoration: underline; } /* ---------------- Header ---------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg-elev); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); } .site-header-inner { max-width: 1320px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--text); } .brand:hover { color: var(--text); text-decoration: none; } .brand img { width: 32px; height: 32px; } .site-nav { display: flex; gap: 4px; flex: 1; } .site-nav a { color: var(--text); padding: 8px 14px; border-radius: 8px; font-weight: 500; font-size: 14px; } .site-nav a:hover { background: var(--bg-alt); text-decoration: none; } .site-nav a.active { background: var(--brand-soft); color: var(--brand-hover); } .site-tools { display: flex; align-items: center; gap: 8px; } /* ---------------- Theme Switcher ---------------- */ .theme-switch { display: inline-flex; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 2px; } .theme-switch button { background: none; border: 0; padding: 4px; width: 36px; height: 36px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; } .theme-switch button:hover { background: var(--bg-elev); } .theme-switch button.active { background: var(--brand-soft); transform: scale(1.08); } .theme-switch button img { width: 24px; height: 24px; pointer-events: none; } /* ---------------- Layout ---------------- */ main { max-width: 1320px; margin: 0 auto; padding: 32px 24px 64px; } .page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .page-header h1 { margin: 0; } h1 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; } h2 { font-size: 22px; font-weight: 700; margin: 24px 0 12px; } h3 { font-size: 17px; font-weight: 600; margin: 16px 0 8px; } .muted { color: var(--text-muted); } .tagline { color: var(--brand); font-weight: 600; font-size: 18px; } /* ---------------- Cards ---------------- */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); } .card + .card { margin-top: 16px; } .card h2:first-child, .card h3:first-child { margin-top: 0; } .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* ---------------- Forms ---------------- */ .form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; } .form label, label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500; } .form input, .form select, .form textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="tel"], select, textarea { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; background: var(--bg-elev); color: var(--text); font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .form fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 16px; } .form fieldset legend { padding: 0 6px; font-weight: 600; color: var(--text); } /* ---------------- Combobox (durchsuchbares Dropdown) ---------------- */ .combobox { position: relative; } .combobox .cb-input { width: 100%; } .combobox .cb-input:disabled { opacity: .6; cursor: not-allowed; } .combobox .cb-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-lg); } .combobox .cb-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; } .combobox .cb-list li:hover { background: var(--brand-soft); } .combobox .cb-static { display: none; } .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } /* ---------------- Buttons ---------------- */ .btn, button[type="submit"], .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: #fff; border: 0; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, transform .05s; text-decoration: none; } .btn:hover, .btn-primary:hover, button[type="submit"]:hover { background: var(--brand-hover); color: #fff; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-secondary { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong); } .btn-secondary:hover { background: var(--bg-alt); color: var(--text); } .btn-danger { background: var(--bad); } .btn-danger:hover { background: var(--bad); filter: brightness(.92); } .btn-link { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 6px 10px; font-weight: 600; font-size: 14px; } .btn-sm { padding: 6px 12px; font-size: 13px; } /* ---------------- Alerts ---------------- */ .alert { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); margin: 12px 0; } .alert.error { background: rgba(192,57,43,.08); border-color: rgba(192,57,43,.3); color: var(--bad); } .alert.good { background: rgba(25,135,84,.08); border-color: rgba(25,135,84,.3); color: var(--good); } .alert.info { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-hover); } /* ---------------- Tables / Lists ---------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); } table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data thead th { position: sticky; top: 0; background: var(--bg-alt); text-align: left; font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--border-strong); color: var(--text); z-index: 1; } table.data tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); } table.data tbody tr:hover { background: var(--bg-alt); } table.data tbody tr:last-child td { border-bottom: 0; } .list-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin: 16px 0; } .list-toolbar input[type="search"] { flex: 1; min-width: 200px; } /* badges */ .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; } .badge.good { background: rgba(25,135,84,.15); color: var(--good); } .badge.bad { background: rgba(192,57,43,.15); color: var(--bad); } .badge.muted{ background: var(--bg-alt); color: var(--text-muted); } .badge.brand{ background: var(--brand-soft); color: var(--brand-hover); } .badge.sm { font-size: 11px; padding: 1px 7px; } /* ---------------- Shop-Liste (Filter / A-Z / Sticky / Expander) ---------------- */ .shoplist-toolbar { display: flex; flex-direction: column; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 16px 0; position: sticky; top: var(--sticky-top, 0px); z-index: 5; } .shoplist-toolbar .tb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .shoplist-toolbar input[type="search"] { flex: 2; min-width: 340px; padding: 10px 14px; font-size: 14px; border-radius: 8px; } .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; } .filter-chip { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); font-size: 13px; cursor: pointer; user-select: none; } .filter-chip:hover { border-color: var(--brand); } .filter-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; } .filter-chip .cnt { opacity: .7; font-size: 11px; margin-left: 4px; } .alpha-bar { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } .alpha-btn { flex: 1 1 0; min-width: 34px; text-align: center; padding: 9px 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s; } .alpha-btn:hover { background: var(--bg-alt); border-color: var(--brand); } .alpha-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; } .alpha-btn[data-letter="all"] { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; } .shoplist-empty { padding: 18px; color: var(--text-muted); } /* Tabellen-Panel scrollt intern → Header friert ein (wie Excel) */ .table-wrap.sticky-wrap { max-height: calc(100vh - 200px); overflow: auto; } .sticky-wrap table.data thead th { z-index: 4; box-shadow: 0 1px 0 var(--border-strong); } /* Aufklappbarer Langtext */ .clamp-text .full { display: none; } .clamp-text.open .preview { display: none; } .clamp-text.open .full { display: inline; } .clamp-toggle { color: var(--brand); cursor: pointer; font-size: 12px; white-space: nowrap; margin-left: 4px; } .clamp-toggle:hover { text-decoration: underline; } /* ---------------- Hero ---------------- */ .hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding: 32px 0 64px; } .hero h1 { font-size: 44px; line-height: 1.1; } .hero-img { width: 100%; max-width: 480px; height: auto; display: block; } .hero-art { display: flex; justify-content: center; } @media (max-width: 720px) { .hero { grid-template-columns: 1fr; gap: 24px; } .hero-art { order: -1; } } /* ---------------- Admin Sidebar ---------------- */ /* Admin: volle Seitenbreite nutzen */ body:has(.admin-shell) main, body:has(.admin-shell) .site-header-inner, body:has(.admin-shell) .site-footer-inner { max-width: none; } .admin-shell { display: grid; grid-template-columns: 220px 1fr; gap: 24px; } .admin-shell .admin-side { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 12px; height: fit-content; position: sticky; top: 80px; } .admin-side a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--text); font-weight: 500; font-size: 14px; margin-bottom: 2px; } .admin-side a:hover { background: var(--bg-alt); text-decoration: none; } .admin-side a.active { background: var(--brand-soft); color: var(--brand-hover); } @media (max-width: 880px) { .admin-shell { grid-template-columns: 1fr; } .admin-side { position: static; } } /* utility */ .stack > * + * { margin-top: 10px; } .spacer { flex: 1; } .right { margin-left: auto; } .small { font-size: 13px; } .hidden { display: none !important; } footer.site-footer { border-top: 1px solid var(--border); background: var(--bg-elev); padding: 24px; margin-top: 48px; color: var(--text-muted); font-size: 13px; } .site-footer-inner { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .site-footer-inner a { color: var(--text-muted); } .site-footer-inner a:hover { color: var(--brand); } /* Spinner für Background-Jobs (Add → related/image/manufacturer) */ .job-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border, #e0e0e0); border-top-color: var(--brand, #00A651); border-radius: 50%; animation: jobspin 0.8s linear infinite; vertical-align: middle; margin-left: 6px; } .job-spinner.lg { width: 18px; height: 18px; border-width: 3px; margin-left: 10px; } .job-status-text { font-size: 12px; color: var(--text-muted, #666); margin-left: 6px; } @keyframes jobspin { to { transform: rotate(360deg); } } /* Henne-mit-Lupe-Indikator für laufende Produkt-Jobs (statt Ring-Spinner) */ .job-search { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 8px; } .job-henne { position: relative; display: inline-flex; width: 18px; height: 18px; flex: none; } .job-search.lg .job-henne { width: 24px; height: 24px; } .job-henne-img { width: 100%; height: 100%; object-fit: contain; animation: hennaBob 1.2s ease-in-out infinite; } .job-lupe { position: absolute; right: -6px; bottom: -5px; font-size: 11px; line-height: 1; animation: lupeSearch 1.6s ease-in-out infinite; } .job-search.lg .job-lupe { font-size: 14px; right: -7px; } .job-status-text { font-size: 12px; color: var(--text-muted, #666); white-space: nowrap; } .job-search.lg .job-status-text { font-size: 13px; font-weight: 400; } /* Große Henne in der Banner-Box (oben auf der Produktseite) */ .job-search-banner { display: flex; align-items: center; gap: 14px; margin: 0; } .job-search-banner .job-henne { width: 42px; height: 42px; } .job-search-banner .job-lupe { font-size: 22px; right: -9px; bottom: -7px; } .job-search-banner .job-status-text { font-size: 15px; font-weight: 500; color: var(--text, #333); white-space: normal; } @keyframes hennaBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes lupeSearch { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-3px, -1px) rotate(-12deg); } 75% { transform: translate(2px, 1px) rotate(10deg); } } /* Hinweis-Callout (themes-aware, lesbar in weiss/braun/schwarz) */ .callout { background: var(--brand-soft); color: var(--text); border-left: 4px solid var(--brand); border-radius: 4px; padding: 12px 16px; margin: 0 0 16px; } .callout p { margin: 0; } /* ============================================================ Listen-Ansicht: Umschalter Tabelle / Karten + Karten-Layout ============================================================ */ .view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-elev); } .view-switch button { border: 0; background: transparent; padding: 7px 13px; cursor: pointer; font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; line-height: 1; transition: background .12s, color .12s; } .view-switch button + button { border-left: 1px solid var(--border); } .view-switch button:hover { color: var(--text); } .view-switch button.active { background: var(--brand); color: #fff; } .listview[data-view="table"] > .view-cards { display: none; } .listview[data-view="cards"] > .view-table { display: none; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 14px; margin-bottom: 8px; } .scard { position: relative; display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; } .scard:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--brand); } .scard__body { display: flex; gap: 13px; padding: 14px; text-decoration: none; color: inherit; } .scard__img { width: 80px; height: 80px; flex: none; border-radius: 10px; border: 1px solid var(--border); background: #fff; object-fit: contain; padding: 4px; } .scard__main { min-width: 0; flex: 1; display: flex; flex-direction: column; } .scard__name { font-weight: 600; color: var(--text); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .scard:hover .scard__name { color: var(--brand); } .scard__meta { font-size: 13px; color: var(--text-muted); margin-top: 5px; display: flex; flex-direction: column; gap: 2px; } .scard__chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; } .scard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--border); background: var(--bg-alt); } .scard__price { font-size: 18px; font-weight: 700; color: var(--brand); white-space: nowrap; } .scard__price .lbl { font-weight: 400; color: var(--text-muted); font-size: 12px; } .scard__sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; } .scard__actions { display: flex; align-items: center; gap: 4px; } .scard__badge { position: absolute; top: 10px; right: 10px; } .scard__icon { border: 0; background: transparent; cursor: pointer; font-size: 15px; padding: 5px 7px; border-radius: 7px; color: var(--text-muted); line-height: 1; } .scard__icon:hover { background: var(--border); color: var(--text); } .scard__icon.danger:hover { color: var(--bad); } /* Shop-Karte: kein Bild, Trust prominent */ .scard--shop .scard__body { flex-direction: column; gap: 9px; } .scard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .scard__reason { font-size: 12px; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Listen-Leiste: Such-/Sortier-Gruppe füllt die Breite, Ansicht-Umschalter rechts. Einheitliche Höhe ALLER Bedien-Elemente (Inputs, Select, Buttons, Umschalter). */ .listbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .listbar > form { flex: 1 1 320px; margin: 0; display: flex; gap: 10px; align-items: center; } .listbar > form input[type="search"] { flex: 1 1 auto; min-width: 0; } .listbar > .view-switch { flex: none; } .listbar input, .listbar select, .listbar .btn { height: 40px; } .listbar .btn { padding-top: 0; padding-bottom: 0; } /* Umschalter überall auf einheitliche Höhe */ .view-switch { height: 40px; } .view-switch button { height: 100%; } .shoplist-toolbar input[type="search"] { height: 40px; } /* Gruppen-Karte: Hersteller/Varianten als eingerückte Unterzeilen */ .scard__meta .indent { padding-left: 12px; } /* Versteckte recheck-toolbar (
) zwischen zwei Cards bricht .card + .card → die nachfolgende Card bekommt sonst keinen Abstand und überlappt. Generisch fixen. */ .recheck-toolbar + .card { margin-top: 16px; } /* Status-Badge (oben rechts) nicht vom mehrzeiligen Produktnamen überlappen lassen */ .scard--product .scard__name { padding-right: 52px; } /* ============================================================ Mobile / App-Optimierung Greift auf Handys und in der Capacitor-App (lädt dieselbe Seite). Safe-Area-Insets fangen Notch/Statusleiste im Vollbild ab. ============================================================ */ @media (max-width: 768px) { .site-header-inner { flex-wrap: wrap; gap: 10px 12px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); } .brand { font-size: 16px; } .brand img { width: 28px; height: 28px; } .site-tools { margin-left: auto; gap: 6px; } .site-tools a.small { display: none; } /* E-Mail-Adresse im Header ausblenden */ /* Navigation als volle, horizontal wischbare Zeile unter Logo/Tools */ .site-nav { order: 3; flex-basis: 100%; width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { white-space: nowrap; } main { padding: 18px 14px; padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); } h1 { font-size: 23px; } h2 { font-size: 18px; } h3 { font-size: 16px; } .hero h1 { font-size: 30px; } .tagline { font-size: 16px; } .card { padding: 16px; } /* Breite Datentabellen horizontal scrollen statt die Seite zu sprengen */ table.data { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* Such-/Filterleiste stapeln, Umschalter rechts */ .listbar > form { flex: 1 1 100%; } .listbar > .view-switch { margin-left: auto; } .scard__img { width: 64px; height: 64px; } footer.site-footer { padding: 20px 14px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } }