/* Schriften lokal eingebettet (SIL Open Font License, siehe assets/fonts/LIZENZ.txt) – kein Aufruf zu Google zur Laufzeit */ @font-face { font-family: "Marcellus"; src: url("fonts/marcellus-400.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Ruhestein – mobile first, dunkles Standard-Theme, hell optional (data-theme am ) */ :root { --bg: #14110e; --panel: #1f1a15; --panel-2: #2a241c; --line: #3b3227; --text: #ece3d1; --muted: #a3977f; --gold: #f0c05a; --quest: #ffd100; --ok: #3fb950; --warn: #f0a63a; --bad: #e5534b; --info: #6cb6ff; --r-common: #a8a8a8; --r-rare: #4a9bff; --r-epic: #b96bff; --r-legendary: #ff8c1a; --c-gold: #f2c14e; --c-silver: #cfd4dc; --c-copper: #cd8150; --shadow: 0 10px 40px rgba(0, 0, 0, .55); --radius: 14px; --tab-h: 62px; --serif: "Marcellus", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --sans: "Inter", -apple-system, BLINKMACSYSTEMFONT, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: dark; } :root[data-theme="light"] { --bg: #f1e9d8; --panel: #fbf6ea; --panel-2: #efe5d0; --line: #d6c8aa; --text: #2a2218; --muted: #6f6450; --gold: #8a6210; --quest: #a87c00; --ok: #1a7f37; --warn: #9a6700; --bad: #c0362c; --info: #0b62c4; --r-common: #6b6b6b; --r-rare: #0b62c4; --r-epic: #7d2bd0; --r-legendary: #c05a00; --c-gold: #c9971f; --c-silver: #8d95a1; --c-copper: #a85f31; --shadow: 0 10px 40px rgba(60, 40, 10, .25); color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 var(--sans); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } [hidden] { display: none !important; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: .02em; margin: 0; text-wrap: balance; } h1 { font-size: 1.5rem; } h2 { font-size: 1.12rem; color: var(--gold); } h3 { font-size: 1rem; } p { margin: .4rem 0; } a { color: var(--info); } small, .muted { color: var(--muted); } .num { font-variant-numeric: tabular-nums; } /* ── Layout ─────────────────────────────────────────── */ .app { min-height: 100dvh; } .col { min-width: 0; } .top { position: sticky; top: 0; z-index: 20; padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .top-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .top-row .grow { flex: 1; } .screen { padding: 14px 16px calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 28px); max-width: 860px; margin: 0 auto; outline: none; } .screen > h1 { margin: 4px 0 12px; } .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 4px 6px calc(env(safe-area-inset-bottom, 0px) + 4px); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); scroll-snap-type: x proximity; } .nav::-webkit-scrollbar { display: none; } .nav .brand { display: none; } .nav a { flex: 0 0 auto; min-width: 70px; height: calc(var(--tab-h) - 8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: .68rem; border-radius: 10px; scroll-snap-align: start; } .nav a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .nav a[aria-current="page"], .nav a.as-current { color: var(--gold); background: var(--panel-2); } .nav a { position: relative; flex: 1 1 0; } .nav a.more-only { display: none; } .nav-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 .62rem/17px var(--sans); text-align: center; } @media (min-width: 900px) { .app { display: grid; grid-template-columns: 224px 1fr; } .nav { position: sticky; top: 0; bottom: auto; height: 100dvh; flex-direction: column; overflow-y: auto; padding: 18px 12px; border-top: 0; border-right: 1px solid var(--line); gap: 4px; } .nav .brand { display: block; font: 600 1.35rem var(--serif); color: var(--gold); padding: 4px 10px 14px; } .nav a { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; height: 44px; min-width: 0; padding: 0 12px; font-size: .95rem; } .nav a.more-only { display: flex; } .nav a.mobile-only { display: none; } .nav-badge { position: static; margin-left: auto; } .screen { padding-bottom: 48px; } .toasts { bottom: 24px !important; } } /* ── Bausteine ──────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 14px; } .card > h2 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .card > h2 .count { margin-left: auto; font: 500 .85rem var(--sans); color: var(--muted); } .card.flat { padding: 0; overflow: hidden; } .row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .stack > * + * { margin-top: 10px; } .sep { border: 0; border-top: 1px solid var(--line); margin: 12px 0; } .btn { appearance: none; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: 500 .95rem var(--sans); min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn.primary { background: linear-gradient(180deg, #f3cb6d, #d9a53a); border-color: #b98a2a; color: #2a1e05; font-weight: 650; } .btn.danger { color: var(--bad); } .btn.ghost { background: transparent; } .btn.small { min-height: 36px; padding: 0 12px; font-size: .85rem; border-radius: 10px; } .btn.block { width: 100%; } .btn[disabled], .btn[aria-busy="true"] { opacity: .5; pointer-events: none; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; } .btn-row > .btn { flex: 1; } label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 4px; } input, select, textarea { width: 100%; font: 16px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px; } textarea { min-height: 110px; resize: vertical; line-height: 1.4; } input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible, .check:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--gold); flex: none; } .field { margin-bottom: 12px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .checkline { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: .95rem; margin: 0 0 10px; min-height: 32px; } .hint { font-size: .8rem; color: var(--muted); margin-top: 4px; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--panel-2); white-space: nowrap; } .chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); } .chip.ok { color: var(--ok); } .chip.bad { color: var(--bad); } button.chip { cursor: pointer; font-family: inherit; min-height: 32px; } button.chip[aria-pressed="true"] { color: var(--bg); background: var(--gold); border-color: var(--gold); } .banner { border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); background: var(--panel-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .92rem; } .banner.gold { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); } .banner.warn { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); } .banner .grow { min-width: 180px; } /* Münzen */ .coins { display: inline-flex; gap: 7px; align-items: baseline; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .coin::after { content: ""; display: inline-block; width: .62em; height: .62em; border-radius: 50%; margin-left: 3px; vertical-align: .02em; box-shadow: inset 0 -1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4); } .coin.g::after { background: var(--c-gold); } .coin.s::after { background: var(--c-silver); } .coin.k::after { background: var(--c-copper); } .coins.neg { color: var(--bad); } /* Kopfzeile */ .wallet { font-size: 1.05rem; } .streak { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; } .streak svg { width: 18px; height: 18px; fill: currentColor; } .streak.zero { color: var(--muted); } .weekpips { display: inline-flex; gap: 4px; align-items: center; } .pip { width: 11px; height: 11px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); } .pip.ok { background: var(--ok); border-color: var(--ok); } .pip.frei { background: transparent; border: 2px solid var(--r-legendary); } .pip.miss { background: transparent; border-color: var(--bad); position: relative; } .pip.miss::after { content: ""; position: absolute; inset: 4px 0; background: var(--bad); height: 1px; transform: rotate(45deg); } .pip.today { outline: 1px solid var(--text); outline-offset: 1px; } .agebar { margin-top: 7px; height: 5px; border-radius: 3px; background: var(--panel-2); overflow: hidden; cursor: pointer; border: 0; padding: 0; width: 100%; display: block; } .agebar > i { display: block; height: 100%; background: linear-gradient(90deg, #7b5cc4, #b96bff); border-radius: 3px; } .agetext { border: 0; background: none; color: var(--muted); font: inherit; font-size: .75rem; padding: 4px 0 0; cursor: pointer; text-align: left; } /* Fortschrittsbalken */ .bar { height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width .4s ease; } .bar.ok > i { background: var(--ok); } .bar.big { height: 16px; border-radius: 8px; } .bar.big > i { border-radius: 8px; background: linear-gradient(90deg, #7b5cc4, #b96bff); } /* ── Quests ─────────────────────────────────────────── */ .quick { display: flex; gap: 8px; margin-bottom: 6px; } .quick input { border-radius: 12px; } .qlist { list-style: none; margin: 0; padding: 0; } .q { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); min-height: 56px; } .q:first-child { border-top: 0; } .q-body { flex: 1; min-width: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 4px 0; cursor: pointer; } .q-title { display: block; overflow-wrap: anywhere; font-family: var(--serif); letter-spacing: .01em; } .q-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-top: 2px; } .q-meta a { color: var(--info); text-decoration: none; } .q.done .q-title { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); } .q.pending .q-title::after { content: " · wartet auf Sync"; color: var(--warn); font-size: .8rem; } .check { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; color: var(--muted); } .check i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; transition: all .18s ease; } .check svg { width: 16px; height: 16px; stroke: var(--bg); stroke-width: 3; fill: none; opacity: 0; } .q.done .check { color: var(--ok); } .q.done .check i { background: var(--ok); } .q.done .check svg { opacity: 1; } .check[disabled] { cursor: default; } .q.main-q { border: 1px solid color-mix(in srgb, var(--quest) 55%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--quest) 9%, var(--panel)), var(--panel)); border-radius: 12px; padding: 12px 10px; } .q.main-q .q-title { font: 600 1.12rem var(--serif); } .q.main-q .check { color: var(--quest); } .q.main-q.done .check { color: var(--ok); } .bang { font: 700 1.5rem var(--serif); color: var(--quest); text-shadow: 0 0 12px color-mix(in srgb, var(--quest) 50%, transparent); } .dailies { display: grid; grid-template-columns: 1fr; gap: 0; } .empty { color: var(--muted); font-size: .92rem; padding: 6px 0; } .undo-strip { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; } .undo-strip .chip { color: var(--text); } details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; } details > summary::-webkit-details-marker { display: none; } details > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; } details[open] > summary::before { transform: rotate(90deg); } /* ── Items ──────────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; } .slot { position: relative; aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--rar, var(--line)); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rar, var(--line)) 22%, var(--panel-2)), var(--panel-2)); display: grid; place-items: center; font-size: 2rem; cursor: pointer; color: inherit; padding: 0; } .slot img, .icon img { width: 70%; height: 70%; object-fit: contain; border-radius: 6px; } .slot .qty { position: absolute; right: 5px; bottom: 2px; font: 700 .85rem var(--sans); text-shadow: 0 1px 2px #000, 0 0 4px #000; color: #fff; } .slot .cd { position: absolute; inset: 0; border-radius: 10px; background: rgba(0,0,0,.62); display: grid; place-items: center; font: 600 .7rem var(--sans); color: #fff; text-align: center; padding: 4px; } .rar-common { --rar: var(--r-common); } .rar-rare { --rar: var(--r-rare); } .rar-epic { --rar: var(--r-epic); } .rar-legendary { --rar: var(--r-legendary); } .rar-name { color: var(--rar); font-weight: 650; } .icon { width: 48px; height: 48px; flex: none; border-radius: 10px; border: 2px solid var(--rar, var(--line)); display: grid; place-items: center; font-size: 1.6rem; background: var(--panel-2); } .list { list-style: none; margin: 0; padding: 0; } .list > li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); } .list > li:first-child { border-top: 0; } .list .title { font-weight: 600; overflow-wrap: anywhere; } .list .sub { font-size: .82rem; color: var(--muted); } .li-btn { border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; } .stepper { display: inline-flex; align-items: center; gap: 6px; } .stepper .btn { width: 44px; padding: 0; font-size: 1.2rem; } .stepper .val { min-width: 54px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .low .val { color: var(--bad); } /* ── Sheet / Modal ──────────────────────────────────── */ .sheet-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s ease; } .sheet { width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 20px); box-shadow: var(--shadow); animation: up .22s cubic-bezier(.2,.8,.2,1); } .sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 12px; } .sheet-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .sheet-head h2 { flex: 1; font-size: 1.2rem; color: var(--text); } .sheet-close { border: 0; background: var(--panel-2); color: var(--muted); width: 36px; height: 36px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; flex: none; } @media (min-width: 700px) { .sheet-back { align-items: center; } .sheet { border-radius: 20px; border-bottom: 1px solid var(--line); } } @keyframes fade { from { opacity: 0; } } @keyframes up { from { transform: translateY(40px); opacity: 0; } } /* Drop-Karte */ .drop { text-align: center; padding: 8px 0 4px; } .drop .big { width: 120px; height: 120px; margin: 8px auto 12px; border-radius: 22px; border: 3px solid var(--rar); display: grid; place-items: center; font-size: 4rem; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rar) 35%, var(--panel-2)), var(--panel-2)); box-shadow: 0 0 44px color-mix(in srgb, var(--rar) 55%, transparent); animation: pop .5s cubic-bezier(.2,1.4,.4,1); } .drop .big img { width: 72%; height: 72%; object-fit: contain; } .drop h2 { color: var(--rar); font-size: 1.4rem; } @keyframes pop { from { transform: scale(.4) rotate(-8deg); opacity: 0; } } /* Payout-Animation */ .fly { position: fixed; z-index: 70; pointer-events: none; font-size: 1.15rem; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 85%, transparent); border: 1px solid var(--gold); animation: fly 1.3s ease-out forwards; transform: translate(-50%, 0); } @keyframes fly { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -8px) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } } .spark { position: fixed; z-index: 69; width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); pointer-events: none; animation: spark .8s ease-out forwards; } @keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fly, .spark, .drop .big, .sheet, .sheet-back { animation-duration: .01s; } .spark { display: none; } } /* Toasts */ .toasts { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 14px); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { pointer-events: auto; max-width: 520px; width: fit-content; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--gold); color: var(--text); padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow); font-size: .92rem; animation: up .2s ease; display: flex; gap: 12px; align-items: center; } .toast.bad { border-left-color: var(--bad); } .toast.ok { border-left-color: var(--ok); } .toast button { border: 0; background: none; color: var(--gold); font: 600 .9rem var(--sans); cursor: pointer; padding: 6px; } /* Login */ .gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 0%, #3a2a12 0%, var(--bg) 60%); } :root[data-theme="light"] .gate { background: radial-gradient(ellipse at 50% 0%, #fff6dc 0%, var(--bg) 60%); } .gate form { width: 100%; max-width: 360px; } .gate .stone { width: 96px; height: 96px; margin: 0 auto 14px; display: block; filter: drop-shadow(0 0 24px rgba(108, 182, 255, .45)); } .gate h1 { text-align: center; font-size: 2rem; color: var(--gold); margin-bottom: 4px; } .gate p.lead { text-align: center; color: var(--muted); margin-bottom: 22px; } /* Tabs innerhalb eines Screens */ .tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; } .tabs button { flex: 0 0 auto; } /* Tabellen */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .88rem; } th, td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 500; font-size: .78rem; border-top: 0; white-space: nowrap; } td.r, th.r { text-align: right; white-space: nowrap; } tr.undone td { opacity: .45; text-decoration: line-through; } /* Heatmap (Charakter) */ .heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); grid-auto-columns: 14px; gap: 3px; overflow-x: auto; padding-bottom: 6px; } .hc { width: 14px; height: 14px; border-radius: 3px; background: var(--panel-2); position: relative; } .hc.ok { background: var(--ok); } .hc.frei { background: transparent; border: 2px solid var(--r-legendary); } .hc.miss { background: color-mix(in srgb, var(--bad) 28%, var(--panel-2)); } .hc.miss::after, .hc.sick::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 var(--sans); color: var(--bad); } .hc.sick { background: color-mix(in srgb, var(--info) 25%, var(--panel-2)); } .hc.sick::after { content: "+"; color: var(--info); } .hc.open { outline: 1px solid var(--text); outline-offset: 0; } .hc.none { background: transparent; } .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: 8px; } .legend span { display: inline-flex; align-items: center; gap: 5px; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .stat { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; } .stat b { display: block; font: 600 1.35rem var(--serif); font-variant-numeric: tabular-nums; } .stat > span { font-size: .78rem; color: var(--muted); display: block; } /* Karte */ #map { height: min(62dvh, 560px); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; z-index: 1; background: var(--panel-2); } :root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.8) contrast(1.05) saturate(.85); } .pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c-gold); border: 2px solid #3a2a08; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.5); } .pin b { transform: rotate(45deg); font: 800 15px/1 var(--serif); color: #2a1e05; } .pin.main { background: #ffd100; } .pin.day { background: #b87333; } .pin.day b { color: #fff3e0; } .pin.side { background: #3d8bff; border-color: #0c2a55; } .pin.side b { color: #fff; } .pin.pool { width: 22px; height: 22px; border-width: 1.500px; } .pin.pool b { font-size: 11px; } .pin.done { background: #7d8a7d; border-color: #3c443c; filter: grayscale(1); opacity: .75; } .map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; font-size: .82rem; color: var(--muted); } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; background: #b87333; flex: 0 0 auto; } .dot.main { background: #ffd100; } .dot.day { background: #b87333; } .dot.side { background: #3d8bff; } .dot.pool { opacity: .55; } .leaflet-popup-content .popup-pay { display: inline-block; margin-top: 4px; } .leaflet-popup-content { font: 14px/1.4 var(--sans); margin: 12px 14px; } .leaflet-popup-content .btn { margin-top: 8px; color: #2a1e05; } /* Drag-Sortierung */ .sortable li { touch-action: pan-y; } .handle { cursor: grab; color: var(--muted); padding: 8px 4px; touch-action: none; user-select: none; -webkit-user-select: none; font-size: 1.2rem; } .dragging { opacity: .6; background: var(--panel-2); } .offline-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); display: inline-block; } pre.code { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; overflow-x: auto; font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; } /* Solange ein Sheet offen ist, rutschen Toasts nach oben, damit sie keine Formularfelder verdecken */ body:has(.sheet-back) .toasts { bottom: auto !important; top: calc(env(safe-area-inset-top, 0px) + 12px); } .gate-legal { text-align: center; margin-top: 18px; font-size: .8rem; } .gate-legal a { color: var(--muted); } /* ── Adressprüfung ─────────────────────────────────────────────────── */ .addr-results { display: grid; gap: 6px; margin-top: 6px; } .addr-hit { display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: inherit; font: inherit; cursor: pointer; } .addr-hit:hover, .addr-hit:focus-visible { border-color: var(--gold); } .addr-map { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 8px; background-color: #2a2a2a; background-repeat: no-repeat; position: relative; overflow: hidden; } .addr-map i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #d33; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); } input.invalid { border-color: var(--bad, #c0392b) !important; } .bad-text { color: var(--bad, #e06c5a); } .warn-text { color: var(--warn, #d9a441); } /* ── Tagesseite ─────────────────────────────────────────────────────── */ .day-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; } .day-head h1 { margin: 0; } .focus-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); display: grid; place-items: center; cursor: pointer; } .focus-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .focus-btn[aria-pressed="true"] { color: var(--info); border-color: var(--info); box-shadow: 0 0 14px rgba(108, 182, 255, .35); } .focus-note { font-size: .8rem; color: var(--info); } .day-grid { display: grid; gap: 10px; } .day-grid .card { margin: 0; padding: 12px 14px; } .day-grid h2 { font-size: 1rem; margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; } .day-grid.with-ticker { padding-bottom: 34px; } @media (min-width: 900px) { .day-grid { grid-template-columns: 1fr 1fr; } .day-zeit, .day-prices { grid-column: 1 / -1; } } .day-zeit { display: flex; gap: 12px; justify-content: space-between; } .dz-date { font: 600 1.02rem var(--serif); color: var(--gold); } .dz-clock { font-size: 2rem; line-height: 1.15; letter-spacing: .02em; } .dz-sub, .day-grid .sub { font-size: .8rem; color: var(--muted); } .dz-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 96px; } .ageline { width: 96px; height: 3px; border-radius: 2px; background: var(--panel-2); overflow: hidden; } .ageline i { display: block; height: 100%; background: var(--r-epic); } .linklike { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; text-decoration: underline; cursor: pointer; text-align: left; } .rowlink { display: block; width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; } .ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 12px; } .ex { display: grid; grid-template-columns: 12px 1fr; column-gap: 6px; align-items: center; font-size: .9rem; } .ex small { grid-column: 2; color: var(--muted); font-size: .76rem; } .exdot { width: 9px; height: 9px; border-radius: 50%; background: #6b6b6b; } .exdot.on { background: var(--ok); box-shadow: 0 0 6px rgba(63, 185, 80, .6); } .hol { margin-bottom: 6px; font-size: .92rem; } .ok-text { color: var(--ok); } .day-prices { font-size: .78rem; color: var(--muted); padding: 2px 2px; } .px-row { display: flex; flex-wrap: wrap; gap: 2px 12px; } .px { background: none; border: 0; padding: 3px 0; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; } .px[aria-pressed="true"] { color: var(--text); text-decoration: underline; } .px .px-l { opacity: .8; } .up { color: #6fae7a; font-style: normal; } .down { color: #c9736b; font-style: normal; } .px-detail { margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); } .spark24 { display: block; width: 100%; height: 44px; margin-top: 4px; color: var(--gold); } .px-stand { font-size: .7rem; opacity: .75; margin-top: 2px; } .nodata { color: #777; } .dtiles { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; } .dtile { width: 22px; height: 22px; border-radius: 6px; border: 1.500px solid var(--c-copper); } .dtile.done { background: var(--c-copper); } .day-grid .line { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: .93rem; } .qmark { color: var(--quest); font: 800 1rem var(--serif); width: 12px; text-align: center; } .struck { text-decoration: line-through; opacity: .6; } .day-heute .next { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .invrow { display: flex; flex-wrap: wrap; gap: 6px; } .invi { position: relative; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.25rem; border: 1.500px solid currentColor; border-radius: 9px; background: var(--panel-2); } .invi img { width: 28px; height: 28px; border-radius: 5px; } .invi b { position: absolute; right: -4px; bottom: -5px; min-width: 16px; padding: 0 3px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font-size: .64rem; line-height: 14px; text-align: center; } .bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; margin: 6px 0 4px; } .bar i { display: block; height: 100%; background: var(--gold); } .ampel { width: 14px; height: 14px; border-radius: 50%; background: #666; } .ampel.green { background: var(--ok); } .ampel.yellow { background: var(--warn); } .ampel.red { background: var(--bad); } .avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); font-size: 1.3rem; overflow: hidden; flex: 0 0 auto; } .avatar.sm { width: 26px; height: 26px; font-size: .95rem; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 .68rem/18px var(--sans); text-align: center; } .ticker { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); z-index: 25; height: 30px; overflow: hidden; display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 92%, transparent); border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); } .tk-track { display: inline-flex; gap: 34px; white-space: nowrap; padding-left: 100%; animation: tk linear infinite; will-change: transform; } .ticker.paused .tk-track { animation-play-state: paused; } @keyframes tk { to { transform: translateX(-50%); } } .tk-item { color: inherit; text-decoration: none; } .tk-item em { font-style: normal; color: var(--gold); opacity: .8; margin-right: 4px; } .tk-px { margin-right: 14px; } .tk-px b { color: var(--text); font-weight: 500; } .tk-menu { position: absolute; right: 0; top: 0; bottom: 0; width: 34px; border: 0; background: linear-gradient(90deg, transparent, var(--bg) 40%); color: var(--muted); font-size: 1.1rem; cursor: pointer; } @media (min-width: 900px) { .ticker { left: 224px; bottom: 0; } } @media (prefers-reduced-motion: reduce) { .tk-track { animation: none; padding-left: 8px; overflow-x: auto; } } .more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } .more-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); text-decoration: none; font-size: .86rem; } .more-tile svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cal-row { padding: 8px 0; border-bottom: 1px solid var(--line); } /* ── Freunde, gemeinsame Quests ─────────────────────────────────────── */ .shared-tag { color: var(--info); } .buddy { display: inline-flex; align-items: center; gap: 4px; } .buddy.erledigt { color: var(--ok); } .buddy.krank, .buddy.freistellung { color: var(--warn); } .shared-box { margin: 10px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--info) 45%, var(--line)); border-radius: 10px; font-size: .9rem; } .shared-box .sub { color: var(--muted); font-size: .82rem; margin-top: 3px; } .fcard { display: grid; gap: 8px; } .fcard .head { display: flex; align-items: center; gap: 10px; } .fcard .head .name { font: 600 1.05rem var(--serif); color: var(--gold); } .fstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; } .fstat { background: var(--panel-2); border-radius: 10px; padding: 7px 9px; } .fstat b { display: block; font-size: 1.05rem; } .fstat small { color: var(--muted); font-size: .7rem; } .cmp { display: grid; grid-template-columns: 74px 1fr 1fr; gap: 3px 8px; align-items: center; font-size: .76rem; color: var(--muted); } .cmp .cbar { height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; } .cmp .cbar i { display: block; height: 100%; background: var(--c-copper); } .cmp .cbar.me i { background: var(--gold); } .minipips { display: inline-flex; gap: 3px; } .minipips i { width: 9px; height: 9px; border-radius: 3px; border: 1px solid var(--line); } .minipips i.ok, .minipips i.frei { background: var(--c-copper); border-color: var(--c-copper); } .minipips i.miss { background: #4a2a26; } /* ── Chat ───────────────────────────────────────────────────────────── */ .chat-head { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 6; padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: 8px; } .chat-log { display: flex; flex-direction: column; gap: 6px; padding-bottom: 76px; min-height: 40dvh; } .msg-day { align-self: center; font-size: .72rem; color: var(--muted); margin: 8px 0 2px; } .msg { max-width: 82%; align-self: flex-start; padding: 8px 11px 5px; border-radius: 14px 14px 14px 4px; background: var(--panel); border: 1px solid var(--line); -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } .msg.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--gold) 14%, var(--panel)); border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); } .msg-text { white-space: pre-wrap; overflow-wrap: anywhere; } .msg-meta { display: block; text-align: right; font-size: .66rem; color: var(--muted); margin-top: 2px; } .voice { display: flex; align-items: center; gap: 8px; min-width: 210px; } .vplay { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--gold); color: #2a1e05; font-size: .9rem; cursor: pointer; flex: 0 0 auto; } .vbar { flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; } .vbar { position: relative; } .vbar::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--panel-2); } .vbar i { position: relative; z-index: 1; display: block; height: 4px; width: 0; border-radius: 2px; background: var(--gold); } .vtime { font-size: .74rem; color: var(--muted); min-width: 32px; } .vspeed { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 8px; font-size: .72rem; padding: 3px 6px; cursor: pointer; } .chat-input { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); } .chat-input textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; } .recbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .recbtn.on { background: var(--bad); border-color: var(--bad); color: #fff; } .rec { display: flex; align-items: center; gap: 8px; min-height: 42px; } .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: recblink 1s steps(2) infinite; } @keyframes recblink { 50% { opacity: .25; } } @media (min-width: 900px) { .chat-input { left: 224px; bottom: 0; } .chat-log { padding-bottom: 90px; } } /* ── Whoop ──────────────────────────────────────────────────────────── */ .rec-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; color: var(--muted); margin: 0 2px 10px; } .whoop-chart { display: block; width: 100%; height: 110px; background: var(--panel-2); border-radius: 10px; } .consent { max-height: 220px; overflow: auto; padding: 10px 12px; margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); font-size: .9rem; } /* Listenzeilen mit zwei Knöpfen: am Handy rutschen die Knöpfe unter den Text, damit der Titel nicht gequetscht wird */ .list li:has(> .row-actions) { flex-wrap: wrap; } .list li:has(> .row-actions) > .grow { flex: 1 1 60%; min-width: 0; } .row-actions { display: flex; gap: 8px; flex: 1 1 100%; justify-content: flex-end; } @media (min-width: 700px) { .row-actions { flex: 0 0 auto; } }