/* Hell ist Standard. Dunkel via [data-theme="dark"] auf . */ :root { --bg: #eef1f6; --card: #ffffff; --line: #e0e5ee; --text: #18202e; --muted: #687081; --accent: #2f6df0; --accent-ink: #ffffff; --topbar: #ffffff; --shadow: 0 1px 2px rgba(20, 30, 50, .05), 0 4px 16px rgba(20, 30, 50, .05); --green: #1f9d57; --orange: #d6841f; --red: #d34b4b; } html[data-theme="dark"] { --bg: #0f1115; --card: #171a21; --line: #262b35; --text: #e7eaf0; --muted: #98a1b3; --accent: #5b8cff; --accent-ink: #0a1326; --topbar: #12141a; --shadow: none; --green: #2fae6a; --orange: #e0922f; --red: #d65151; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } .hero, main { max-width: 1040px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* Topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--topbar); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.3px; } .brand .logo { background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; } .topbar-right { display: flex; align-items: center; gap: 16px; } .themebtn { height: 32px; width: 32px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 15px; cursor: pointer; line-height: 1; } .themebtn:hover { border-color: var(--accent); } /* Hero */ .hero { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; padding-top: 30px; padding-bottom: 24px; } .hero-text { flex: 1 1 420px; min-width: 0; } .hero h1 { margin: 0 0 8px; font-size: 27px; letter-spacing: -0.6px; } .hero .sub { margin: 0; color: var(--muted); max-width: 560px; } .availline { margin: 12px 0 0; font-weight: 600; color: var(--accent); } .pricebox[hidden] { display: none; } .pricebox { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 14px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; box-shadow: var(--shadow); } .pricebox b { font-weight: 700; font-variant-numeric: tabular-nums; } .pricebox .euro { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 14px; } .stats { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; } .stat { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow); min-width: 92px; } .stat .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .stat .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .stat.hl .v { color: var(--green); } /* Karte, volle Breite */ .mapwrap { width: 100%; margin-bottom: 18px; } #map { width: 100%; height: 480px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); z-index: 0; } .leaflet-popup-content { font: 13px system-ui, sans-serif; } .cnt-marker { background: none; border: 0; } .cnt-marker span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font: 700 12px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); } /* Filter */ .filter { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); } .field { display: flex; flex-direction: column; gap: 4px; } .field > label { font-size: 13px; color: var(--muted); min-height: 16px; } .check { color: var(--text); font-size: 14px; display: flex; gap: 6px; align-items: center; height: 40px; white-space: nowrap; cursor: pointer; } .check input { width: auto; height: auto; accent-color: var(--accent); } input, select { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 0 11px; height: 40px; font-size: 15px; } html[data-theme="dark"] input, html[data-theme="dark"] select { background: #0e1116; } input#plz { width: 120px; } button { height: 40px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 0 18px; font-size: 15px; font-weight: 600; cursor: pointer; } button:hover { filter: brightness(1.06); } button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 500; } button.secondary:hover { border-color: var(--accent); filter: none; } /* Legende + Meta */ .legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin: 14px 2px 4px; } .legend span { display: flex; align-items: center; gap: 6px; } .legend .dot, i.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .dot.in_stock { background: var(--green); } .dot.low { background: var(--orange); } .dot.out { background: var(--red); } .meta { color: var(--muted); font-size: 13px; margin: 6px 2px 12px; } /* Trefferliste */ .store { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow); } .store .info { flex: 1; min-width: 0; } .store .name { font-weight: 600; } .store .addr { color: var(--muted); font-size: 13px; } .store .dist { color: var(--muted); font-size: 13px; white-space: nowrap; } .store a { color: var(--accent); text-decoration: none; font-size: 13px; } .store a:hover { text-decoration: underline; } .badge { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap; } .badge.in_stock { background: rgba(31,157,87,.14); color: var(--green); } .badge.low { background: rgba(214,132,31,.16); color: var(--orange); } .badge.out { background: rgba(211,75,75,.13); color: var(--red); } .empty { color: var(--muted); text-align: center; padding: 30px; } /* Info-Bereich (So funktioniert's, FAQ) */ .info { max-width: 1040px; margin: 8px auto 0; padding: 0 20px; } .info h2 { font-size: 20px; margin: 30px 0 14px; letter-spacing: -0.3px; } .steps { display: flex; gap: 14px; flex-wrap: wrap; } .step { flex: 1 1 220px; display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); font-size: 14px; } .step .num { background: var(--accent); color: var(--accent-ink); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; } .lead { color: var(--muted); max-width: 760px; margin: 18px 0 0; } .info details { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; box-shadow: var(--shadow); } .info summary { cursor: pointer; font-weight: 600; } .info details[open] summary { margin-bottom: 8px; } .info details p { color: var(--muted); margin: 0; } .foot { color: var(--muted); font-size: 12px; text-align: center; padding: 28px 20px 44px; max-width: 760px; margin: 24px auto 0; } @media (max-width: 600px) { .stats { gap: 10px; } .stat { min-width: 0; flex: 1; padding: 10px 12px; } .stat .v { font-size: 20px; } #map { height: 360px; } .store { flex-wrap: wrap; } .store .dist { order: 3; } }