/* studium/views/phonetik.v1.css Externes Stylesheet für das Phonetik-Modul (phonetikView.v1.js). Farbwerte des Moduls kommen über --ph-accent, das die View je nach gewählter Lautgruppe setzt — keine sonstigen Inline-Styles. */ .ph { --ph-bg: #fffdf7; --ph-surface: #ffffff; --ph-text: #2a2318; --ph-muted: #7a7060; --ph-border: rgba(42, 35, 24, .14); --ph-soft: rgba(42, 35, 24, .05); --ph-accent: #a13a24; --ph-radius: 16px; --ph-head-fill: #e6e6e6; --ph-head-stroke: #8a8a8a; /* Gaumen und Stimmlippen bewusst ohne Buntton: die Akzentfarbe wechselt mit der Lautgruppe und würde sonst mit ihnen kollidieren — bei Vokalen etwa war Zunge wie Gaumen blau. Nur die Zunge trägt Farbe, das ist auch der didaktische Punkt: sie ist der Artikulator, den man verfolgen soll. */ --ph-palate: #a3acb6; --ph-glottis: #4a4a4a; color: var(--ph-text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ph { --ph-bg: #1c170f; --ph-surface: #241d14; --ph-text: #eee6d6; --ph-muted: #a99c86; --ph-border: rgba(238, 230, 214, .18); --ph-soft: rgba(238, 230, 214, .06); /* Der Kopfumriss ist im Quell-SVG fest auf #e6e6e6 gesetzt und würde im Dunkelmodus als weißer Block erscheinen — hier überschrieben. */ --ph-head-fill: #3a3128; --ph-head-stroke: #6b6154; --ph-palate: #6b7682; --ph-glottis: #cdc3b4; } } /* Dieselben Werte auch OHNE OS-Dunkelmodus, wenn die einbettende Reader-Seite (read-v2.html) explizit auf Dunkel umgeschaltet wurde — beide Seiten teilen sich denselben localStorage-Schlüssel "hsk.theme" (gleiche Origin), s. Theme-Init-Skript im von phonetik.html (Nutzerwunsch: Dunkelansicht von Artikulation an die App anpassen, nicht nur ans Betriebssystem). */ :root[data-theme="dark"] .ph { --ph-bg: #1c170f; --ph-surface: #241d14; --ph-text: #eee6d6; --ph-muted: #a99c86; --ph-border: rgba(238, 230, 214, .18); --ph-soft: rgba(238, 230, 214, .06); --ph-head-fill: #3a3128; --ph-head-stroke: #6b6154; --ph-palate: #6b7682; --ph-glottis: #cdc3b4; } /* ── Kopfzeile: Sprachwahl + Datenlage ──────────────────────────────────── */ .ph-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .ph-langpick { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ph-muted); max-width: 100%; min-width: 0; } /* Die Endonyme machen die Optionen beliebig breit; ohne Deckelung schiebt das Select auf schmalen Geräten die ganze Seite auf. */ .ph-langpick select { font: inherit; font-size: .95rem; padding: .35rem .5rem; border-radius: 8px; border: 1px solid var(--ph-border); background: var(--ph-surface); color: var(--ph-text); max-width: 100%; min-width: 0; } .ph-badge { font-size: .76rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ph-border); background: var(--ph-soft); color: var(--ph-muted); } .ph-badge--warn { color: #a3541a; border-color: rgba(163, 84, 26, .4); } /* ── Bühne: Sagittalschnitt + Lautinfo ──────────────────────────────────── */ .ph-stage { display: grid; grid-template-columns: minmax(220px, 1fr) 1.4fr; gap: 18px; align-items: center; padding: 18px; margin-bottom: 16px; border: 1px solid var(--ph-border); border-radius: var(--ph-radius); background: var(--ph-surface); } @media (max-width: 560px) { .ph-stage { grid-template-columns: 1fr; } } /* Sagittalschnitt und Mundbild nebeneinander; das flex-wrap übernimmt den Zeilenumbruch schon VOR dem 560px-Grid-Kollaps, keine eigene Media-Query nötig. */ .ph-visual-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .ph-svg-wrap, .ph-viseme-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 140px; min-width: 120px; } .ph-svg-wrap { justify-content: center; } .ph-svg-wrap svg { width: 100%; max-width: 210px; height: auto; padding: 10px; border-radius: 14px; background: var(--ph-soft); border: 2px solid var(--ph-accent); color: var(--ph-accent); transition: border-color .25s, color .25s; } /* CSS schlägt die Präsentationsattribute im SVG-Markup — nötig, weil der SagittalAnimator beim Aufsetzen eigene fill/stroke/opacity-Attribute setzt, wenn keine vorhanden sind. Der statische Kopfumriss bleibt so in beiden Themes lesbar, und die drei beweglichen Teile werden hier bewusst neu gewichtet: die Zunge ist der Artikulator, den man sehen muss. */ .ph-svg-wrap #path7, .ph-svg-wrap #path9 { fill: var(--ph-head-fill); stroke: var(--ph-head-stroke); } /* Zunge — der eigentliche Artikulator, in der Akzentfarbe der Lautgruppe. */ .ph-svg-wrap #path15 { opacity: 1; fill: var(--ph-accent); fill-opacity: .58; stroke: var(--ph-accent); stroke-width: .7; stroke-opacity: .9; } /* Gaumen und Velum — eigener Farbton, damit er nicht mit der Zunge verschwimmt. */ .ph-svg-wrap #path13 { opacity: 1; fill: var(--ph-palate); fill-opacity: .5; stroke: var(--ph-palate); stroke-width: .6; stroke-opacity: .85; } /* Stimmlippen — kleine Linie am unteren Rachenende. */ .ph-svg-wrap #path11 { opacity: 1; fill: none; stroke: var(--ph-glottis); stroke-width: 2.2; stroke-linecap: round; } .ph-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: .7rem; color: var(--ph-muted); } .ph-legend__item { display: inline-flex; align-items: center; gap: 4px; } .ph-legend__item::before { content: ''; width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; } .ph-legend__item--tongue::before { background: var(--ph-accent); opacity: .65; } .ph-legend__item--palate::before { background: var(--ph-palate); opacity: .7; } .ph-legend__item--glottis::before { background: var(--ph-glottis); } /* Mundbild (Viseme) — Frontalansicht, parallel zum Sagittalschnitt. Die zwei Ebenen darin (ph-viseme-layer) legt VisemeAnimator selbst an und blendet zwischen ihnen weich um, s. VisemeAnimator.v1.js. Seitenverhältnis 400:430 entspricht der viewBox der Mundbild-Illustrationen. */ .ph-viseme-stage { position: relative; width: 100%; max-width: 210px; aspect-ratio: 400 / 430; border-radius: 14px; overflow: hidden; background: var(--ph-soft); border: 2px solid var(--ph-accent); } .ph-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) { .ph-viseme-stage .ph-viseme-layer { transition: none; } } .ph-viseme-caption { margin-top: 8px; font-size: .7rem; color: var(--ph-muted); text-align: center; } .ph-detail { display: grid; gap: 8px; min-width: 0; } .ph-symbol { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--ph-accent); transition: color .25s; } .ph-name { font-size: 1rem; font-weight: 700; } .ph-hint { color: var(--ph-muted); font-size: .92rem; } .ph-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ph-chip { font-size: .76rem; padding: 3px 9px; border-radius: 999px; background: var(--ph-soft); border: 1px solid var(--ph-border); color: var(--ph-muted); } .ph-note { font-size: .9rem; line-height: 1.55; padding: 9px 12px; border-radius: 10px; background: var(--ph-soft); border-left: 3px solid var(--ph-accent); } .ph-note[dir="rtl"] { border-left: none; border-right: 3px solid var(--ph-accent); } .ph-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .ph-example { font-size: .92rem; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; } .ph-example__play { font: inherit; font-size: inherit; color: inherit; cursor: pointer; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--ph-border); background: var(--ph-soft); } .ph-example__play:hover { border-color: var(--ph-accent); } .ph-example__play::before { content: '🔊'; font-size: .8em; margin-right: .35rem; } .ph-example__orth { font-weight: 650; } .ph-example__ipa { color: var(--ph-muted); margin-left: .4rem; } .ph-example__gloss { color: var(--ph-muted); margin-left: .4rem; font-style: italic; } .ph-play { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px; border: none; background: var(--ph-accent); color: #fff; font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; } .ph-play:disabled { opacity: .45; cursor: default; } .ph-play.is-playing { animation: ph-pulse .7s ease-in-out infinite; } @keyframes ph-pulse { 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .ph-play.is-playing { animation: none; } } .ph-audiohint { font-size: .76rem; color: var(--ph-muted); } /* ── Wortübung ──────────────────────────────────────────────────────────── */ .ph-word { margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--ph-border); border-radius: var(--ph-radius); background: var(--ph-surface); } .ph-word .ph-section__title { margin-top: 0; } .ph-wordbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ph-wordinput { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 1rem; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--ph-border); background: var(--ph-bg); color: var(--ph-text); } .ph-wordinput:focus { outline: 2px solid var(--ph-accent); outline-offset: 1px; } .ph-play--word { flex: 0 0 auto; } .ph-suggests { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .ph-suggest { font: inherit; font-size: .8rem; cursor: pointer; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ph-border); background: var(--ph-soft); color: var(--ph-muted); } .ph-suggest:hover { border-color: var(--ph-accent); color: var(--ph-text); } /* Lautkette: ein Chip je animiertem Laut, der laufende ist hervorgehoben. */ .ph-chain { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; } .ph-phon { font: inherit; font-size: 1.05rem; font-weight: 650; cursor: pointer; padding: 5px 11px; border-radius: 9px; border: 2px solid var(--ph-border); background: var(--ph-bg); color: var(--ph-text); transition: background-color .12s, border-color .12s, transform .12s; } /* Laut, den diese Sprache nicht im Inventar führt (z. B. aus einer G2P-Näherung) — animierbar, aber ohne Detailansicht. */ .ph-phon.is-foreign { opacity: .6; cursor: default; border-style: dashed; } .ph-phon.is-active { border-color: var(--ph-accent); background: var(--ph-accent); color: #fff; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .ph-phon.is-active { transform: none; } } /* Nachsprechen */ .ph-mic { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ph-border); background: var(--ph-soft); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; color: var(--ph-text); } .ph-mic:hover { border-color: var(--ph-accent); } .ph-mic.is-recording { background: #c0392b; border-color: #c0392b; color: #fff; animation: ph-pulse .9s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ph-mic.is-recording { animation: none; } } .ph-asr { margin-top: 11px; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--ph-border); background: var(--ph-bg); font-size: .88rem; line-height: 1.55; } .ph-asr__verdict { font-size: 1rem; font-weight: 750; margin-bottom: 5px; } .ph-asr__verdict--correct { color: #1a7f4b; } .ph-asr__verdict--close { color: #a3541a; } .ph-asr__verdict--near { color: #b06a1a; } .ph-asr__verdict--wrong { color: #b03030; } .ph-asr__score { font-weight: 600; color: var(--ph-muted); font-size: .85rem; } .ph-asr__line { color: var(--ph-text); } .ph-asr__alt, .ph-asr__caveat { color: var(--ph-muted); font-size: .78rem; } .ph-reco { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; font-size: .78rem; color: var(--ph-muted); } .ph-reco__opt { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .ph-reco__opt.is-disabled { opacity: .5; cursor: default; } .ph-reco__state { font-style: italic; } /* Aufnahme-Anzeige */ .ph-scope { margin-top: 9px; display: grid; gap: 3px; } .ph-scope__canvas { width: 100%; display: block; border-radius: 8px; background: #070a0f; border: 1px solid var(--ph-border); } .ph-scope__canvas--wave { height: 54px; } .ph-scope__canvas--spec { height: 84px; } .ph-scope__labels { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ph-muted); } /* Laut-für-Laut-Gegenüberstellung: oben das Ziel, darunter das Verstandene. */ .ph-cmp { margin: 10px 0; } .ph-cmp__row { display: flex; flex-wrap: wrap; gap: 4px; } .ph-cmp__cell { display: grid; justify-items: center; gap: 1px; min-width: 30px; padding: 4px 7px; border-radius: 7px; border: 1px solid var(--ph-border); background: var(--ph-surface); } .ph-cmp__soll { font-size: 1rem; font-weight: 650; } .ph-cmp__ist { font-size: .78rem; opacity: .85; } .ph-cmp__cell--correct { border-color: rgba(26,127,75,.5); } .ph-cmp__cell--substitution { border-color: #b06a1a; background: rgba(176,106,26,.1); } .ph-cmp__cell--omission { border-color: #b03030; background: rgba(176,48,48,.1); } .ph-cmp__cell--insertion { border-color: #6b7682; background: rgba(107,118,130,.12); } .ph-cmp__cell--omission .ph-cmp__soll { text-decoration: line-through; opacity: .7; } .ph-cmp__cell--insertion .ph-cmp__soll { opacity: .4; } .ph-cmp__legend { font-size: .72rem; color: var(--ph-muted); margin-top: 5px; } .ph-cmp__metrics { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: .78rem; color: var(--ph-muted); } .ph-cmp__none { font-size: .8rem; color: var(--ph-muted); margin: 8px 0; } .ph-asr__caveat { margin-top: 6px; } .ph-asr__live { font-weight: 650; } .ph-wordnote { margin-top: 9px; font-size: .8rem; line-height: 1.55; color: var(--ph-muted); } .ph-wordnote--warn { color: #a3541a; } .ph-wordipa { font-size: .95rem; color: var(--ph-text); margin-right: .4rem; } /* ── Gruppenreiter + Lautraster ─────────────────────────────────────────── */ .ph-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .ph-tab { font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--ph-border); background: var(--ph-surface); color: var(--ph-text); } .ph-tab.is-active { background: var(--ph-accent); border-color: var(--ph-accent); color: #fff; } .ph-grid { display: grid; gap: 8px; margin-bottom: 18px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } /* ── IPA-Tabelle ────────────────────────────────────────────────────────── */ .ph-modes { display: flex; gap: 6px; margin-bottom: 10px; } .ph-mode { font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; padding: 5px 14px; border-radius: 8px; border: 1px solid var(--ph-border); background: var(--ph-surface); color: var(--ph-muted); } .ph-mode.is-active { background: var(--ph-soft); color: var(--ph-text); border-color: var(--ph-accent); } .ph-chart { margin-bottom: 18px; } .ph-chart__title { font-size: .95rem; margin: 14px 0 6px; display: flex; align-items: baseline; gap: 7px; } .ph-chart__title span { font-size: .75rem; font-weight: 500; color: var(--ph-muted); } /* Die Rastertabellen sind breiter als schmale Displays — sie scrollen in sich selbst, damit die Seite nicht insgesamt horizontal wandert. */ .ph-chart__scroll { overflow-x: auto; } .ph-table { border-collapse: collapse; font-size: .8rem; min-width: 100%; } .ph-table th { font-weight: 600; color: var(--ph-muted); font-size: .72rem; text-align: left; padding: 4px 8px; white-space: nowrap; } .ph-table thead th { text-align: center; } .ph-table td { border: 1px solid var(--ph-border); padding: 3px; text-align: center; vertical-align: middle; min-width: 58px; } .ph-cell.is-empty { background: var(--ph-soft); opacity: .45; } .ph-cellkey { position: relative; font: inherit; font-size: 1.05rem; font-weight: 650; cursor: pointer; padding: 3px 8px; margin: 1px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--ph-text); } .ph-cellkey:hover { border-color: var(--ph-accent); } .ph-cellkey.is-active { background: var(--ph-accent); color: #fff; } .ph-cellkey__flags { font-size: .52rem; vertical-align: super; opacity: .7; } .ph-chart__rest { display: flex; flex-wrap: wrap; gap: 4px; } .ph-chart__rest .ph-cellkey { border-color: var(--ph-border); } .ph-chart__note { font-size: .76rem; color: var(--ph-muted); line-height: 1.55; margin-top: 12px; } .ph-key { display: grid; gap: 2px; justify-items: center; padding: 10px 6px; border-radius: 12px; cursor: pointer; border: 2px solid var(--ph-border); background: var(--ph-surface); font: inherit; color: var(--ph-text); } .ph-key:hover { border-color: var(--ph-accent); } .ph-key.is-active { border-color: var(--ph-accent); background: var(--ph-soft); } .ph-key__ipa { font-size: 1.3rem; font-weight: 700; line-height: 1.1; } .ph-key__word { font-size: .72rem; color: var(--ph-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-key__flags { font-size: .62rem; letter-spacing: .1em; min-height: .8em; } /* ── Minimalpaare ───────────────────────────────────────────────────────── */ .ph-section { margin-top: 18px; } .ph-section__title { font-size: 1rem; margin: 0 0 8px; } .ph-pairs { display: grid; gap: 8px; } .ph-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--ph-border); background: var(--ph-surface); } .ph-pair__side { display: inline-flex; align-items: baseline; gap: 6px; font: inherit; cursor: pointer; color: var(--ph-text); padding: 5px 11px; border-radius: 8px; border: 1px solid var(--ph-border); background: var(--ph-soft); } .ph-pair__side:hover { border-color: var(--ph-accent); } .ph-pair__word { font-weight: 650; } .ph-pair__ipa { font-size: .82rem; color: var(--ph-muted); } .ph-pair__vs { color: var(--ph-muted); font-size: .85rem; } .ph-pair__note { flex-basis: 100%; font-size: .8rem; color: var(--ph-muted); } /* ── Statusmeldungen ────────────────────────────────────────────────────── */ .ph-empty, .ph-disabled { padding: 1.6rem; text-align: center; color: var(--ph-muted); border: 1px dashed var(--ph-border); border-radius: var(--ph-radius); } .ph-provenance { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--ph-border); font-size: .78rem; line-height: 1.6; color: var(--ph-muted); } /* ── Eingebettet (z. B. HSK-Reader-Sidebar) ────────────────────────────── Nur die Animation (Sagittalschnitt + Mundbild) und die Wort-/Lautkette (Eingabefeld, Abspielen, Nachsprechen) bleiben stehen; Sprachwahl, Lautraster und Minimalpaare gehören in die volle Phonetik-Seite, nicht in eine ~380px-Spalte. Die Wortvorschläge (zufällige Beispielwörter des Kernwortschatzes, nicht das gerade angesteuerte Wort) sind dort ebenfalls nur Ablenkung, da das Eingabefeld ja schon extern befüllt wird. */ body.ph-embed .ph-topbar, body.ph-embed [data-region="modes"], body.ph-embed [data-region="tabs"], body.ph-embed [data-region="grid"], body.ph-embed .ph-section[data-region="pairs"], body.ph-embed [data-region="suggests"] { display: none; } body.ph-embed .ph-stage { margin-bottom: 10px; padding: 12px; } body.ph-embed .ph-svg-wrap svg, body.ph-embed .ph-viseme-stage { max-width: 150px; } body.ph-embed .ph-provenance { font-size: .72rem; margin-top: 12px; padding-top: 8px; } .ph-provenance code { font-size: .95em; }