/* Chronologischer Bibelleseplan – ruhiges, klares Design (Konzept §26). */ :root { --bg: #f6f5f1; --surface: #ffffff; --surface-alt: #efede7; --text: #23241f; --text-muted: #5f6157; --border: #dcdacf; --accent: #2f5d3a; --accent-weak: #cfe2d3; --read: #4c8c5a; --read-weak: #bcd9c2; --open: #d7d5c8; --fire: #d98324; --ice: #4a86c4; --missed: #b98a86; --focus: #1f6feb; --radius: 12px; --maxw: 44rem; color-scheme: light dark; } /* Dunkles Farbschema – Tokens einmal definiert, dreifach angewandt: 1) Systemvorgabe „dunkel“, sofern der Nutzer nicht explizit „hell“ gewählt hat 2) explizite Nutzerwahl „dunkel“ (data-theme="dark" am ) Die Nutzerwahl liegt in den Einstellungen und wird von js/theme.js gesetzt. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #171815; --surface: #21221e; --surface-alt: #2a2b26; --text: #e9e8e1; --text-muted: #a9aa9e; --border: #3a3b34; --accent: #7fb98c; --accent-weak: #2c3f31; --read: #6bbd7c; --read-weak: #2f4a37; --open: #3c3d36; --fire: #e6a052; --ice: #6ba8dd; --missed: #a5726d; --focus: #5b9bff; } } :root[data-theme="dark"] { --bg: #171815; --surface: #21221e; --surface-alt: #2a2b26; --text: #e9e8e1; --text-muted: #a9aa9e; --border: #3a3b34; --accent: #7fb98c; --accent-weak: #2c3f31; --read: #6bbd7c; --read-weak: #2f4a37; --open: #3c3d36; --fire: #e6a052; --ice: #6ba8dd; --missed: #a5726d; --focus: #5b9bff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding-bottom: 4.5rem; } .skip-link { position: absolute; left: -999px; } .skip-link:focus { left: 1rem; top: 0.5rem; background: var(--surface); padding: 0.5rem 0.75rem; border-radius: 8px; z-index: 20; } .app-header { max-width: var(--maxw); margin: 0 auto; padding: 1rem 1rem 0.25rem; } .app-title { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; margin: 0; color: var(--text-muted); } .app-main { max-width: var(--maxw); margin: 0 auto; padding: 0.5rem 1rem 2rem; } .app-main:focus { outline: none; } .loading { color: var(--text-muted); } /* Navigation */ .app-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 0.25rem; background: var(--surface); border-top: 1px solid var(--border); padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom)); z-index: 10; } .app-nav a { flex: 1 1 0; max-width: 10rem; text-align: center; padding: 0.6rem 0.5rem; border-radius: 10px; text-decoration: none; color: var(--text-muted); font-weight: 500; } .app-nav a[aria-current="page"] { background: var(--accent-weak); color: var(--accent); } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0.85rem 0; } .card h2 { margin: 0 0 0.4rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .card .round { color: var(--text-muted); font-size: 0.9rem; } .card .chapter { font-size: 1.6rem; font-weight: 600; margin: 0.15rem 0 0.75rem; } /* Buttons */ button, .btn { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); padding: 0.7rem 1rem; min-height: 2.75rem; } button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } button.ghost { background: transparent; } button:disabled { opacity: 0.5; cursor: default; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } a.ext-link { color: var(--accent); text-decoration: none; font-weight: 500; padding: 0.6rem 0; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* Today / streak header */ .status-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: baseline; margin: 0.4rem 0 0.2rem; font-size: 1.05rem; } .status-row .big { font-weight: 600; } .goal-line { color: var(--text-muted); margin: 0.1rem 0 0.6rem; } .goal-done { color: var(--read); font-weight: 600; } /* Progress bars */ .bar { --p: 0%; position: relative; height: 0.7rem; background: var(--open); border-radius: 999px; overflow: hidden; margin: 0.4rem 0; } .bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--read); border-radius: 999px; } .bar-label { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-muted); } /* Week overview */ .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; text-align: center; } .week .d { font-size: 0.75rem; color: var(--text-muted); } .week .m { font-size: 1.15rem; padding: 0.3rem 0; border-radius: 8px; background: var(--surface-alt); } .week .m[data-status="fire"] { background: color-mix(in srgb, var(--fire) 22%, transparent); } .week .m[data-status="ice"] { background: color-mix(in srgb, var(--ice) 22%, transparent); } .week .m[data-status="missed"] { background: color-mix(in srgb, var(--missed) 22%, transparent); } /* Chapter matrix */ .matrix-wrap { overflow-x: auto; padding-bottom: 0.5rem; } .matrix { display: flex; gap: 7px; align-items: flex-end; min-height: 1px; } .matrix .col { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; } .matrix .stack { display: flex; flex-direction: column-reverse; gap: 2px; } .matrix .cell { width: 9px; height: 9px; border-radius: 2px; background: var(--open); } .matrix .cell[data-state="read"] { background: var(--read); } .matrix .cell[data-state="partial"] { background: var(--read-weak); } .matrix .cell.next { outline: 2px solid var(--accent); outline-offset: 1px; } .matrix .col .cap { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.62rem; line-height: 1; color: var(--text-muted); /* feste Höhe: so liegen die Balken-Grundlinien aller Bücher auf einer Linie */ height: 7rem; overflow: hidden; white-space: nowrap; /* Text an die Balkenwurzel schieben (nach der 180°-Drehung = oben, dicht am Balken) */ text-align: end; } .matrix .col.complete .cap { color: var(--read); font-weight: 600; } .matrix-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; } .matrix-legend .swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; vertical-align: -1px; margin-right: 0.3rem; background: var(--open); } .matrix-legend .swatch[data-state="read"] { background: var(--read); } .matrix-legend .swatch[data-state="partial"] { background: var(--read-weak); } .book-list { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.9rem; } .book-list li { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--border); } .book-list li.complete { color: var(--read); } /* Settings */ .field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.9rem 0; } .field label { font-weight: 500; } .field select, .field input[type="file"] { font: inherit; padding: 0.5rem; } .row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0.9rem 0; } .muted { color: var(--text-muted); font-size: 0.9rem; } .danger { color: var(--missed); } button.danger-btn { border-color: var(--missed); color: var(--missed); background: transparent; } /* Dialog */ dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); max-width: 30rem; width: calc(100vw - 2rem); padding: 1.25rem; } dialog::backdrop { background: rgba(0,0,0,0.45); } /* Toast */ .toast { position: fixed; left: 50%; bottom: 5rem; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 0.6rem 1rem; border-radius: 10px; z-index: 30; max-width: 90vw; } /* Verlauf „Zuletzt gelesen“ auf der Lesen-Seite */ .history { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.6rem; } .history-title { margin: 0 0 0.35rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); } .history-list { list-style: none; margin: 0; padding: 0; } .history-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; } .history-list li:last-child { border-bottom: 0; } .history-list .h-chapter { flex: 1 1 auto; } .history-list .h-chapter a { color: var(--accent); text-decoration: none; } .history-list .h-when { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; } .history-list .h-undo { min-height: 0; padding: 0.25rem 0.6rem; font-size: 0.8rem; } .history-list li.is-latest { font-weight: 600; } .history-empty { margin-top: 0.9rem; } /* Zugangsschranke (gate.js) */ body.gated { padding-bottom: 2rem; } body.gated .app-nav { display: none; } .gate h2 { font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--text); margin-bottom: 0.6rem; } .gate p { margin: 0.6rem 0; } .gate .gate-subhead { font-weight: 600; margin-top: 1rem; } .gate .gate-done { color: var(--read); font-weight: 600; } .gate .primary { margin: 0.4rem 0 0.2rem; } .gate-steps { margin: 0.4rem 0; padding-left: 1.3rem; } .gate-steps li { margin: 0.4rem 0; } .gate-url { display: inline-block; word-break: break-all; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px; padding: 0.15rem 0.4rem; font-size: 0.95em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }