/* studium/views/sprachvergleich.v1.css Externes Stylesheet für das Sprachvergleich-Modul (sprachvergleichView.v1.js). Eigener Variablensatz, an phonetik.v1.css angelehnt, damit beide Module im selben Deploy stimmig aussehen. Rollenfarben (--sv-ui-color / --sv-target-color) markieren durchgängig, welche Seite eines Vergleichs zur UI- bzw. zur Zielsprache gehört — unabhängig davon, WELCHE der ~80 Sprachen das gerade konkret ist. */ .sv { --sv-bg: #fffdf7; --sv-surface: #ffffff; --sv-text: #2a2318; --sv-muted: #7a7060; --sv-border: rgba(42, 35, 24, .14); --sv-soft: rgba(42, 35, 24, .05); --sv-radius: 14px; --sv-near: #2e7d32; --sv-mid: #b8860b; --sv-far: #a13a24; --sv-ui-color: #3b6fa0; --sv-target-color: #a0603b; color: var(--sv-text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sv { --sv-bg: #1c170f; --sv-surface: #241d14; --sv-text: #eee6d6; --sv-muted: #a99c86; --sv-border: rgba(238, 230, 214, .18); --sv-soft: rgba(238, 230, 214, .06); --sv-near: #66bb6a; --sv-mid: #ffca28; --sv-far: #ef5350; --sv-ui-color: #7fb3e0; --sv-target-color: #e0a37f; } } /* Folgt zusätzlich dem App-Umschalter (read-v2.html) über das gemeinsame localStorage["hsk.theme"], nicht nur dem Betriebssystem — s. Theme-Init- Skript im von sprachvergleich.html. */ :root[data-theme="dark"] .sv { --sv-bg: #1c170f; --sv-surface: #241d14; --sv-text: #eee6d6; --sv-muted: #a99c86; --sv-border: rgba(238, 230, 214, .18); --sv-soft: rgba(238, 230, 214, .06); --sv-near: #66bb6a; --sv-mid: #ffca28; --sv-far: #ef5350; --sv-ui-color: #7fb3e0; --sv-target-color: #e0a37f; } .sv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; } .sv-picker { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--sv-muted); } .sv-picker select { font: inherit; font-size: .95rem; padding: .35rem .5rem; border-radius: 8px; border: 1px solid var(--sv-border); background: var(--sv-surface); color: var(--sv-text); } .sv-swap-arrow { color: var(--sv-muted); font-size: 1.1rem; } .sv-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; border-bottom: 1px solid var(--sv-border); } .sv-tabs__btn { font: inherit; font-size: .92rem; padding: .5rem .9rem; white-space: nowrap; background: none; border: none; border-bottom: 2px solid transparent; color: var(--sv-muted); cursor: pointer; } .sv-tabs__btn--active { color: var(--sv-far); border-bottom-color: var(--sv-far); } .sv-intro { font-size: .9rem; line-height: 1.6; color: var(--sv-muted); max-width: 780px; } .sv-role-ui-text { color: var(--sv-ui-color); } .sv-role-target-text { color: var(--sv-target-color); } .sv-h3 { font-size: 1.02rem; margin: 20px 0 8px; } .sv-sub { font-weight: 400; color: var(--sv-muted); font-size: .85rem; } .sv-empty { color: var(--sv-muted); font-size: .88rem; font-style: italic; } /* Eingebetteter Modus (renderCompactShell() in sprachvergleichView.v1.js) — Phonetik + Grammatik gestapelt statt hinter Tabs. */ .sv-compact-heading { font-size: 1.05rem; margin: 20px 0 10px; } .sv-compact-block + .sv-compact-block { border-top: 1px solid var(--sv-border); padding-top: 20px; margin-top: 8px; } .sv-tonebox { background: var(--sv-soft); border: 1px solid var(--sv-border); border-radius: var(--sv-radius); padding: 12px 16px; margin: 14px 0; font-size: .88rem; line-height: 1.55; } .sv-tone { display: inline-block; font-size: 1.1rem; margin: 0 2px; } .sv-ipa { font-family: "Doulos SIL", "Charis SIL", "Noto Sans", serif; } .sv-ipa--lg { font-size: 2.6rem; line-height: 1.1; } .sv-ipa-btn { background: none; border: none; padding: 2px 6px; cursor: pointer; border-radius: 8px; font-family: inherit; transition: background-color .15s; } .sv-ipa-btn:hover, .sv-ipa-btn:focus-visible { background: var(--sv-soft); } .sv-badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; } .sv-diff--near { background: color-mix(in srgb, var(--sv-near) 18%, transparent); color: var(--sv-near); } .sv-diff--mid { background: color-mix(in srgb, var(--sv-mid) 20%, transparent); color: var(--sv-mid); } .sv-diff--far { background: color-mix(in srgb, var(--sv-far) 18%, transparent); color: var(--sv-far); } .sv-example-ipa { color: var(--sv-muted); } .sv-audio { display: block; height: 28px; margin: 6px auto 0; max-width: 200px; } .sv-details { margin-top: 18px; font-size: .86rem; } .sv-details summary { cursor: pointer; color: var(--sv-muted); } .sv-chiplist { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .sv-chip { display: inline-block; padding: .15rem .5rem; border-radius: 6px; background: var(--sv-soft); border: 1px solid var(--sv-border); font-size: .82rem; } /* ── Aussprache: Laut-Vergleichskarten ─────────────────────────────────── */ .sv-sound-cards { display: grid; gap: 14px; margin-top: 12px; } .sv-sound-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; border: 1px solid var(--sv-border); border-radius: var(--sv-radius); background: var(--sv-surface); padding: 14px 10px; } @media (max-width: 640px) { .sv-sound-card { grid-template-columns: 1fr; } .sv-sound-connector { flex-direction: row; justify-content: center; } } .sv-sound-side { text-align: center; padding: 6px 10px; border-radius: 10px; border-top: 3px solid transparent; } .sv-sound-side.sv-role-target { border-top-color: var(--sv-target-color); } .sv-sound-side.sv-role-ui { border-top-color: var(--sv-ui-color); } .sv-sound-side--empty { display: flex; align-items: center; justify-content: center; color: var(--sv-muted); font-size: .85rem; font-style: italic; } .sv-sound-head { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; } .sv-sound-name { font-size: .74rem; color: var(--sv-muted); } /* Beide Diagramme (Sagittalschnitt seitlich, Mundbild von vorne) in derselben abgerundeten Box-Optik, gleiche Höhe — die Box selbst bleibt neutral (var(--sv-soft)/var(--sv-border)), nur die Linien im Sagittalschnitt tragen die Lautklassen-Farbe (inline `color` auf .sv-sagittal-wrap, wirkt über currentColor auf die SVG-Pfade, s. renderMiniSagittal() — die Box-Randfarbe bleibt davon unberührt, weil border/background feste Theme-Variablen sind, kein currentColor). */ .sv-diagram-row { display: flex; gap: 8px; justify-content: center; align-items: stretch; margin: 4px 0; } .sv-sagittal-wrap, .sv-viseme-wrap { height: 108px; flex: none; border-radius: 12px; overflow: hidden; background: var(--sv-soft); border: 1px solid var(--sv-border); display: flex; align-items: center; justify-content: center; } .sv-sagittal-wrap { width: 92px; } .sv-sagittal { width: 100%; height: 100%; padding: 6px; box-sizing: border-box; } /* Mundbild von vorne, dieselbe Kreuzblende wie im Phonetik-Modul (.ph-viseme-stage), hier kleiner und ohne eigene Akzentfarbe (die Rolle übernimmt schon der Kartenrahmen). Breite folgt der Bildproportion (400:430) bei fester Höhe, statt umgekehrt, damit beide Boxen exakt gleich hoch sind. */ .sv-viseme-wrap { width: auto; aspect-ratio: 400 / 430; } .sv-viseme-stage { position: relative; width: 100%; height: 100%; } .sv-viseme-stage .ph-viseme-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 220ms ease; } @media (prefers-reduced-motion: reduce) { .sv-viseme-stage .ph-viseme-layer { transition: none; } } .sv-sound-word { background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: .95rem; color: var(--sv-text); padding: 1px 4px; border-radius: 6px; } .sv-sound-word:hover, .sv-sound-word:focus-visible { background: var(--sv-soft); text-decoration: underline; } .sv-sound-example-meta { font-size: .8rem; margin-top: 2px; } .sv-sound-example--empty { color: var(--sv-muted); font-size: .8rem; font-style: italic; } .sv-sound-gloss { color: var(--sv-muted); font-size: .78rem; margin-left: 4px; } /* Lautkette des Beispielworts, je Laut einzeln anklickbar — wie im Phonetik-Modul (ph-chain/ph-phon in phonetik.v1.css), hier mit den sv-Variablen dieses Moduls. */ .sv-example-chain { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .sv-example-chip { font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; padding: 2px 8px; border-radius: 8px; border: 1.5px solid var(--sv-border); background: var(--sv-bg); color: var(--sv-text); transition: background-color .12s, border-color .12s; } .sv-example-chip:hover, .sv-example-chip:focus-visible { border-color: var(--sv-target-color); background: var(--sv-soft); } /* Markiert den Laut, der gerade zur angezeigten Sagittal-/Mundbild-Pose gehört (highlightChip() in sprachvergleichApp.v1.js) — Ring statt Füllung, damit Text/Kontrast der Chip-Reihe unverändert bleibt. */ .sv-example-chip.is-active { border-color: var(--sv-ui-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sv-ui-color) 45%, transparent); } .sv-sound-connector { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; min-width: 60px; } .sv-connector-dist { font-size: .72rem; color: var(--sv-muted); white-space: nowrap; } /* ── Aussprache: Kollisionswarnungen (Single-Category-Assimilation) ────── */ .sv-collisions { margin: 18px 0; } .sv-collision-card { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--sv-mid); border-radius: var(--sv-radius); background: color-mix(in srgb, var(--sv-mid) 8%, var(--sv-surface)); padding: 12px 16px; margin-bottom: 10px; } .sv-collision-members { display: flex; align-items: center; gap: 8px; } .sv-collision-ipa { font-size: 1.7rem; } .sv-collision-ipa--ui { color: var(--sv-ui-color); } .sv-collision-eq { color: var(--sv-muted); font-size: 1.1rem; } .sv-collision-arrow { font-size: .74rem; color: var(--sv-muted); } /* ── Wahrnehmungs-Quiz ───────────────────────────────────────────────────── */ .sv-quiz { max-width: 420px; margin: 16px auto 0; text-align: center; } .sv-quiz-progress { height: 6px; background: var(--sv-border); border-radius: 999px; overflow: hidden; margin-bottom: 8px; } .sv-quiz-progress__fill { height: 100%; background: var(--sv-target-color); transition: width .3s; } .sv-quiz-counter { font-size: .8rem; color: var(--sv-muted); margin-bottom: 14px; } .sv-quiz-btn { font: inherit; font-size: .92rem; font-weight: 600; padding: .6rem 1.2rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--sv-border); } .sv-quiz-btn--primary { background: var(--sv-target-color); color: #fff; border-color: transparent; } .sv-quiz-btn--secondary { background: var(--sv-surface); color: var(--sv-text); } .sv-quiz-play { margin-bottom: 18px; } .sv-quiz-options { display: grid; gap: 10px; } .sv-quiz-optionBtn { font: inherit; font-size: 1.05rem; padding: .8rem 1rem; border-radius: 10px; border: 2px solid var(--sv-border); background: var(--sv-surface); color: var(--sv-text); cursor: pointer; } .sv-quiz-optionBtn:hover:not(:disabled) { border-color: var(--sv-target-color); } .sv-quiz-optionBtn:disabled { cursor: default; } .sv-quiz-optionBtn--correct { background: color-mix(in srgb, var(--sv-near) 20%, var(--sv-surface)); border-color: var(--sv-near); } .sv-quiz-optionBtn--wrong { background: color-mix(in srgb, var(--sv-far) 20%, var(--sv-surface)); border-color: var(--sv-far); } .sv-quiz-feedback { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .sv-quiz-feedback--correct { color: var(--sv-near); font-weight: 700; } .sv-quiz-feedback--wrong { color: var(--sv-far); font-weight: 700; } .sv-quiz-score { text-align: center; padding: 30px 10px; } .sv-quiz-score__icon { font-size: 2.6rem; margin-bottom: 8px; } .sv-quiz-score__value { font-size: 1.3rem; font-weight: 700; margin-bottom: 18px; } /* ── Aussprache: IPA-Tafel im Vergleich ─────────────────────────────────── */ .sv-chart-subtitle { font-size: .88rem; margin: 16px 0 6px; color: var(--sv-muted); } .sv-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--sv-muted); margin: 6px 0 4px; } .sv-chart-legend .sv-chart-key { pointer-events: none; margin-right: 4px; } /* Sechs Filteransichten auf dieselbe Tafel (s. filterChartEntries() in sprachvergleichView.v1.js) — Farbe je Knopf greift dieselbe UI-/Ziel-/ gemeinsam-Semantik wie die Zellen selbst auf (sv-chart-key--*), damit klar ist, was jeder Filter zeigt, ohne die Legende extra lesen zu müssen. Die "...-eigene"-Varianten (nur ein Lautsystem) sind volltonig, die Gesamtsprachen-Varianten (inkl. gemeinsamer Laute) nur umrandet. */ .sv-chart-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; } .sv-chart-filter { font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; padding: 4px 11px; border-radius: 999px; border: 1.5px solid var(--sv-border); background: var(--sv-bg); color: var(--sv-muted); transition: transform .1s, border-color .12s; } .sv-chart-filter:hover, .sv-chart-filter:focus-visible { transform: translateY(-1px); } .sv-chart-filter.is-active { color: #fff; border-color: transparent; } .sv-chart-filter:not(.is-active).sv-chart-filter--ui, .sv-chart-filter:not(.is-active).sv-chart-filter--target { color: var(--sv-text); } .sv-chart-filter--ui { border-color: var(--sv-ui-color); } .sv-chart-filter--ui.is-active { background: var(--sv-ui-color); } .sv-chart-filter--target { border-color: var(--sv-target-color); } .sv-chart-filter--target.is-active { background: var(--sv-target-color); } .sv-chart-filter--uiOnly { border-color: var(--sv-ui-color); background: color-mix(in srgb, var(--sv-ui-color) 16%, var(--sv-bg)); color: var(--sv-ui-color); } .sv-chart-filter--uiOnly.is-active { background: var(--sv-ui-color); color: #fff; } .sv-chart-filter--targetOnly { border-color: var(--sv-target-color); background: color-mix(in srgb, var(--sv-target-color) 16%, var(--sv-bg)); color: var(--sv-target-color); } .sv-chart-filter--targetOnly.is-active { background: var(--sv-target-color); color: #fff; } .sv-chart-filter--shared { border-color: var(--sv-border); background: var(--sv-soft); color: var(--sv-text); } .sv-chart-filter--shared.is-active { background: var(--sv-muted); } .sv-chart-filter.is-active { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent); } /* Ein gemeinsames Detailkärtchen für die ganze Tafel (CHART_SVG_ID, s. renderChartDetail() in sprachvergleichView.v1.js) — dieselbe .sv-sound-side wie bei den Laut-Karten, hier nur einzeln statt im Ziel/UI-Paar; leicht abgesetzt, damit klar ist, dass es sich mit dem Klick auf eine beliebige Zelle unten austauscht. */ .sv-chart-detail { border: 1px solid var(--sv-border); border-radius: var(--sv-radius); background: var(--sv-surface); padding: 14px; margin: 10px 0 16px; } .sv-chart-detail .sv-sound-side { border-top: none; padding: 0; } /* Zelle, deren Laut gerade im Detailkärtchen darüber angezeigt wird. */ .sv-chart-key.is-selected { box-shadow: 0 0 0 2px var(--sv-far); } .sv-chart-scroll { overflow-x: auto; } .sv-chart-table { border-collapse: collapse; font-size: .8rem; min-width: 100%; } .sv-chart-table th { padding: 3px 6px; font-weight: 500; color: var(--sv-muted); font-size: .74rem; white-space: nowrap; } .sv-chart-table thead th { text-align: center; } .sv-chart-table td.sv-chart-cell { border: 1px solid var(--sv-border); padding: 3px; text-align: center; min-width: 34px; } .sv-chart-cell.is-empty { background: var(--sv-soft); opacity: .4; } .sv-chart-key { display: inline-block; font-family: "Doulos SIL", "Charis SIL", "Noto Sans", serif; font-size: .92rem; padding: 1px 5px; border-radius: 5px; margin: 1px; border: none; cursor: default; } /* jede Zelle ist ein Button (auch ohne Aufnahme animierbar, s. chartKey() in sprachvergleichView.v1.js) */ button.sv-chart-key { cursor: pointer; font: inherit; transition: transform .1s; } button.sv-chart-key:hover, button.sv-chart-key:focus-visible { transform: scale(1.12); } .sv-chart-key--shared { background: var(--sv-soft); color: var(--sv-text); border: 1px solid var(--sv-border); } .sv-chart-key--target { background: color-mix(in srgb, var(--sv-target-color) 22%, transparent); color: var(--sv-target-color); font-weight: 700; } .sv-chart-key--ui { background: color-mix(in srgb, var(--sv-ui-color) 22%, transparent); color: var(--sv-ui-color); font-weight: 700; } .sv-chart-rest { display: flex; flex-wrap: wrap; gap: 4px; } .sv-clip-badge { margin-left: 3px; font-size: .78rem; } /* ── Grammatik: Konzeptkarten ───────────────────────────────────────────── */ .sv-gcards { display: grid; gap: 12px; margin-top: 12px; } .sv-gcard { border: 1px solid var(--sv-border); border-radius: var(--sv-radius); background: var(--sv-surface); border-left: 4px solid var(--sv-accent, var(--sv-border)); padding: 12px 16px; } .sv-gcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .sv-gemoji { font-size: 1.15rem; } .sv-gtitle { font-weight: 600; } .sv-warn { margin-left: auto; color: var(--sv-mid); cursor: help; } .sv-gbody { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .sv-gbody { grid-template-columns: 1fr; } } .sv-gside { border-top: 3px solid transparent; padding-top: 6px; } .sv-gside.sv-role-target { border-top-color: var(--sv-target-color); } .sv-gside.sv-role-ui { border-top-color: var(--sv-ui-color); } .sv-gside--empty { color: var(--sv-muted); font-size: .85rem; font-style: italic; } .sv-glang { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sv-muted); margin-bottom: 2px; } .sv-role-target .sv-glang { color: var(--sv-target-color); } .sv-role-ui .sv-glang { color: var(--sv-ui-color); } .sv-glabel { font-weight: 600; font-size: .92rem; margin-bottom: 4px; } .sv-grules { margin: 0 0 6px; padding-left: 1.1em; font-size: .85rem; line-height: 1.5; } .sv-gmarkers { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; } .sv-gexample { font-size: .85rem; color: var(--sv-muted); } .sv-gempty { color: var(--sv-muted); font-size: .85rem; font-style: italic; }