/* Geteilte Fenster von Tab-Rahmen UND eingebetteten Bereichen: Einstellungen (chat-einstellungen.js) und Wort-Ersetzungen (ersetzungen-ui.js). Beide laufen in getrennten Dokumenten (iframe), deshalb EINE Datei, die beide laden - nicht zwei Kopien. Gestaltungswerte als Variablen: Radius, Abstand, Dauer an einer Stelle. */ /* Die Werte sind Vorgaben, keine Festlegungen: ein Host, der die Werkstatt in seine eigene Handschrift übersetzt, setzt `--lkp-*` auf `:root`, und alles hier folgt. Ohne diese Kette stand mitten in seiner Anwendung ein Dialog in den Farben der ersten Instanz - die Fenster hängen an und damit außerhalb der Wurzelklasse, an der die übrigen Variablen sitzen. */ .lke-vars, .lke-schleier { --lke-radius: var(--lkp-radius, 14px); --lke-radius-klein: var(--lkp-radius-klein, 9px); --lke-abstand: 18px; --lke-abstand-eng: 10px; --lke-dauer: .16s; --lke-kurve: cubic-bezier(.2, .7, .3, 1); --lke-linie: var(--lkp-linie, #e3e1da); --lke-flaeche: var(--lkp-flaeche, #fff); --lke-flaeche-2: var(--lkp-flaeche-2, #faf9f5); --lke-text: var(--lkp-text, #1d2321); --lke-text-leise: var(--lkp-leise, #6b736f); --lke-akzent: var(--lkp-akzent, #2e7d32); --lke-akzent-ll: var(--lkp-akzent-ll, #eef6ee); } .lke-schleier { position: fixed; inset: 0; background: rgba(20, 26, 24, .46); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1400; opacity: 0; transition: opacity var(--lke-dauer) var(--lke-kurve); } .lke-schleier.sichtbar { opacity: 1; } .lke-fenster { background: var(--lke-flaeche); color: var(--lke-text); border-radius: var(--lke-radius); box-shadow: 0 24px 60px rgba(16, 24, 20, .28), 0 2px 8px rgba(16, 24, 20, .12); width: min(760px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; overflow: hidden; transform: translateY(12px) scale(.985); transition: transform var(--lke-dauer) var(--lke-kurve); } .lke-schleier.sichtbar .lke-fenster { transform: none; } .lke-kopf { display: flex; align-items: center; gap: var(--lke-abstand-eng); padding: 16px var(--lke-abstand) 12px; border-bottom: 1px solid var(--lke-linie); } .lke-kopf h2 { font-size: 1.06rem; margin: 0; font-weight: 650; letter-spacing: -.01em; } .lke-kopf .lke-bereich { color: var(--lke-text-leise); font-size: .9rem; } .lke-kopf .lke-schliessen { margin-left: auto; border: none; background: transparent; color: var(--lke-text-leise); cursor: pointer; border-radius: 999px; width: 32px; height: 32px; display: grid; place-items: center; transition: background var(--lke-dauer) var(--lke-kurve); } .lke-kopf .lke-schliessen:hover { background: var(--lke-flaeche-2); } .lke-kopf .lke-schliessen svg { width: 18px; height: 18px; fill: currentColor; } .lke-koerper { overflow-y: auto; padding: var(--lke-abstand); display: grid; gap: 22px; } .lke-gruppe > h3 { margin: 0 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--lke-text-leise); font-weight: 700; } .lke-gruppe > p.lke-erklaerung { margin: 0 0 12px; color: var(--lke-text-leise); font-size: .88rem; } .lke-schalter { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); background: var(--lke-flaeche-2); } .lke-schalter input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--lke-akzent); } .lke-schalter .lke-feldtitel { font-weight: 600; display: block; } .lke-schalter .lke-hilfe { color: var(--lke-text-leise); font-size: .86rem; } .lke-prompt { border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); overflow: hidden; } .lke-prompt + .lke-prompt { margin-top: var(--lke-abstand-eng); } .lke-prompt > summary { cursor: pointer; padding: 11px 14px; display: flex; align-items: center; gap: 10px; font-weight: 600; background: var(--lke-flaeche-2); list-style: none; } .lke-prompt > summary::-webkit-details-marker { display: none; } .lke-prompt > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--lke-text-leise); border-bottom: 2px solid var(--lke-text-leise); transform: rotate(45deg); transition: transform var(--lke-dauer) var(--lke-kurve); } .lke-prompt[open] > summary::after { transform: rotate(225deg); } .lke-marke { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lke-akzent); background: var(--lke-akzent-ll); border-radius: 999px; padding: 2px 9px; } .lke-prompt .lke-inhalt { padding: 12px 14px 14px; display: grid; gap: 9px; } .lke-prompt textarea { width: 100%; min-height: 190px; resize: vertical; font: inherit; font-size: .9rem; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); background: var(--lke-flaeche); color: var(--lke-text); } .lke-prompt textarea:focus { outline: 2px solid var(--lke-akzent); outline-offset: 1px; } .lke-prompt .lke-zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .lke-prompt .lke-hilfe { color: var(--lke-text-leise); font-size: .84rem; } .lke-fuss { display: flex; gap: 10px; align-items: center; padding: 12px var(--lke-abstand); border-top: 1px solid var(--lke-linie); background: var(--lke-flaeche-2); } .lke-fuss .lke-status { color: var(--lke-text-leise); font-size: .86rem; margin-right: auto; } .lke-fuss .lke-status.fehler { color: #b3261e; } .lke-knopf { border: 1px solid var(--lke-linie); background: var(--lke-flaeche); color: var(--lke-text); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; transition: background var(--lke-dauer) var(--lke-kurve), border-color var(--lke-dauer) var(--lke-kurve); } .lke-knopf:hover { background: var(--lke-flaeche-2); } .lke-knopf.haupt { background: var(--lke-akzent); border-color: var(--lke-akzent); color: #fff; } .lke-knopf.haupt:hover { filter: brightness(1.06); } .lke-knopf.klein { padding: 5px 11px; font-size: .84rem; font-weight: 500; } .lke-knopf[disabled] { opacity: .55; cursor: default; } @media (prefers-reduced-motion: reduce) { .lke-schleier, .lke-fenster, .lke-prompt > summary::after { transition: none; } } @media (max-width: 620px) { .lke-schleier { padding: 0; } .lke-fenster { max-height: 100vh; height: 100%; border-radius: 0; width: 100%; } } /* ---- Ersetzungs-Fenster (ersetzungen-ui.js) ---- */ .lke-fenster.lke-klein { width: min(430px, 100%); } .lke-fenster.lke-ers { width: min(820px, 100%); } .lke-feld { display: grid; gap: 5px; margin-bottom: 12px; } .lke-feld > span { font-size: .8rem; font-weight: 650; color: var(--lke-text-leise); } .lke-feld input { font: inherit; padding: 9px 12px; border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); background: var(--lke-flaeche); color: var(--lke-text); } .lke-feld input:focus { outline: 2px solid var(--lke-akzent); outline-offset: 1px; } .lke-wahl { margin-bottom: 4px; } .lke-treffer { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); background: var(--lke-flaeche); } .lke-treffer + .lke-treffer { margin-top: 8px; } .lke-treffer input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--lke-akzent); } .lke-treffer-text { display: grid; gap: 3px; min-width: 0; font-size: .9rem; line-height: 1.45; } .lke-regel { font-weight: 650; font-size: .84rem; } .lke-vorher, .lke-nachher { color: var(--lke-text-leise); overflow-wrap: anywhere; } .lke-marke-alt, .lke-marke-neu { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 1px 7px; margin-right: 6px; } .lke-marke-alt { background: #fdecea; color: #a5261d; } .lke-marke-neu { background: var(--lke-akzent-ll); color: #1f5c22; } .lke-treffer mark { border-radius: 3px; padding: 0 3px; } .lke-treffer mark.alt { background: #fdd9d5; color: #7c1d17; text-decoration: line-through; } .lke-treffer mark.neu { background: #cfead1; color: #14401a; font-weight: 650; } .lke-merken { display: flex; align-items: center; gap: 9px; margin-right: auto; font-size: .88rem; } .lke-merken input { width: 17px; height: 17px; accent-color: var(--lke-akzent); } /* Gepflegte Regeln in den Einstellungen */ .lke-regelliste { display: grid; gap: 7px; } .lke-regelzeile { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); background: var(--lke-flaeche-2); font-size: .9rem; } .lke-regelzeile .lke-von { text-decoration: line-through; color: var(--lke-text-leise); } .lke-regelzeile .lke-pfeil { color: var(--lke-text-leise); } .lke-regelzeile .lke-nach { font-weight: 650; } .lke-regelzeile button { margin-left: auto; } /* Schwebender Knopf über einer Textmarkierung (transkription-korrektur.js). Position über `transform`, damit kein Layout neu berechnet wird. */ .lke-schwebe { position: fixed; top: 0; left: 0; z-index: 1500; opacity: 0; transition: opacity .12s ease; will-change: transform; } .lke-schwebe.sichtbar { opacity: 1; } .lke-schwebe .lke-knopf { display: inline-flex; align-items: center; gap: 6px; background: #1d2321; color: #fff; border-color: #1d2321; box-shadow: 0 6px 18px rgba(16, 24, 20, .3); font-weight: 600; padding: 7px 13px; } .lke-schwebe .lke-knopf:hover { background: #2e7d32; border-color: #2e7d32; } @media (prefers-reduced-motion: reduce) { .lke-schwebe { transition: none; } } /* ---- Verwaltung der Wort-Ersetzungen (chat-ersetzungen.js) ---- */ .lke-ers-neu { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; } .lke-ers-neu input, .lke-suche { font: inherit; font-size: .92rem; padding: 8px 11px; border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); background: var(--lke-flaeche); color: var(--lke-text); min-width: 0; } .lke-ers-neu input:focus, .lke-suche:focus { outline: 2px solid var(--lke-akzent); outline-offset: 1px; } .lke-suche { width: 100%; } .lke-ers-tabelle { display: grid; gap: 6px; } .lke-ers-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); background: var(--lke-flaeche-2); font-size: .92rem; } .lke-ers-zeile .lke-von { color: var(--lke-text-leise); overflow-wrap: anywhere; } .lke-ers-zeile .lke-nach { font-weight: 650; overflow-wrap: anywhere; } .lke-ers-zeile .lke-pfeil { color: var(--lke-text-leise); } .lke-ers-zeile .lke-wann { color: var(--lke-text-leise); font-size: .78rem; white-space: nowrap; } .lke-ers-zeile .lke-weg { display: inline-flex; padding: 4px 8px; color: var(--lke-text-leise); } .lke-ers-zeile .lke-weg:hover { color: #b3261e; border-color: #e6b4b0; } @media (max-width: 620px) { .lke-ers-neu { grid-template-columns: 1fr; } .lke-ers-neu .lke-pfeil { display: none; } .lke-ers-zeile { grid-template-columns: minmax(0, 1fr) auto auto; } .lke-ers-zeile .lke-pfeil, .lke-ers-zeile .lke-wann { display: none; } } /* ---- Fehlerliste des Assistenten (transkription-wortschritt.js) ---- Gestalterische Richtung: KORREKTURABZUG. Kein Kachelraster aus 40 gleichen Kästen - eine durchgehende Leseliste mit feinen Trennlinien, in der nur die Zeile Tiefe bekommt, an der gerade gearbeitet wird. Die Erkennungssicherheit steht als Säule links (Höhe = Sicherheit): eine Kolonne roter Prozentzahlen liest niemand, eine Höhe erfasst man im Vorbeigehen. Eingaben sind unterstrichene Lücken statt Kästen, damit die Liste ruhig bleibt. */ .kw-kopf { display: grid; gap: 14px; } .kw-kopf > p { margin: 0; max-width: 62ch; color: var(--lke-text-leise); font-size: .92rem; line-height: 1.55; } .kw-regler { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 999px; background: var(--lke-flaeche-2); border: 1px solid var(--lke-linie); font-size: .86rem; } .kw-regler > label[for] { color: var(--lke-text-leise); white-space: nowrap; } .kw-regler input[type="range"] { flex: 1 1 120px; min-width: 110px; accent-color: var(--lke-akzent); } .kw-regler output { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; } .kw-filter { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--lke-linie); cursor: pointer; white-space: nowrap; } .kw-filter input { width: 16px; height: 16px; accent-color: var(--lke-akzent); } .kw-zahl { margin: 22px 0 6px; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--lke-text-leise); } .kw-zahl b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--lke-text); text-transform: none; margin-right: 4px; } .kw-zahl span { text-transform: none; letter-spacing: 0; } .kw-leer { color: var(--lke-text-leise); font-size: .92rem; line-height: 1.55; } .kw-liste { border-top: 1px solid var(--lke-linie); } .kw-eintrag { border-bottom: 1px solid var(--lke-linie); } .kw-zeile { display: grid; grid-template-columns: 5px auto minmax(0, 1fr) auto auto auto auto; grid-template-areas: "saeule ton satz meta feld passt mehr"; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--lke-radius-klein); transition: background var(--lke-dauer) var(--lke-kurve); } .kw-zeile > .kw-saeule { grid-area: saeule; } .kw-zeile > .kw-hoeren { grid-area: ton; } .kw-zeile > .kw-satz { grid-area: satz; } .kw-zeile > .kw-meta { grid-area: meta; } .kw-zeile > .kw-feld { grid-area: feld; } .kw-zeile > [data-act="passt"] { grid-area: passt; } .kw-zeile > .kw-mehr { grid-area: mehr; } .kw-meta { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; } .kw-zeile:hover { background: var(--lke-flaeche-2); } /* Aktive Zeile hebt sich heraus - Tiefe nur dort, wo gearbeitet wird. */ .kw-eintrag.offen { background: var(--lke-flaeche); border-radius: var(--lke-radius); border-bottom-color: transparent; box-shadow: 0 10px 28px rgba(16, 24, 20, .1), 0 0 0 1px var(--lke-linie); margin: 8px -4px; padding: 2px 4px 8px; } .kw-eintrag.offen .kw-zeile { background: transparent; } .kw-saeule { display: block; width: 5px; height: 30px; border-radius: 999px; background: #ece9e1; overflow: hidden; position: relative; } .kw-saeule i { position: absolute; left: 0; bottom: 0; width: 100%; background: linear-gradient(#e0a33c, #c2410c); border-radius: 999px; } .kw-hoeren { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 999px; cursor: pointer; border: 1px solid var(--lke-linie); background: var(--lke-flaeche); color: var(--lke-akzent); padding-left: 2px; /* optischer Ausgleich des Dreiecks */ transition: transform var(--lke-dauer) var(--lke-kurve), background var(--lke-dauer) var(--lke-kurve); } .kw-hoeren:hover { background: var(--lke-akzent-ll); transform: scale(1.08); } .kw-hoeren.zart { width: 26px; height: 26px; border-color: transparent; background: transparent; } .kw-hoeren.zart:hover { background: var(--lke-akzent-ll); } .kw-satz { min-width: 0; font-size: .95rem; line-height: 1.5; color: var(--lke-text-leise); overflow-wrap: anywhere; } .kw-satz mark { background: #fdf0c8; color: #6b4b00; font-weight: 650; border-radius: 3px; padding: 0 3px; box-shadow: inset 0 -2px 0 rgba(224, 163, 60, .8); } .kw-zahl-wert, .kw-eintrag .kw-zahl { margin: 0; text-transform: none; letter-spacing: 0; } .kw-eintrag .kw-zahl { font-size: 1.02rem; font-weight: 700; color: #a1441f; font-variant-numeric: tabular-nums; white-space: nowrap; } .kw-eintrag .kw-zahl small { font-size: .68em; font-weight: 600; opacity: .7; margin-left: 1px; } .kw-oft { font-size: .76rem; font-weight: 700; color: var(--lke-text-leise); background: var(--lke-flaeche-2); border: 1px solid var(--lke-linie); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } .kw-oft.leer { background: none; border: none; padding: 0; } /* "ersetzen …" öffnet denselben Ablauf wie im Transkript - deshalb sieht der Knopf auch aus wie ein Knopf und nicht wie ein Eingabefeld. */ .kw-ersetzen { white-space: nowrap; } .kw-eintrag.offen .kw-ersetzen, .kw-zeile:hover .kw-ersetzen { border-color: var(--lke-akzent); color: var(--lke-akzent); } /* Eingabe als Lücke, nicht als Kasten - 40 Kästen untereinander waren der halbe Grund für die Unruhe. */ .kw-feld { font: inherit; font-size: .9rem; padding: 5px 2px; min-width: 0; width: 100%; border: none; border-bottom: 1.5px dashed var(--lke-linie); border-radius: 0; background: transparent; color: var(--lke-text); } .kw-feld::placeholder { color: #a8afab; } .kw-feld:hover { border-bottom-color: #c9cfc8; } .kw-feld:focus { outline: none; border-bottom: 1.5px solid var(--lke-akzent); background: var(--lke-akzent-ll); } .kw-tat { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: none; background: transparent; cursor: pointer; border-radius: 999px; color: #9aa39d; transition: background var(--lke-dauer) var(--lke-kurve), color var(--lke-dauer) var(--lke-kurve), transform var(--lke-dauer) var(--lke-kurve); } .kw-tat:hover { background: var(--lke-flaeche-2); color: var(--lke-text); } .kw-tat[data-act="passt"]:hover { color: var(--lke-akzent); background: var(--lke-akzent-ll); } .kw-mehr svg { transition: transform var(--lke-dauer) var(--lke-kurve); } .kw-eintrag.offen .kw-mehr svg { transform: rotate(180deg); } /* Fundstellen: eingerückt an einer Linie, KEIN Kasten im Kasten. */ .kw-stellen { margin: 0 4px 4px 26px; padding-left: 14px; border-left: 2px solid #dfe7df; } .kw-stellen-kopf { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lke-text-leise); margin: 2px 0 6px; } .kw-stelle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; } .kw-stelle .kw-satz { font-size: .9rem; } .kw-wendung { border: 1px solid var(--lke-linie); background: var(--lke-flaeche); color: var(--lke-text-leise); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap; } .kw-wendung:hover { color: var(--lke-akzent); border-color: var(--lke-akzent); } .kw-stelle.offen .kw-wendung { color: var(--lke-akzent); border-color: var(--lke-akzent); } /* Werkbank für die ganze Wendung: eigene, warme Fläche statt weiterem Rahmen. */ .kw-werkbank { margin: 2px 0 10px; padding: 12px 14px; border-radius: var(--lke-radius-klein); background: #fbf8f1; display: grid; gap: 10px; } .kw-anleitung { margin: 0; font-size: .82rem; color: var(--lke-text-leise); } /* Mitlesen IM Fenster (transkription-mitlesen.js): dieselbe dunkelgraue Hinterlegung wie in der Sprecher-Ansicht - beim Anhören muss sichtbar sein, welches Wort gerade klingt. */ .lke-koerper .sa-w { border-radius: 3px; padding: 0 1px; } .lke-koerper .sa-w-laeuft { background: #37474f; color: #fff; box-shadow: 0 0 0 2px #37474f; } .lke-koerper .sa-w-laeuft mark { background: transparent; color: #ffd77a; box-shadow: none; } .kw-chip.sa-w-laeuft { background: #37474f !important; color: #fff; } .kw-band { display: flex; flex-wrap: wrap; gap: 3px; } .kw-chip { font: inherit; font-size: .88rem; padding: 4px 9px; cursor: pointer; border: 1px solid transparent; border-radius: 7px; background: #f1eee6; color: var(--lke-text-leise); transition: background var(--lke-dauer) var(--lke-kurve), color var(--lke-dauer) var(--lke-kurve); } .kw-chip:hover { background: #e5e0d4; color: var(--lke-text); } .kw-chip.unsicher { box-shadow: inset 0 -2px 0 rgba(224, 163, 60, .9); color: #6b4b00; } .kw-chip.drin { background: var(--lke-akzent); color: #fff; font-weight: 600; box-shadow: none; } .kw-tausch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .kw-alt { font-size: .9rem; text-decoration: line-through; color: var(--lke-text-leise); } .kw-nach { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #a8afab; } .kw-tausch .kw-phrase-neu { flex: 1 1 160px; width: auto; } /* Abgearbeitetes - ersetzte Wendungen und abgehakte Wörter, mit Rückweg. */ .kw-erledigt { margin-top: 26px; padding-top: 14px; border-top: 1px dashed var(--lke-linie); } .kw-erledigt h3 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--lke-text-leise); font-weight: 700; } .kw-erledigt h3 span { background: var(--lke-akzent-ll); color: #1f5c22; border-radius: 999px; padding: 1px 8px; margin-left: 6px; } .kw-erledigt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .kw-erledigt li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 2px; font-size: .88rem; } .kw-marke { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; background: var(--lke-akzent-ll); color: #1f5c22; } .kw-marke.passt { background: #eef1ef; color: var(--lke-text-leise); } .kw-erledigt-text { min-width: 0; overflow-wrap: anywhere; color: var(--lke-text-leise); } .kw-erledigt-text s { opacity: .7; margin-right: 4px; } .kw-zurueck { margin-left: auto; border: none; background: transparent; cursor: pointer; color: var(--lke-text-leise); font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; padding: 2px 4px; } .kw-zurueck:hover { color: var(--lke-akzent); } /* Schmal: zwei feste Reihen statt umbrechender Spalten - Text oben, Bewertung und Eingabe darunter. Ohne festes Raster rutschten Haken und Chevron vor die Säule und der Prozentwert auf eine eigene Zeile. */ @media (max-width: 680px) { .kw-zeile { grid-template-columns: 5px auto minmax(0, 1fr) auto auto; grid-template-areas: "saeule ton satz satz mehr" "saeule meta feld feld passt"; row-gap: 9px; column-gap: 10px; } .kw-stellen { margin-left: 10px; } .kw-stelle { grid-template-columns: auto minmax(0, 1fr); } .kw-wendung { grid-column: 2; justify-self: start; } .kw-filter { border-left: none; padding-left: 0; } } @media (prefers-reduced-motion: reduce) { .kw-zeile, .kw-hoeren, .kw-tat, .kw-chip, .kw-mehr svg { transition: none; } } /* ---- Fortschritt einer Verarbeitung (transkription-fortschritt.js) ---- */ .lke-balken { height: 9px; border-radius: 999px; overflow: hidden; background: var(--lke-flaeche-2); border: 1px solid var(--lke-linie); margin: 14px 0 9px; } .lke-balken-fuell { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #4c9a4f, var(--lke-akzent)); transition: transform .25s linear; } .lke-balken-fehler .lke-balken-fuell { background: #b3261e; } .lke-lauf-zahlen { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--lke-text-leise); font-variant-numeric: tabular-nums; } .lke-lauf-rest { font-weight: 650; color: var(--lke-text); } .lke-lauf .lke-fuss { justify-content: flex-end; } .lke-knopf.gefahr { background: #b3261e; border-color: #b3261e; color: #fff; } .lke-knopf.gefahr:hover { background: #94201a; border-color: #94201a; } @media (prefers-reduced-motion: reduce) { .lke-balken-fuell, .ws-chip, .ws-pfeil { transition: none; } } /* Auswahl des Sprechers (transkription-zuweisen.js) */ .lke-schwebe { display: flex; gap: 6px; } .lke-sprecherwahl { display: flex; flex-wrap: wrap; gap: 8px; } .lke-sprecherwahl .lke-knopf { flex: 1 1 auto; min-width: 120px; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; } /* Das rohe Label unter dem Namen - man sieht, welche Stimme gemeint ist. */ .lke-sprecherwahl .lke-knopf small { font-size: .72rem; font-weight: 500; color: var(--lke-text-leise); } /* ---- Übergabe an das Medien-Studio: Auswahl der Grundlage ---- Wahlkarten statt nackter Radios: die Entscheidung hat Folgen (was landet im Dokument), also braucht jede Option ihre Begründung direkt daneben. Die aktive Karte trägt die Akzentfläche - erkennbar auch ohne den Radio-Punkt. */ .uw-liste { display: grid; gap: 8px; } .uw-option { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 11px 13px; border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); cursor: pointer; background: var(--lke-flaeche); transition: border-color var(--lke-dauer) var(--lke-kurve), background var(--lke-dauer) var(--lke-kurve); } .uw-option:hover { background: var(--lke-flaeche-2); } .uw-option.aktiv { border-color: var(--lke-akzent); background: var(--lke-akzent-ll); } .uw-option input { margin-top: 3px; accent-color: var(--lke-akzent); } .uw-text { display: grid; gap: 3px; } .uw-text strong { font-size: .95rem; } .uw-text span { font-size: .85rem; color: var(--lke-text-leise); line-height: 1.45; } .uw-nachfrage { border-top: 1px dashed var(--lke-linie); padding-top: 14px; margin-top: 2px; } .uw-nachfrage.hidden { display: none; } .uw-schalter { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; } .uw-schalter input { margin-top: 3px; accent-color: var(--lke-akzent); } .uw-schalter > span { display: grid; gap: 3px; } .uw-schalter strong { font-size: .92rem; } .uw-schalter span span { font-size: .84rem; color: var(--lke-text-leise); line-height: 1.45; } /* ---- Weitere Fassungen einer KI-Anweisung ---- Das Plus sitzt rechts in der Titelzeile, unmittelbar links vom Ausklapp-Winkel: dort ist es zu finden, ohne die Zeile zu zerreißen. Damit beides in dieser Reihenfolge steht, wandert der auto-Abstand vom Winkel auf das Plus. */ .lke-plus { margin-left: auto; width: 26px; height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--lke-linie); border-radius: 7px; background: var(--lke-flaeche); color: var(--lke-akzent); font-size: 1.05rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background var(--lke-dauer) var(--lke-kurve), border-color var(--lke-dauer) var(--lke-kurve); } .lke-plus:hover { background: var(--lke-akzent-ll); border-color: var(--lke-akzent); } .lke-prompt > summary:has(.lke-plus)::after { margin-left: 8px; } /* Fassungen als Leseliste: der Standard trägt eine ruhige graue Kante, die eigenen Fassungen die Akzentkante - der Unterschied ist auf einen Blick da, ohne dass er beschriftet werden muss. Der Text steht als Lesesatz, nicht in einem Eingabefeld: bearbeitet wird ausschliesslich im eigenen Fenster. */ .lke-fassungen { display: grid; gap: 10px; } .lke-fassung { border-left: 3px solid var(--lke-akzent); border-radius: 0 var(--lke-radius-klein) var(--lke-radius-klein) 0; background: var(--lke-flaeche-2); padding: 10px 12px; display: grid; gap: 6px; } .lke-fassung.standard { border-left-color: #cfcdc6; } .lkv-kopf { display: flex; align-items: center; gap: 8px; } .lkv-titel { font-size: .95rem; font-weight: 700; flex: 1 1 auto; min-width: 0; } .lkv-hinweis { font-size: .74rem; color: var(--lke-text-leise); text-transform: uppercase; letter-spacing: .05em; } .lkv-text { margin: 0; max-height: 190px; overflow: auto; font: inherit; font-size: .86rem; line-height: 1.5; color: var(--lke-text-leise); white-space: pre-wrap; overflow-wrap: anywhere; } .lke-fassung:not(.standard) .lkv-text { color: var(--lke-text); } .lkv-kopf .lke-knopf svg { margin-right: 4px; vertical-align: -2px; } /* Fenster zum Bearbeiten einer Fassung */ .lkf-zeile { display: flex; align-items: center; gap: 10px; } .lkf-label { flex: 0 0 84px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lke-text-leise); } .lkf-zeile input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: .98rem; font-weight: 600; border: 0; border-bottom: 1px solid var(--lke-linie); background: none; padding: 6px 2px; color: var(--lke-text); border-radius: 0; } .lkf-zeile input:focus { outline: 0; border-bottom-color: var(--lke-akzent); } #lkfText { width: 100%; min-height: 280px; resize: vertical; font: inherit; font-size: .9rem; line-height: 1.55; padding: 12px 14px; border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); background: var(--lke-flaeche); color: var(--lke-text); } #lkfText:focus { outline: 2px solid var(--lke-akzent); outline-offset: 1px; } /* Der Erklärtext ist Beiwerk, nicht Inhalt - er darf den Prompt nicht optisch überstimmen. */ .lke-koerper > .lke-hilfe { color: var(--lke-text-leise); font-size: .84rem; line-height: 1.5; margin: -12px 0 0; } .lkf-werk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lkf-werk input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: .9rem; border: 1px solid var(--lke-linie); border-radius: var(--lke-radius-klein); padding: 7px 10px; background: var(--lke-flaeche); color: var(--lke-text); } .lkf-werk input:focus { outline: 2px solid var(--lke-akzent); outline-offset: 1px; } .lkf-werk .lke-knopf svg { margin-right: 5px; vertical-align: -2px; } .lke-knopf.gefahr { background: #a01c1c; border-color: #a01c1c; color: #fff; }