:root { --bg: #1a1814; --bg-card: #221f1a; --ink: #ece4d3; --ink-soft: #b8ad96; /* WCAG-AA: ~4.5:1 auf --bg/--bg-card (vorher #847b66 lag darunter). */ --ink-faint: #938974; --accent: #c79a4a; --accent-soft: #8a6a30; /* Primär-Button: in beiden Themes leuchtendes Gold mit dunklem Text. */ --btn: #c79a4a; --line: #443f35; --danger: #d97742; --max: 760px; --radius: 6px; --shadow: 0 2px 12px rgba(0, 0, 0, 0.35); /* Skaliert die Lese-Texte (Hexagramm-Texte + KI-Deutung). Über data-font-size auf umgeschaltet — analog zum Theme. Nur ein Multiplikator für ausgewählte Lese-Selektoren, KEIN globales font-size auf :root/html (würde Browser-Zoom + Layout stören). */ --reading-scale: 1; color-scheme: dark; } /* Schriftgröße der Lese-Ansicht. „md" = Default (1), braucht keinen Override. */ :root[data-font-size="sm"] { --reading-scale: 0.9; } :root[data-font-size="lg"] { --reading-scale: 1.12; } :root[data-font-size="xl"] { --reading-scale: 1.26; } /* Light-Theme — überschreibt die Farb-Variablen. Aktiviert via data-theme="light" auf (gesetzt durch das Theme-Script). */ :root[data-theme="light"] { --bg: #f4efe4; --bg-card: #fffdf7; --ink: #2a2620; --ink-soft: #5c5444; /* WCAG-AA auf hellem --bg/--bg-card (vorher #8a8068 / #9c7220 lagen darunter). */ --ink-faint: #6f6852; --accent: #7a5a18; --accent-soft: #bf9a52; --line: #ddd4bf; --danger: #c25f2a; --shadow: 0 2px 12px rgba(60, 50, 30, 0.14); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: "Iowan Old Style", "Georgia", "Palatino", serif; line-height: 1.55; -webkit-font-smoothing: antialiased; /* Kein horizontales Scrollen — überbreite Elemente werden geclippt statt den Inhalt seitlich aus dem Frame zu schieben (reine Fehlbedienung). */ overflow-x: hidden; } body { min-height: 100vh; display: flex; flex-direction: column; } header { text-align: center; padding: 2.5rem 1rem 1rem; /* Clear the notch / Dynamic Island on iOS (viewport-fit=cover). 0 on desktop. */ padding-top: max(2.5rem, calc(env(safe-area-inset-top) + 0.6rem)); } header h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 0; letter-spacing: 0.04em; font-weight: 500; } header .subtle { display: block; font-size: 0.45em; font-style: italic; color: var(--ink-soft); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 0.3em; } .tagline { margin: 0.5rem 0 0; color: var(--ink-faint); font-size: 0.9rem; } main { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem 3rem; /* Respect the home indicator + landscape notch (0 on desktop). */ padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); padding-bottom: max(3rem, calc(env(safe-area-inset-bottom) + 1.5rem)); } footer { text-align: center; padding: 1.5rem 1rem 2rem; color: var(--ink-faint); font-size: 0.8rem; border-top: 1px solid var(--line); margin-top: 2rem; } footer p { margin: 0; max-width: 540px; margin-inline: auto; } footer em { color: var(--ink-soft); } footer a { color: var(--accent); text-decoration-color: var(--accent-soft); text-underline-offset: 0.15em; } footer a:hover { color: var(--ink); text-decoration-color: var(--accent); } footer .copyright { margin-top: 0.6rem; color: var(--ink-faint); max-width: 720px; font-size: 0.75rem; } footer .footer-lang { margin-bottom: 0.9rem; } /* Ask section */ .ask { background: var(--bg-card); padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); } .ask label { display: block; font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; } .ask textarea { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem; font-family: inherit; font-size: 1rem; resize: vertical; min-height: 3.5rem; } .ask textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent-soft); } .controls { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center; } button { font-family: inherit; font-size: 1rem; padding: 0.7rem 1.4rem; background: var(--btn); color: #1a1814; border: none; border-radius: var(--radius); cursor: pointer; letter-spacing: 0.05em; font-weight: 600; transition: background 0.15s ease, transform 0.08s ease; } button:hover { background: #d8ae5e; } button:active { transform: translateY(1px); } button:disabled { opacity: 0.5; cursor: not-allowed; } /* Sichtbarer Tastatur-Fokus — einheitlich in --accent. :focus-visible greift nur bei Tastatur-Navigation, nicht bei Maus/Touch (keine störenden Ringe beim Klick). */ button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, .mode-btn:focus-visible, .reader-cell:focus-visible, [tabindex]:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); } button.ghost:hover { border-color: var(--accent-soft); color: var(--accent); } /* Footer-Hinweis auf die macOS-App — per JS nur auf der öffentlichen Demo (nicht localhost) und nur für Mac-Besucher eingeblendet. */ .footer-mac:not([hidden]) { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.6rem; } /* Reading */ .reading { margin-top: 2rem; animation: fadein 0.5s ease; } @keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .question-echo { font-style: italic; color: var(--ink-soft); text-align: center; margin-bottom: 1.5rem; font-size: calc(1.05rem * var(--reading-scale)); } .hexagrams { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .hex-card { background: var(--bg-card); padding: 1.5rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--line); min-width: 240px; flex: 1 1 240px; max-width: 320px; text-align: center; } /* Anklickbare Lesungskarte → öffnet das Hexagramm im Nachschlagewerk. */ .hex-card-link { cursor: pointer; transition: border-color 0.15s ease, transform 0.08s ease; } .hex-card-link:hover { border-color: var(--accent-soft); } .hex-card-link:active { transform: translateY(1px); } .hex-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hex-title { margin: 0 0 1rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } .hex-figure { display: flex; flex-direction: column-reverse; gap: 6px; margin: 0 auto 1rem; width: 160px; } .hex-line { height: 14px; display: flex; gap: 18px; align-items: center; } .hex-line .seg { flex: 1; height: 100%; background: var(--ink); border-radius: 1px; } .hex-line.yin .seg { background: var(--ink); } .hex-line.yang::before, .hex-line.yang::after { content: none; } /* Yang: ein solider Strich (kein Gap) */ .hex-line.yang { gap: 0; } .hex-line.yang .seg { background: var(--ink); } .hex-line { position: relative; } .hex-line.changing .seg { background: var(--accent); box-shadow: 0 0 6px rgba(199, 154, 74, 0.45); } .hex-line.changing::after { content: "○"; position: absolute; right: -1.4rem; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 0.85rem; line-height: 1; } .hex-line.appearing { animation: line-in 0.3s ease both; } @keyframes line-in { from { opacity: 0; transform: scaleX(0.3); } to { opacity: 1; transform: none; } } .hex-name { margin: 0.5rem 0 0.3rem; font-size: calc(1.15rem * var(--reading-scale)); font-weight: 500; letter-spacing: 0.02em; } .hex-trigrams { margin: 0; font-size: calc(0.85rem * var(--reading-scale)); color: var(--ink-faint); line-height: 1.4; } /* Texts */ .texts { margin-top: 2.5rem; } .texts details { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.6rem; padding: 0 1rem; } .texts details[open] { padding-bottom: 1rem; } .texts summary { cursor: pointer; padding: 0.8rem 0; font-weight: 500; letter-spacing: 0.05em; color: var(--ink-soft); font-size: 0.95rem; list-style: none; user-select: none; } .texts summary::-webkit-details-marker { display: none; } .texts summary::before { content: "+ "; color: var(--accent); font-weight: 600; } .texts details[open] summary::before { content: "− "; } .text-body { color: var(--ink); font-size: calc(0.98rem * var(--reading-scale)); white-space: pre-wrap; line-height: 1.65; } /* Texts now render as real

paragraphs (see renderParagraphs in app.js). */ .text-body p { margin: 0 0 0.7em; } .text-body p:last-child { margin-bottom: 0; } /* Wilhelm footnotes in the "Anmerkungen" block. */ .note { color: var(--ink-soft); font-size: calc(0.92rem * var(--reading-scale)); line-height: 1.6; margin: 0 0 0.6em; } .note:last-child { margin-bottom: 0; } .section-title { font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 2rem 0 0.8rem; font-weight: 500; } .changing-why { margin: 0 0 .75rem; font-size: .85rem; color: var(--ink-soft); font-style: italic; } .changing-why[hidden] { display: none; } .changing-line { background: var(--bg-card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 0.8rem; } .changing-line .pos { color: var(--accent); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; } .changing-line .text { margin: 0.4rem 0 0.6rem; font-weight: 500; font-size: calc(1.02rem * var(--reading-scale)); } .changing-line .interp { color: var(--ink-soft); font-size: calc(0.92rem * var(--reading-scale)); white-space: pre-wrap; line-height: 1.6; } .changing-line .interp p { margin: 0 0 0.5em; } .changing-line .interp p:last-child { margin-bottom: 0; } /* ——— Modus-Navigation (Orakel / Nachschlagewerk) ——— */ .mode-nav { display: flex; justify-content: center; gap: 0.3rem; width: fit-content; margin: 0 auto 1.5rem; padding: 0.3rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); } .mode-btn { display: inline-flex; align-items: center; gap: 0.45rem; background: transparent; color: var(--ink-soft); border: none; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.03em; border-radius: calc(var(--radius) - 1px); } .mode-btn .icon { width: 18px; height: 18px; } .mode-btn:hover { background: rgba(199, 154, 74, 0.1); color: var(--accent); } /* Aktiver Tab nutzt --btn (das in beiden Themes gleiche leuchtende Gold des Primär-Buttons), nicht --accent — sonst wirkt er im Light-Theme zu dunkel. */ .mode-btn.active, .mode-btn.active:hover { background: var(--btn); color: #1a1814; } /* ——— Nachschlagewerk / Reader ——— */ .reader { margin-top: 1rem; animation: fadein 0.5s ease; } .reader-bar { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1.2rem; } .reader-step { min-width: 3rem; padding: 0.45rem 0.9rem; font-size: 1.1rem; line-height: 1; } .reader-index-toggle { min-width: 7rem; font-variant-numeric: tabular-nums; } .reader-pos { letter-spacing: 0.08em; } .reader-index { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.4rem; margin-bottom: 1.6rem; padding: 0.7rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); } .reader-cell { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.4rem 0.2rem; background: transparent; color: var(--ink-soft); border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; } .reader-cell:hover, .reader-cell.active { background: rgba(199, 154, 74, 0.12); color: var(--accent); border-color: var(--accent-soft); } .reader-cell .rc-sym { font-size: 1.4rem; line-height: 1; color: var(--accent); } .reader-cell .rc-num { font-size: 0.7rem; color: var(--ink-faint); } .reader-card { margin: 0 auto 0.5rem; } /* Trigramm-Block trägt strukturelles HTML, keinen vorformatierten Text — wie #trigramText im Orakel; .trigram-assoc behält sein pre-wrap selbst. */ #readerTexts .reader-trigrams { white-space: normal; } @media (max-width: 540px) { .reader-index { grid-template-columns: repeat(4, 1fr); } .mode-btn span { font-size: 0.82rem; } } /* History */ .history { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .history h2 { font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin: 0 0 0.8rem; } #historyList { list-style: none; padding: 0; margin: 0 0 1rem; } #historyList li.hist-li { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .history-item { position: relative; z-index: 1; background: var(--bg); display: flex; flex-direction: column; gap: 0.25rem; padding: 0.6rem 0.4rem; font-size: 0.9rem; color: var(--ink-soft); text-decoration: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; transition: transform 0.18s ease, background 0.12s ease; } .history-item:hover { background: var(--bg-card); color: var(--ink); } #historyList li.active .history-item { background: var(--bg-card); color: var(--ink); } #historyList li.pinned .history-item { box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.9rem; } .hist-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; } .history-item .date { color: var(--ink-faint); font-size: 0.8rem; white-space: nowrap; flex: 0 0 auto; } .history-item .h { color: var(--accent); font-weight: 500; text-align: right; overflow-wrap: anywhere; } .history-item .q { font-style: italic; color: var(--ink-soft); overflow-wrap: anywhere; } /* Swipe-revealed actions behind the sliding history item. */ .hist-act { position: absolute; top: 0; bottom: 0; z-index: 0; width: 88px; border: none; cursor: pointer; font: inherit; font-size: 0.85rem; color: #fff; display: flex; align-items: center; justify-content: center; } .hist-act-pin { left: 0; background: var(--accent); } .hist-act-del { right: 0; background: #b5503a; } @media (max-width: 540px) { .history-item { flex-wrap: wrap; } .history-item .date { min-width: 0; } } /* Coin throw animation */ .coin-throw { display: flex; justify-content: center; gap: 0.6rem; margin: 1rem 0; min-height: 28px; } .coin { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #1a1814; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; animation: coin-flip 0.6s ease; } .coin.yin { background: var(--bg-card); color: var(--ink-soft); border: 1px solid var(--line); } @keyframes coin-flip { 0% { transform: rotateY(0); opacity: 0; } 50% { transform: rotateY(540deg) scale(1.2); opacity: 1; } 100% { transform: rotateY(720deg) scale(1); opacity: 1; } } @media (max-width: 540px) { .hexagrams { flex-direction: column; align-items: center; } .hex-card { width: 100%; max-width: 360px; } } /* ——— Header-Row ——— */ .header-row { display: flex; align-items: center; justify-content: center; gap: 1rem; position: relative; max-width: var(--max); margin: 0 auto; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); width: 38px; height: 38px; border-radius: 50%; padding: 0; cursor: pointer; } .icon-btn .icon { width: 20px; height: 20px; } .icon-btn:hover { color: var(--accent); border-color: var(--accent-soft); background: transparent; } /* ——— Chinesische Bezeichnung ——— */ .hex-chinese { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; font-size: 0.95rem; } .hex-chinese .ch-symbol { font-size: 1.7rem; color: var(--accent); line-height: 1; } .hex-chinese .ch-name { font-size: 1.15rem; color: var(--ink); } .hex-chinese .ch-pinyin { color: var(--ink-soft); font-style: italic; } .hex-chinese .ch-latin { color: var(--ink-faint); font-size: 0.9rem; } /* ——— Trigramme im Detail ——— */ /* Trigramm-Aufklapper enthält HTML, keinen vorformatierten Text - pre-wrap der .text-body würde sonst die Einrückungen sichtbar machen. */ #trigramText { white-space: normal; } .trigram-block { margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px dashed var(--line); } .trigram-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .trigram-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .trigram-sym { font-size: 1.5rem; color: var(--accent); line-height: 1; } .trigram-meta { color: var(--ink-faint); font-size: 0.85rem; } .trigram-assoc { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.4rem; white-space: pre-wrap; line-height: 1.55; } /* ——— Interpretation-Sektion ——— */ .interpretation { margin-top: 2rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; } .interp-controls { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.8rem; } /* Dezenter Einrichtungs-Hinweis (0 Endpoints) — informativ, kein toter Button */ .interp-setup { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } /* display:flex oben würde sonst das [hidden]-Attribut aushebeln (Author-Style schlägt das UA-display:none) — explizit zurücksetzen. */ .interp-setup[hidden] { display: none; } /* Schließen-Button oben rechts: blendet den Hinweis dauerhaft aus (localStorage). */ .interp-setup-close { position: absolute; top: 0.35rem; right: 0.35rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem; background: none; border: none; border-radius: 6px; color: var(--ink-faint); cursor: pointer; line-height: 0; } .interp-setup-close:hover { color: var(--accent); background: var(--accent-soft); } .interp-setup-icon { color: var(--accent); } .interp-setup .section-title { margin: 0; } .interp-setup-text { margin: 0; color: var(--ink-faint); line-height: 1.6; font-size: 0.95rem; } .interp-setup-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.2rem; } .interp-setup-actions button { padding: 0.5rem 1rem; font-size: 0.9rem; } .ghost-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); font-size: 0.9rem; } .ghost-link:hover { border-bottom-color: var(--accent); } /* Mixed-Content-Warnung im Endpoint-Formular */ .ep-warn { margin: 0.6rem 0 0; padding: 0.5rem 0.7rem; border-left: 3px solid var(--accent); background: rgba(199, 154, 74, 0.1); color: var(--ink); font-size: 0.85rem; line-height: 1.5; border-radius: var(--radius); } .interp-controls .section-title { margin: 0; } .interp-picker { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; justify-content: center; } .interp-picker select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.6rem; font-family: inherit; font-size: 0.9rem; min-width: 9rem; max-width: 100%; flex: 0 1 auto; } /* Modell-Dropdown darf wachsen, lange Namen elidieren */ #modelSelect { flex: 1 1 14rem; min-width: 14rem; text-overflow: ellipsis; } .interp-picker button { padding: 0.5rem 1rem; font-size: 0.9rem; } .interp-body { line-height: 1.65; font-size: calc(0.98rem * var(--reading-scale)); min-height: 1.5em; color: var(--ink); margin-top: 0.5rem; } .interp-body:empty::before { content: attr(data-placeholder); color: var(--ink-faint); font-style: italic; } /* Markdown-Ausgabe */ .interp-body h1, .interp-body h2, .interp-body h3, .interp-body h4 { margin: 1rem 0 0.4rem; font-weight: 500; color: var(--ink); letter-spacing: 0.02em; } .interp-body h1 { font-size: calc(1.25rem * var(--reading-scale)); } .interp-body h2 { font-size: calc(1.1rem * var(--reading-scale)); color: var(--accent); } .interp-body h3 { font-size: calc(1rem * var(--reading-scale)); } .interp-body h4 { font-size: calc(0.95rem * var(--reading-scale)); color: var(--ink-soft); } .interp-body p { margin: 0 0 0.7rem; } .interp-body ul, .interp-body ol { margin: 0.3rem 0 0.7rem 1.5rem; padding: 0; } .interp-body li { margin-bottom: 0.25rem; } .interp-body blockquote { border-left: 3px solid var(--accent-soft); margin: 0.5rem 0; padding: 0.3rem 0.8rem; color: var(--ink-soft); font-style: italic; background: rgba(0, 0, 0, 0.18); } .interp-body code { background: rgba(0, 0, 0, 0.3); padding: 0.05rem 0.35rem; border-radius: 3px; font-size: 0.88em; color: var(--accent); } .interp-body pre { background: rgba(0, 0, 0, 0.3); padding: 0.7rem 0.9rem; border-radius: var(--radius); overflow-x: auto; margin: 0.5rem 0; } .interp-body pre code { background: none; padding: 0; color: var(--ink); font-size: 0.85rem; line-height: 1.5; } .interp-body strong { color: var(--ink); font-weight: 600; } /* Meditationsbild (nur native App mit Apple Image Playground) */ .meditation { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.2rem; } /* display:flex oben hebelt sonst [hidden] aus — explizit zurücksetzen. */ .meditation[hidden] { display: none; } .meditation-controls { display: flex; justify-content: center; } .meditation-status { text-align: center; color: var(--ink-soft); font-size: 0.9rem; min-height: 1.2em; } .meditation-figure { margin: 0; } .meditation-figure[hidden] { display: none; } .meditation-figure img { width: 100%; max-width: 512px; margin: 0 auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); } .interp-body em { color: var(--ink); } .interp-body hr { border: none; border-top: 1px solid var(--line); margin: 0.8rem 0; } .interp-body a { color: var(--accent); } /* Reasoning-Test-Ergebnis */ .think-test { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.8rem; border-radius: var(--radius); background: rgba(0, 0, 0, 0.18); margin-top: 0.4rem; font-size: 0.85rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .think-test.ok { border-left: 3px solid #6db95a; } .think-test.warn { border-left: 3px solid var(--accent); } .think-test.err { border-left: 3px solid var(--danger); } .think-test-verdict { margin-top: 0.4rem; font-family: inherit; font-style: italic; color: var(--ink-soft); font-size: 0.85rem; } .muted { color: var(--ink-faint); } .row-inline { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .row-inline select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 0.6rem; font-family: inherit; font-size: 0.9rem; } .interp-status { color: var(--ink-faint); font-size: 0.85rem; margin-top: 0.6rem; } .thinking-details { margin: 0.6rem 0 0; padding: 0 0.8rem; background: rgba(0, 0, 0, 0.18); border: 1px dashed var(--line); border-radius: var(--radius); } .thinking-details summary { cursor: pointer; padding: 0.5rem 0; color: var(--ink-faint); font-size: 0.85rem; letter-spacing: 0.05em; list-style: none; } .thinking-details summary::-webkit-details-marker { display: none; } .thinking-marker { display: inline-block; color: var(--accent); margin-left: 0.4rem; animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .thinking-body { color: var(--ink-faint); font-size: 0.85rem; font-style: italic; white-space: pre-wrap; line-height: 1.55; padding-bottom: 0.8rem; max-height: 250px; overflow-y: auto; } /* ——— Settings Modal ——— */ .settings-modal { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); color: var(--ink); padding: 0; max-width: min(640px, 95vw); width: 100%; box-shadow: var(--shadow); /* Langer Inhalt muss IM Modal scrollen, nicht den Hintergrund (auf iOS scrollte sonst die App dahinter). dvh = dynamische Viewport-Höhe (Mobile- Adressleiste); overscroll-behavior unterbindet Scroll-Chaining zum Body. */ max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .settings-modal::backdrop { background: rgba(0, 0, 0, 0.6); } /* Body-Scroll sperren, solange das Modal offen ist — Gürtel-und-Hosenträger zusätzlich zu overscroll-behavior, weil iOS-WKWebView den Hintergrund sonst per Touch trotzdem mitscrollt. */ html:has(.settings-modal[open]) { overflow: hidden; } .settings-form { padding: 1.5rem; } .settings-form h2 { margin: 0 0 1rem; font-size: 1.2rem; letter-spacing: 0.05em; } /* Dialog-Titel wird beim Öffnen programmatisch fokussiert (tabindex=-1) — nie per Tastatur, daher kein Fokus-Ring nötig (verhindert WebKit-Akzentrahmen). */ .settings-modal h2:focus { outline: none; } /* Collapsible settings sections (details/summary), collapsed by default. */ .settings-form details.settings-section { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 1rem; margin-bottom: 0.7rem; } .settings-form details.settings-section[open] { padding-bottom: 1rem; } .settings-form details.settings-section > summary { cursor: pointer; padding: 0.85rem 0; color: var(--accent); font-weight: 500; letter-spacing: 0.05em; list-style: none; user-select: none; } .settings-form details.settings-section > summary::-webkit-details-marker { display: none; } .settings-form details.settings-section > summary::before { content: "+ "; font-weight: 600; } .settings-form details.settings-section[open] > summary::before { content: "− "; } .about-copyright { font-size: 0.78rem; } .about-copyright a { color: var(--accent); } .settings-form .hint { color: var(--ink-faint); font-size: 0.85rem; margin: 0 0 0.8rem; line-height: 1.5; } .settings-form code { background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 3px; font-size: 0.85em; color: var(--accent); } .endpoint-list { list-style: none; padding: 0; margin: 0 0 0.8rem; } .endpoint-list li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 0.6rem; } .endpoint-list li.empty { text-align: center; color: var(--ink-faint); font-style: italic; background: transparent; border-style: dashed; } .ep-head { display: flex; justify-content: space-between; align-items: baseline; } .ep-type { color: var(--ink-faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; } .ep-url { color: var(--ink-soft); font-size: 0.85rem; margin: 0.3rem 0 0.5rem; word-break: break-all; } .ep-config { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.5rem 0 0.6rem; } .ep-config label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; } .ep-config select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 0.5rem; font-family: inherit; font-size: 0.85rem; width: 100%; text-transform: none; letter-spacing: normal; } @media (max-width: 480px) { .ep-config { grid-template-columns: 1fr; } } .ep-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .ep-actions button { padding: 0.3rem 0.7rem; font-size: 0.85rem; } .ep-actions .ghost.danger { border-color: rgba(217, 119, 66, 0.4); color: var(--danger); } .ep-status { margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink-faint); } .ep-status .ok { color: #6db95a; font-weight: 600; } .ep-status .err { color: var(--danger); font-weight: 600; } .add-endpoint summary { cursor: pointer; padding: 0.4rem 0; color: var(--accent); font-size: 0.9rem; } .add-endpoint .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.5rem 0; } .add-endpoint label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--ink-soft); } .add-endpoint input, .add-endpoint select, .settings-form textarea { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.6rem; font-family: inherit; font-size: 0.9rem; width: 100%; } .settings-form textarea { resize: vertical; } .add-endpoint > button { padding: 0.5rem 1rem; font-size: 0.9rem; } .settings-form .row { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; } .settings-footer { display: flex; justify-content: flex-end; } @media (max-width: 480px) { .add-endpoint .grid { grid-template-columns: 1fr; } } /* ——— Export/Teilen-Menü (ein Share-Button, MD + zwei PDF-Modi) ——— */ .pdf-menu { position: relative; display: inline-block; } /* display:inline-block oben würde sonst das [hidden]-Attribut aushebeln (Author-Style schlägt UA-display:none) — explizit zurücksetzen. */ .pdf-menu[hidden] { display: none; } /* Summary als Ghost-Button (button/.ghost greifen nicht auf

). */ .pdf-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; font-family: inherit; font-size: 1rem; padding: 0.7rem 1.4rem; background: transparent; color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; letter-spacing: 0.05em; font-weight: 600; } .pdf-menu > summary:hover { border-color: var(--accent-soft); color: var(--accent); } .pdf-menu > summary::-webkit-details-marker { display: none; } .pdf-menu > summary::marker { content: ""; } .pdf-menu-items { position: absolute; z-index: 5; margin-top: 0.3rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.3rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 11rem; } .pdf-menu-items button { text-align: left; white-space: nowrap; } /* ——— Screen-Export-Stil (native macOS-App: WKWebView createPDF erfasst die gerenderte Seite INKL. Hintergrund — anders als NSPrintOperation). JS setzt html.exporting + html.pdf-bw|pdf-glossy vor der Erfassung. ——— */ html.exporting header, html.exporting footer, html.exporting .ask, html.exporting .history, html.exporting .interp-controls, html.exporting .interp-status, html.exporting .thinking-details, html.exporting .icon-btn, html.exporting dialog { display: none !important; } html.exporting body { padding: 0 !important; } html.exporting main { max-width: 760px !important; margin: 0 auto !important; padding: 2.4rem 2rem 3rem !important; } html.exporting .reading { margin-top: 0 !important; } html.exporting #questionEcho { margin-bottom: 1.3rem; } /* Wandelnde Linien / Karten im Export nicht über Seiten zerreißen (Browser-Print). */ html.exporting .changing-line, html.exporting .hex-card, html.exporting .texts details { break-inside: avoid; } /* — S/W-Druckfassung: weiße Seite, schwarze Tinte, KEIN Gold (echtes S/W). — */ html.exporting.pdf-bw, html.exporting.pdf-bw body { background: #ffffff !important; color: #1a1814 !important; } html.exporting.pdf-bw .text-body, html.exporting.pdf-bw .hex-name, html.exporting.pdf-bw #questionEcho, html.exporting.pdf-bw .changing-line .text, html.exporting.pdf-bw .hex-chinese .ch-name { color: #1a1814 !important; } html.exporting.pdf-bw .hex-title, html.exporting.pdf-bw .hex-trigrams, html.exporting.pdf-bw .hex-chinese .ch-pinyin, html.exporting.pdf-bw .hex-chinese .ch-latin, html.exporting.pdf-bw .changing-line .interp { color: #4a4a4a !important; } html.exporting.pdf-bw .section-title, html.exporting.pdf-bw .changing-line .pos, html.exporting.pdf-bw .hex-chinese .ch-symbol, html.exporting.pdf-bw .interp-body h2, html.exporting.pdf-bw .texts details > summary { color: #222222 !important; } html.exporting.pdf-bw .hex-card, html.exporting.pdf-bw .interpretation, html.exporting.pdf-bw .texts details, html.exporting.pdf-bw .changing-line { background: transparent !important; border-color: #cccccc !important; box-shadow: none !important; } html.exporting.pdf-bw .changing-line { border-left: 3px solid #888888 !important; } html.exporting.pdf-bw .hex-line .seg { background: #1a1814 !important; box-shadow: none !important; } html.exporting.pdf-bw .hex-line.changing .seg { background: #555555 !important; box-shadow: none !important; } html.exporting.pdf-bw .hex-line.changing::after { color: #555555 !important; } /* — Hochglanz / App-Design: das aktive Theme bleibt; nur Chrome ist weg. createPDF erfasst den vollflächigen Theme-Hintergrund. — */ html.exporting.pdf-glossy, html.exporting.pdf-glossy body { background: var(--bg) !important; } /* ——— Print-Layout für PDF-Export (Browser-Fallback window.print()) ——— */ @media print { /* S/W-Druckmodus (Default + .pdf-bw): weiße Seite, dunkle Tinte. Im Hochglanz-Modus (.pdf-glossy) bleiben dagegen die Theme-Variablen erhalten. */ html:not(.pdf-glossy) { --bg: #ffffff; --bg-card: #ffffff; --ink: #1a1814; --ink-soft: #3a342a; --ink-faint: #555044; --accent: #8a6a30; --accent-soft: #8a6a30; --line: #d8d2c2; --shadow: none; } html:not(.pdf-glossy), html:not(.pdf-glossy) body { background: #fff !important; color: #1a1814 !important; } body { padding: 1.6cm 1.4cm !important; } /* Alles wegblenden, das beim Druck stört */ header, footer, .ask, .history, .interp-controls, .interp-status, #questionEcho, #reset, #exportMd, #pdfMenu, #stopInterpretBtn, #interpretBtn, #endpointSelect, #modelSelect, #thinkingSelect, .thinking-details, .icon-btn, dialog { display: none !important; } main { padding: 0 !important; max-width: none !important; } .reading { margin-top: 0 !important; } /* Frage in Druckversion über die Reading setzen */ .reading::before { content: var(--print-question, ""); display: block; font-style: italic; font-size: 1.1rem; text-align: center; color: #555044; margin-bottom: 1rem; } /* Karten und Sektionen ohne Rahmen / Hintergrund */ .hex-card, .interpretation, .texts details, .changing-line { background: transparent !important; border: none !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; } .interpretation { border-top: 1px solid #d8d2c2 !important; padding-top: 1rem !important; margin-top: 1.5rem !important; } /* Hexagramm-Linien sichtbar/druckfreundlich */ .hex-line .seg { background: #1a1814 !important; box-shadow: none !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .hex-line.changing .seg { background: #8a6a30 !important; } .hex-line.changing::after { color: #8a6a30 !important; } /* Details immer aufgeklappt darstellen (JS klappt zusätzlich auf) */ .texts details > summary { list-style: none !important; cursor: default; font-weight: 600; padding: 0.5rem 0 !important; color: #1a1814 !important; } .texts details > summary::before { content: "" !important; } /* Hexagramme nebeneinander, sauberes Layout */ .hexagrams { display: flex !important; justify-content: space-around; gap: 2rem; page-break-inside: avoid; } .text-body { color: #1a1814 !important; } .hex-name { color: #1a1814 !important; } .hex-title { color: #555044 !important; } .hex-trigrams { color: #555044 !important; } .hex-chinese .ch-symbol { color: #8a6a30 !important; } .hex-chinese .ch-name { color: #1a1814 !important; } .hex-chinese .ch-pinyin { color: #555044 !important; } .hex-chinese .ch-latin { color: #555044 !important; } .changing-line { border-left: 3px solid #8a6a30 !important; padding-left: 0.8rem !important; margin-bottom: 0.8rem; page-break-inside: avoid; } .changing-line .pos { color: #8a6a30 !important; } .changing-line .interp { color: #3a342a !important; } .section-title { color: #8a6a30 !important; } /* Markdown im LLM-Output */ .interp-body h1, .interp-body h2, .interp-body h3, .interp-body h4 { color: #1a1814 !important; } .interp-body h2 { color: #8a6a30 !important; } .interp-body blockquote { background: #f5f1e6 !important; color: #3a342a !important; border-left: 3px solid #8a6a30 !important; } .interp-body code, .interp-body pre { background: #f5f1e6 !important; color: #1a1814 !important; } /* Trigramme als HTML, white-space wieder normal */ #trigramText { white-space: normal !important; } @page { margin: 0; } /* ——— Hochglanz / App-Design (.pdf-glossy): aktives Theme spiegeln, randlos. Höhere Spezifität als die S/W-Regeln oben → gewinnt. In der App setzt NSPrintInfo margin=0; der Vollflächen-Hintergrund sorgt für randlose Optik. */ html.pdf-glossy, html.pdf-glossy body { background: var(--bg) !important; color: var(--ink) !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } html.pdf-glossy * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; } html.pdf-glossy body { padding: 1.2cm !important; } html.pdf-glossy .reading::before { color: var(--ink-soft) !important; } html.pdf-glossy .text-body, html.pdf-glossy .hex-name, html.pdf-glossy .hex-chinese .ch-name { color: var(--ink) !important; } html.pdf-glossy .hex-title, html.pdf-glossy .hex-trigrams, html.pdf-glossy .hex-chinese .ch-pinyin, html.pdf-glossy .hex-chinese .ch-latin, html.pdf-glossy .changing-line .interp { color: var(--ink-soft) !important; } html.pdf-glossy .texts details > summary { color: var(--ink) !important; } html.pdf-glossy .section-title, html.pdf-glossy .changing-line .pos, html.pdf-glossy .hex-chinese .ch-symbol, html.pdf-glossy .interp-body h2 { color: var(--accent) !important; } html.pdf-glossy .interpretation { border-top: 1px solid var(--line) !important; } html.pdf-glossy .changing-line { border-left: 3px solid var(--accent) !important; } html.pdf-glossy .hex-line .seg { background: var(--ink) !important; } html.pdf-glossy .hex-line.changing .seg { background: var(--accent) !important; } html.pdf-glossy .hex-line.changing::after { color: var(--accent) !important; } html.pdf-glossy .interp-body h1, html.pdf-glossy .interp-body h3, html.pdf-glossy .interp-body h4 { color: var(--ink) !important; } html.pdf-glossy .interp-body blockquote { background: var(--bg-card) !important; color: var(--ink-soft) !important; border-left: 3px solid var(--accent) !important; } html.pdf-glossy .interp-body code, html.pdf-glossy .interp-body pre { background: var(--bg-card) !important; color: var(--ink) !important; } } /* Build-Kennung — dezent oben rechts, nur in Dev-/Test-Builds sichtbar. Antippbar: lädt den kuratierten Test-Verlauf (populateDevHistory). */ .build-badge { position: fixed; top: env(safe-area-inset-top, 0); right: 0.4rem; z-index: 9999; font-size: 0.62rem; font-family: ui-monospace, SFMono-Regular, monospace; color: var(--ink-faint); background: color-mix(in srgb, var(--bg) 78%, transparent); padding: 0.1rem 0.4rem; border-radius: 0 0 0.3rem 0.3rem; cursor: pointer; opacity: 0.75; } .build-badge[hidden] { display: none; } /* ——— Dev-Sweep-Panel (Prompt-Test-Harness, nur im Dev-Build sichtbar) ——— */ .sweep { margin-top: 2rem; padding: 1rem; border: 1px dashed var(--line); border-radius: var(--radius); } /* display-Regeln oben würden sonst [hidden] aushebeln — explizit zurücksetzen. */ .sweep[hidden] { display: none; } .sweep-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; } .sweep-pacing input { width: 5.5rem; } .sweep-status { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.9rem; min-height: 1.2em; } /* Dev-Signatur unter dem Meditationsbild (Hex-Kombi + Prompt). */ .meditation-sig { margin: 0.5rem auto 0; max-width: 90%; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.66rem; line-height: 1.5; color: var(--ink-faint); white-space: pre-wrap; text-align: center; } .meditation-sig[hidden] { display: none; } /* ——— Reduce Motion ——— */ /* Respektiert die System-Einstellung „Bewegung reduzieren": stoppt die rotierenden Münzen, die Slide/Scale-Einblendungen und den dauerhaften Denkprozess-Puls (vestibuläre Sicherheit, Apple-HIG-Review-Punkt). */ @media (prefers-reduced-motion: reduce) { .reading, .reader, .hex-line.appearing, .coin { animation: none; } .thinking-marker { animation: none; opacity: 1; } } /* Segmented toggle (e.g. language Deutsch / English in settings). */ .seg-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .seg-btn { appearance: none; background: none; border: none; cursor: pointer; padding: 0.4rem 1.1rem; color: var(--ink-soft); font: inherit; transition: background 0.12s ease, color 0.12s ease; } .seg-btn + .seg-btn { border-left: 1px solid var(--line); } .seg-btn[aria-pressed="true"] { background: rgba(199, 154, 74, 0.15); color: var(--ink); font-weight: 500; }