/* Lifetree — Dämmerungslicht-Palette: tiefes Blau, warmes Ocker, Off-White. Alle Farben sind Palette-Variablen; ein zweites Profil (Flexoki) überschreibt sie via [data-palette="flexoki"] am . Auswahl liegt im Profil. */ :root, :root[data-palette="daemmerung"] { --bg: #faf6ef; --bg-card: #ffffff; --ink: #1c2a40; --ink-soft: #5a6a80; --blue: #16263d; --blue-mid: #2c4468; --ochre: #c98a2b; --ochre-soft: #f3e3c8; --line: #e8e0d2; /* Aktivitäts-Kategorien (Farbe = was getan wird) */ --cat-regulation: #5f7d55; --cat-nahrung: #c2892f; --cat-training: #b85c34; --cat-regeneration: #a8432f; --cat-ritual: #4f6ea6; --cat-neutral: #c98a2b; /* Sonnenbogen (Timeline-Zeile) + Map-Tönung (kühl Winter → warm Sommer) */ --arc-night: #16263d; --arc-dawn: #b9793a; --arc-day: #f0d6a0; --map-cool: 44, 68, 104; --map-warm: 224, 162, 75; --map-polar: rgba(60, 80, 120, 0.30); --scrim-ink: 6, 12, 22; --card-grad-a: #fdf9f1; --card-grad-b: #f4ecdd; --card-border: #e6d9bf; } /* Flexoki-basierte Palette (nach Steph Ango; Header bleibt dunkel = Lifetree-Identität) */ :root[data-palette="flexoki"] { --bg: #fffcf0; /* paper */ --bg-card: #ffffff; --ink: #100f0f; /* black */ --ink-soft: #6f6e69; /* tx-2 */ --blue: #1c1b1a; /* base-950 — dunkler Header */ --blue-mid: #343331; /* base-850 */ --ochre: #bc5215; /* orange-600 */ --ochre-soft: #f1e4cf; --line: #e6e4d9; /* base-100 */ --cat-regulation: #66800b; /* green-600 */ --cat-nahrung: #ad8301; /* yellow-600 */ --cat-training: #bc5215; /* orange-600 */ --cat-regeneration: #af3029; /* red-600 */ --cat-ritual: #205ea6; /* blue-600 */ --cat-neutral: #ad8301; --arc-night: #1c1b1a; --arc-dawn: #bc5215; --arc-day: #e8d7a0; --map-cool: 32, 40, 66; --map-warm: 189, 131, 40; --map-polar: rgba(32, 40, 66, 0.30); --scrim-ink: 16, 15, 15; --card-grad-a: #fffcf0; --card-grad-b: #f2e9d3; --card-border: #e6e4d9; } :root { --radius: 16px; --serif: "Iowan Old Style", "Palatino", "Georgia", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --tab-h: 64px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.55; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); } /* ---------- Header ---------- */ .app-header { position: sticky; top: 0; z-index: 20; overflow: hidden; background: linear-gradient(160deg, var(--blue) 0%, var(--blue-mid) 70%, #4a5f82 100%); color: #f6efe2; /* Safe-Area-Top liegt im padding-top; hier NUR px, damit die min-height sauber nach 0 transitioniert (calc(env()) → 0 bleibt in Chromium/iOS hängen). */ min-height: 172px; /* Padding-Variablen, damit die vollbreite Datumsleiste sie per Negativ-Marge wieder aufheben kann (edge-to-edge Sonnenbogen-Bande). */ --hdr-pad-x: calc(16px + env(safe-area-inset-left)); --hdr-pad-b: 16px; padding: calc(16px + env(safe-area-inset-top)) var(--hdr-pad-x) var(--hdr-pad-b); display: flex; flex-direction: column; /* min-height NICHT transitionen (snappt zuverlässig 172↔0; sonst kann die Transition in gedrosselten Render-Kontexten am Startwert hängenbleiben). Der Map-Fade übernimmt die weiche Optik. */ transition: padding 0.28s ease; } /* Kollabiert: Steuerzeile [i · Streifen] oben, Datumsleiste-Bande darunter */ .app-header.collapsed { min-height: 0; --hdr-pad-x: calc(14px + env(safe-area-inset-left)); --hdr-pad-b: 8px; padding: calc(8px + env(safe-area-inset-top)) var(--hdr-pad-x) var(--hdr-pad-b); } /* Heatmap füllt den Header vollflächig, bis auf einen schmalen Rahmen */ .activity-heatmap { position: absolute; inset: calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 14px calc(14px + env(safe-area-inset-left)); z-index: 0; display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 2px; } .hm-cell { position: relative; min-width: 0; min-height: 0; border: none; padding: 0; margin: 0; border-radius: 2px; cursor: pointer; background: rgba(246, 239, 226, 0.09); touch-action: manipulation; overflow: hidden; display: flex; flex-direction: column-reverse; /* erledigte Streifen füllen von unten */ } .hm-cell.hm-empty { visibility: hidden; cursor: default; } .hm-cell:disabled { cursor: default; } /* Sonnenjahres-Event (Wende/Gleiche): heller Rahmen als Marke */ .hm-cell.hm-solar { box-shadow: inset 0 0 0 1px rgba(246, 239, 226, 0.85); } /* Mondphasen: Vollmond = heller Punkt, Neumond = hohler Ring (oben in der Zelle) */ .hm-newmoon::before, .hm-fullmoon::before { content: ""; position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; z-index: 1; } .hm-fullmoon::before { background: #f6efe2; } .hm-newmoon::before { background: transparent; box-shadow: 0 0 0 1px rgba(246, 239, 226, 0.9); } .hm-slice { width: 100%; flex-shrink: 0; /* helle Haarlinie trennt Streifen auf jedem Hintergrund (auch kühle Farben) */ border-top: 0.5px solid rgba(246, 239, 226, 0.4); } .hm-today { box-shadow: 0 0 0 1.5px #f6efe2; } .hm-today.hm-solar { box-shadow: 0 0 0 1.5px #f6efe2; } /* Zukunft = Vision/Potential: leicht gedämpft, aber gut sicht- & wählbar */ .hm-cell.hm-future { opacity: 0.88; } .hm-cell.hm-future.hm-today { opacity: 1; } /* Aktiver (durchs Scrollen gewählter) Tag = ochre-Ring; sein Mondzyklus als aufgehelltes Band. Heute bleibt der helle Ring — beide konsistent überall. */ .hm-cell.hm-cycle { filter: brightness(1.22) saturate(1.05); } .hm-cell.hm-active { outline: 2px solid var(--ochre); outline-offset: -2px; z-index: 2; opacity: 1; } /* ---------- Kollaps: 9-Tage-Streifen (letzte 6 + nächste 3) ---------- */ .activity-heatmap { transition: opacity 0.2s ease; } .app-header.collapsed .activity-heatmap { opacity: 0; pointer-events: none; } /* Streifen im Normalzustand ausgeblendet, erscheint nur kollabiert (in der Steuerzeile neben dem i-Button). pointer-events auf auto, da header-titles selbst none ist (damit die Map dahinter klickbar bleibt). */ .hm-strip { display: none; } .app-header.collapsed .hm-strip { flex: 1 1 auto; display: flex; gap: 3px; height: 30px; min-width: 0; pointer-events: auto; } .hm-scell { position: relative; flex: 1; min-width: 0; border: none; padding: 0; margin: 0; border-radius: 3px; cursor: pointer; touch-action: manipulation; overflow: hidden; background: rgba(246, 239, 226, 0.09); display: flex; flex-direction: column-reverse; /* erledigte Streifen füllen von unten */ } .hm-scell .hm-slice { border-top-width: 1px; } .hm-scell.hm-future { opacity: 0.85; } .hm-scell.hm-today { box-shadow: 0 0 0 1.5px #f6efe2; } .hm-scell.hm-active { outline: 2px solid var(--ochre); outline-offset: -2px; opacity: 1; } .app-header.collapsed .app-title { display: none; } /* ---------- Datumszeile: vollbreite Sonnenbogen-Bande (aktiver Tag) ---------- Wie eine Feed-Zeile / die Map: der Sonnenbogen des aktiven Tages füllt die ganze Breite als Zeilenhintergrund (per JS-Inline gesetzt), Text darüber. Negativ-Margen heben das Header-Padding auf → edge-to-edge. */ .tl-daybar { position: relative; z-index: 2; pointer-events: none; margin: 10px calc(-1 * var(--hdr-pad-x)) calc(-1 * var(--hdr-pad-b)); padding: 7px var(--hdr-pad-x); min-height: 36px; display: flex; flex-direction: column; justify-content: center; color: #f6efe2; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); background: var(--blue-mid); /* Fallback bis JS den Sonnenbogen setzt */ } .db-date { font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.25; } .db-moon { font-size: 0.76rem; opacity: 0.95; line-height: 1.2; } .app-header.collapsed .tl-daybar { margin-top: 8px; min-height: 34px; } .app-header.collapsed .db-date { font-size: 0.9rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header.collapsed .db-moon { font-size: 0.72rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (prefers-reduced-motion: reduce) { .app-header, .activity-heatmap { transition: none; } } /* Titel + Datum als Overlay über der Heatmap; Taps fallen auf die Zellen */ .header-titles { position: relative; z-index: 2; pointer-events: none; text-shadow: 0 1px 8px rgba(11, 20, 34, 0.6), 0 0 2px rgba(11, 20, 34, 0.5); display: flex; gap: 12px; } /* Expandiert: Titel oben, füllt die Map-Höhe (drückt die Datumsleiste nach unten) */ .app-header .header-titles { flex: 1 1 auto; align-items: flex-start; } /* Kollabiert: kompakte Steuerzeile [i · Streifen], zentriert */ .app-header.collapsed .header-titles { flex: 0 0 auto; align-items: center; } .app-title { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: 0.02em; } /* Ein Info-Icon direkt hinter dem Titel */ .title-row { display: flex; align-items: center; gap: 10px; } .hdr-btn { pointer-events: auto; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(246, 239, 226, 0.45); background: rgba(22, 38, 61, 0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #f6efe2; font-family: var(--serif); font-size: 0.85rem; line-height: 1; cursor: pointer; touch-action: manipulation; } .hdr-btn:active { background: rgba(22, 38, 61, 0.65); } /* ---------- Views ---------- */ #view-container { max-width: 640px; margin: 0 auto; padding: 16px; } .view { display: none; } .view.active { display: block; animation: fadein 0.25s ease; } @keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .section-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--blue); margin: 22px 0 10px; } .loading { color: var(--ink-soft); padding: 24px 0; text-align: center; } /* ---------- Cards ---------- */ .card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } /* ---------- Events ---------- */ .event-list { display: flex; flex-direction: column; gap: 10px; } .event { --acc: var(--ochre); --tint: var(--bg-card); background: var(--tint); border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: var(--radius); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; } /* Aktivitäts-Kategorien: Farbe zeigt, was getan wird (Tint aus Kategorie + Karte, damit er der Palette folgt) */ .event.cat-regulation { --acc: var(--cat-regulation); --tint: color-mix(in srgb, var(--cat-regulation) 12%, var(--bg-card)); } .event.cat-nahrung { --acc: var(--cat-nahrung); --tint: color-mix(in srgb, var(--cat-nahrung) 12%, var(--bg-card)); } .event.cat-training { --acc: var(--cat-training); --tint: color-mix(in srgb, var(--cat-training) 12%, var(--bg-card)); } .event.cat-regeneration { --acc: var(--cat-regeneration); --tint: color-mix(in srgb, var(--cat-regeneration) 12%, var(--bg-card)); } .event.cat-ritual { --acc: var(--cat-ritual); --tint: color-mix(in srgb, var(--cat-ritual) 12%, var(--bg-card)); } .event.cat-neutral { --acc: var(--cat-neutral); --tint: var(--bg-card); } .event.allday { border-style: solid; } .event-cat { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--acc); margin-bottom: 2px; } /* Erledigt-Schalter */ .event-check { flex-shrink: 0; align-self: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--acc); background: transparent; cursor: pointer; touch-action: manipulation; position: relative; transition: transform 0.08s ease; } .event-check:active { transform: scale(0.9); } /* Trefferfläche auf ~44px vergrößern, ohne die 30px-Scheibe zu verändern */ .event-check::before { content: ""; position: absolute; inset: -7px; } .event-check::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800; color: var(--acc); opacity: 0.3; } .event.done .event-check { background: var(--acc); } .event.done .event-check::after { color: #fff; opacity: 1; } .event.done .event-title { text-decoration: line-through; color: var(--ink-soft); } /* Erledigt: schmal zusammenfalten — nur Zeit, Titel (1 Zeile), Haken */ .event.done { padding: 6px 12px; align-items: center; opacity: 0.82; } .event.done .event-cat { display: none; } .event.done .event-desc { display: none; } .event.done .event-title { font-size: 0.86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event.done .event-time { font-size: 0.82rem; padding-top: 0; } .event.done .event-check { width: 24px; height: 24px; } .event.done .event-check::after { font-size: 0.8rem; } .event-time { min-width: 52px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--acc); font-size: 0.9rem; padding-top: 2px; } .event-body { flex: 1; min-width: 0; } .event-title { font-weight: 600; font-size: 0.98rem; color: var(--blue); } .event-desc { font-size: 0.86rem; color: var(--ink-soft); margin-top: 4px; white-space: pre-line; display: none; } .event.open .event-desc { display: block; } .event { cursor: pointer; } .empty-day { text-align: center; color: var(--ink-soft); padding: 32px 16px; background: var(--bg-card); border: 1px dashed var(--line); border-radius: var(--radius); } /* ---------- Lebenszyklus: vertikale Timeline ---------- */ .tl-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .tl-jump { margin-left: auto; border: 1px solid var(--line); background: var(--bg-card); border-radius: 999px; padding: 4px 10px; font-family: var(--sans); font-size: 0.8rem; color: var(--blue); } .timeline { display: flex; flex-direction: column; } .tl-row { display: flex; align-items: stretch; min-height: 46px; border-bottom: 1px solid var(--line); } .tl-date { flex: 0 0 60px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 4px 8px; border: none; background: transparent; cursor: pointer; font-family: var(--sans); text-align: left; touch-action: manipulation; } .tl-dow { font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } .tl-dm { font-size: 0.9rem; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; } .tl-newmoon .tl-dm::after { content: " ○"; color: var(--ink-soft); } .tl-fullmoon .tl-dm::after { content: " ●"; color: var(--ochre); } .tl-open .tl-dm { color: var(--ochre); } /* Heute = Ankerlinie (Grenze Vergangenheit/Zukunft) */ .tl-today { position: relative; } .tl-today::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ochre); } .tl-today .tl-dm { color: var(--ochre); } .tl-future { opacity: 0.86; } /* Vision gedämpft, wie in der Map */ /* Aktiver Tag (oberste Zeile unter dem Header) — konsistent zur Map-Markierung */ .tl-row.tl-active { background: color-mix(in srgb, var(--ochre) 9%, transparent); } .tl-row.tl-active .tl-dm { color: var(--ochre); } /* Event-Streifen: Sonnenbogen (inline-bg) + proportionale Kacheln darüber */ .tl-strip { flex: 1; display: flex; align-items: stretch; min-width: 0; border-radius: 6px; overflow: hidden; margin: 4px 6px 4px 0; } .tl-strip.tl-empty { opacity: 0.5; } .tl-tile { --tc: var(--ochre); flex: 1 1 0; min-width: 12px; padding: 0; border: none; border-right: 1px solid rgba(255, 255, 255, 0.28); background: color-mix(in srgb, var(--tc) 40%, transparent); display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; } .tl-tile:last-child { border-right: none; } .tl-tile.cat-regulation { --tc: var(--cat-regulation); } .tl-tile.cat-nahrung { --tc: var(--cat-nahrung); } .tl-tile.cat-training { --tc: var(--cat-training); } .tl-tile.cat-regeneration { --tc: var(--cat-regeneration); } .tl-tile.cat-ritual { --tc: var(--cat-ritual); } .tl-tile.cat-neutral { --tc: var(--cat-neutral); } .tl-tile.done { /* abgehakt → solide Kategoriefarbe */ background: var(--tc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); } .tl-glyph { font-size: 0.8rem; opacity: 0.5; filter: grayscale(0.3); } .tl-tile.done .tl-glyph { opacity: 1; filter: none; } .tl-detail { padding: 10px 4px 14px; border-bottom: 1px solid var(--line); background: var(--bg); } .tl-detail .event-list { gap: 8px; } /* ---------- Baum-Navigation (Heute) ---------- */ .tree-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tree-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 12px; text-align: left; font-family: var(--sans); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: transform 0.1s ease; } .tree-card:active { transform: scale(0.97); } .tree-emoji { font-size: 1.4rem; } .tree-name { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--blue); } .tree-desc { font-size: 0.78rem; color: var(--ink-soft); } /* ---------- Dokument-Rendering ---------- */ .doc-content { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; overflow-wrap: break-word; } .doc-content h1, .doc-content h2, .doc-content h3, .doc-content h4 { font-family: var(--serif); color: var(--blue); line-height: 1.3; margin: 1.4em 0 0.5em; } .doc-content h1:first-child, .doc-content h2:first-child { margin-top: 0; } .doc-content h1 { font-size: 1.5rem; } .doc-content h2 { font-size: 1.25rem; border-bottom: 2px solid var(--ochre-soft); padding-bottom: 6px; } .doc-content h3 { font-size: 1.05rem; } .doc-content p, .doc-content ul, .doc-content ol { margin-bottom: 0.8em; font-size: 0.94rem; } .doc-content ul, .doc-content ol { padding-left: 1.3em; } .doc-content li { margin-bottom: 0.3em; } .doc-content blockquote { border-left: 3px solid var(--ochre); padding-left: 12px; color: var(--ink-soft); font-style: italic; margin-bottom: 0.8em; } .doc-content code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82em; background: #f2ecdf; padding: 1px 5px; border-radius: 5px; } .doc-content pre { background: var(--blue); color: #e8e0d2; padding: 14px; border-radius: 10px; overflow-x: auto; margin-bottom: 0.9em; font-size: 0.78rem; line-height: 1.45; } .doc-content pre code { background: none; color: inherit; padding: 0; font-size: inherit; } .doc-content hr { border: none; border-top: 1px solid var(--line); margin: 1.4em 0; } .doc-content table { border-collapse: collapse; width: 100%; font-size: 0.85rem; margin-bottom: 0.9em; display: block; overflow-x: auto; } .doc-content th, .doc-content td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; } .doc-content th { background: var(--ochre-soft); font-family: var(--serif); } .doc-content em:last-child { color: var(--ink-soft); } /* ---------- Tab-Bar ---------- */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; z-index: 100; } .tab { flex: 1; border: none; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--ink-soft); font-family: var(--sans); padding-top: 6px; } .tab-icon { font-size: 1.35rem; filter: grayscale(1) opacity(0.55); } .tab.active .tab-icon { filter: none; } .tab-label { font-size: 0.68rem; font-weight: 500; } .tab.active { color: var(--blue); } .tab.active .tab-label { font-weight: 700; } /* ---------- Zyklus: Schnellzugriff + Kategorie-Legende ---------- */ .chip-btn { border: 1px solid var(--line); background: var(--bg-card); color: var(--ink-soft); border-radius: 999px; padding: 4px 12px; font-family: var(--sans); font-size: 0.8rem; font-weight: 500; cursor: pointer; touch-action: manipulation; } .cat-legend { margin-top: 16px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; } .cat-legend summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--blue); font-family: var(--serif); } .cat-legend-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 7px; } .cat-legend-list li { font-size: 0.85rem; color: var(--ink-soft); } .cat-legend-list b { color: var(--ink); } .cat-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 6px; } .cat-legend-note { font-size: 0.8rem; color: var(--ink-soft); margin: 10px 0 0; font-style: italic; } /* ---------- Baum-Intro + Profil-Karte ---------- */ .baum-intro { margin-bottom: 6px; } .baum-intro p { font-size: 0.94rem; color: var(--ink); margin-bottom: 8px; } .baum-hint { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; } .baum-intro + .tree-nav { margin-top: 8px; } .profil-card { width: 100%; margin: 12px 0 18px; display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, var(--card-grad-a), var(--card-grad-b)); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 14px; text-align: left; cursor: pointer; font-family: var(--sans); touch-action: manipulation; } .profil-card:active { transform: scale(0.99); } .profil-card-body { display: flex; flex-direction: column; gap: 2px; } #baum-content { margin-top: 4px; } /* ---------- Vitalvision-Liste ---------- */ .vv-list { display: flex; flex-direction: column; gap: 10px; } .vv-card { display: flex; flex-direction: column; gap: 2px; background: var(--bg-card); border: 1px solid var(--line); border-left: 4px solid var(--ochre); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: inherit; touch-action: manipulation; } .vv-card:active { background: var(--ochre-soft); } .vv-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--blue); } .vv-desc { font-size: 0.82rem; color: var(--ink-soft); } .vv-card-all { border-left-color: var(--blue-mid); background: color-mix(in srgb, var(--bg) 92%, var(--line)); } /* ---------- Profil-Formular ---------- */ #profil-form { margin-top: 12px; } #profil-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 10px; } #profil-form label:last-child { margin-bottom: 0; } #profil-form input, #profil-form select { width: 100%; box-sizing: border-box; /* sprengt sonst den Rahmen */ font-family: var(--sans); font-size: 0.95rem; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--bg); } #profil-form input:focus, #profil-form select:focus { outline: 2px solid var(--ochre-soft); border-color: var(--ochre); } .field-row { display: flex; gap: 10px; } .field-row label { flex: 1; min-width: 0; } .field-note { font-size: 0.78rem; color: var(--ink-soft); margin: 6px 0 0; font-style: italic; } #geo-btn { margin-top: 4px; align-self: flex-start; } /* ---------- Start-Overlay ---------- */ .overlay-presets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .preset-btn { width: 100%; text-align: left; cursor: pointer; touch-action: manipulation; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-card); font-family: var(--sans); } .preset-btn:active { background: var(--ochre-soft); border-color: var(--ochre); } .preset-btn b { font-size: 0.98rem; color: var(--blue); } .preset-btn span { font-size: 0.82rem; color: var(--ink-soft); } /* Farbprofil-Auswahl */ .palette-picker { display: flex; gap: 10px; margin: 4px 0 14px; } .palette-btn { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); background: var(--bg-card); border-radius: 12px; font-family: var(--sans); font-size: 0.85rem; color: var(--ink); cursor: pointer; } .palette-btn.active { border-color: var(--ochre); box-shadow: 0 0 0 1px var(--ochre); font-weight: 600; } .pal-swatch { width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, 0.12); } .pal-daemmerung { background: linear-gradient(135deg, #16263d 0 50%, #c98a2b 50% 100%); } .pal-flexoki { background: linear-gradient(135deg, #1c1b1a 0 50%, #bc5215 50% 100%); } .btn-primary { width: 100%; padding: 13px; border-radius: 12px; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; cursor: pointer; touch-action: manipulation; border: none; background: var(--blue); color: #f6efe2; } /* ---------- Start-Menü (Dropdown am Info-Icon) ---------- */ .menu-backdrop { position: fixed; inset: 0; z-index: 290; background: rgba(22, 38, 61, 0.3); } .menu-backdrop[hidden] { display: none; } .start-menu { position: fixed; z-index: 300; top: calc(52px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); width: min(360px, calc(100vw - 20px)); max-height: calc(100vh - 90px - env(safe-area-inset-top)); max-height: calc(100dvh - 90px - env(safe-area-inset-top)); overflow-y: auto; background: var(--bg); border-radius: 18px; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 18px 50px rgba(11, 20, 34, 0.4); animation: menudrop 0.18s ease; } .start-menu[hidden] { display: none; } @keyframes menudrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .menu-title { font-family: var(--serif); font-size: 1.25rem; color: var(--blue); margin-bottom: 8px; } .menu-lead { font-size: 0.9rem; color: var(--ink); margin-bottom: 12px; } .menu-privacy { font-size: 0.82rem; color: var(--blue); background: var(--ochre-soft); border-radius: 10px; padding: 8px 10px; margin-bottom: 14px; } .menu-preset-lead { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 8px; } .menu-foot { display: flex; gap: 8px; margin-top: 14px; } .menu-foot .btn-primary { padding: 11px; font-size: 0.9rem; } /* Profil-Foldout im Menü */ .menu-profil { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; } .menu-profil > summary { cursor: pointer; font-family: var(--serif); font-weight: 600; color: var(--blue); font-size: 0.95rem; list-style: none; } .menu-profil > summary::-webkit-details-marker { display: none; } .menu-profil > summary::before { content: "▸ "; color: var(--ochre); } .menu-profil[open] > summary::before { content: "▾ "; } @media (min-width: 640px) { .tree-nav { grid-template-columns: repeat(2, 1fr); } .vv-list { display: grid; grid-template-columns: 1fr 1fr; } }