/* Contest-Logger (AFU-227): Kasten Logbuch der Fernbedienung und /contest-logger. Nur eigene Klassen (cl-), Farben aus
   den Variablen von style.css. Eine große Eingabezeile, darunter Status, F-Tasten, Listen. */
.cl { --cl-dupe: #ef5350; --cl-mult: #c77dff; --cl-neu: #4caf7d; --cl-warn: #e6b84f; display: block; container-type: inline-size; }
.cl .mono, .cl input.mono { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; }

.cl-warnung { background: color-mix(in srgb, var(--cl-warn) 16%, transparent); border: 1px solid var(--cl-warn); color: var(--cl-warn);
  padding: 0.45rem 0.7rem; border-radius: 8px; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.86rem; }

.cl-leiste { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; font-size: 0.84rem; color: var(--muted); margin-bottom: 0.4rem; }
.cl-leiste strong { color: var(--fg); }
.cl-rest { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.cl-rest:empty { display: none; }
/* AFU-249: Check als eine Zeile direkt über der Eingabe; Treffer brechen nicht um (die Eingabe springt beim Tippen nicht),
   was nicht passt, steht als „+n“; rechts Teile der Kopfzeile, die oben keinen Platz mehr haben */
.cl-check-zeile { display: flex; align-items: center; gap: 0.6rem; min-height: 28px; margin: 0 0 0.3rem; }
.cl-check-titel { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
  border-bottom: 1px dotted var(--muted); cursor: help; }
.cl-check-zeile .cl-check { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; flex-wrap: nowrap; align-items: center; gap: 0.6rem; }
.cl-check-zeile .cl-check .field-hint { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-check-zeile .cl-chk[hidden], .cl-check-mehr[hidden] { display: none; }
.cl-check-mehr { flex: none; color: var(--muted); font-size: 0.75rem; font-family: system-ui, sans-serif; cursor: help; }
.cl-rest-unten { font-size: 0.84rem; color: var(--muted); }
/* AFU-235: Contest-Auswahl der Seite vorn in der Leiste, Beschriftung davor; „Normal“ als Symbol hinter der Restzeit */
.cl-vorne { display: inline-flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: center; min-width: 0; }
.cl-vorne[hidden] { display: none; }
.cl-vorne .field { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-width: 0; }
.cl-vorne .field[hidden] { display: none; }
.cl-vorne label { margin: 0; font-size: 0.8rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.cl-vorne select, .cl-vorne input { height: 28px; min-height: 28px; padding: 0 8px; font-size: 0.84rem; min-width: 0; box-sizing: border-box;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; }
.cl-vorne select { max-width: 16rem; font-weight: 600; }
/* AFU-248: das Label „Contest“ der Auswahl vorn nur für Bildschirmleser */
.cl-vorne .field:first-child > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cl-vorne input { width: 10rem; text-transform: uppercase; font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; }
.cl-vorne select:focus, .cl-vorne input:focus { outline: none; border-color: var(--accent); }
.cl-ikon[hidden] { display: none; }
.cl-ikon { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.4rem; color: var(--muted); }
.cl-ikon:hover, .cl-ikon:focus-visible { color: var(--accent); border-color: var(--accent); }
.cl-pill { padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); font-size: 0.75rem; }
.cl-pill.cw { border-color: var(--accent); color: var(--accent); }
.cl-qrg-hand { display: inline-flex; gap: 0.35rem; align-items: center; }
.cl-qrg-hand input, .cl-qrg-hand select { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.2rem 0.4rem; font: inherit; }
.cl-qrg-hand input { width: 6.5rem; text-align: right; }
/* „ich sende …“ als Knopf zum Feld im Einrichten, Hinweis ohne DOK (AFU-231) */
.cl-ich-knopf { font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 6px; padding: 0.1rem 0.35rem;
  cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.25rem; }
.cl-ich-knopf:hover, .cl-ich-knopf:focus-visible { border-color: var(--border); background: var(--bg2); }
.cl-ich-stift { color: var(--muted); font-size: 0.8rem; }
.cl-ich-knopf:hover .cl-ich-stift { color: var(--accent); }
.cl-pill.cl-ohne-dok { border-color: var(--cl-warn); color: var(--cl-warn); font-size: 0.78rem; }
.cl-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font-weight: 600; }
.cl-ich-hinweis.warn { color: var(--cl-warn); }
.cl-k { font: inherit; font-size: 0.8rem; cursor: pointer; background: var(--bg2); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.15rem 0.6rem; }
.cl-k[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
/* AFU-248: Umschalter Run | S&P, aktiver Teil gefüllt */
.cl-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.cl-seg button { font: inherit; font-size: 0.78rem; background: var(--bg2); color: var(--muted); border: 0; padding: 0.12rem 0.5rem; cursor: pointer; }
.cl-seg button + button { border-left: 1px solid var(--border); }
.cl-seg button.an { background: var(--accent); color: #0a0e1f; font-weight: 600; cursor: default; }
.cl-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cl-zeit[title] { border-bottom: 1px dotted var(--muted); cursor: help; }
.cl-zeit[hidden] { display: none; }

.cl-eingabe { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 0.55fr) minmax(0, 0.55fr) auto; gap: 0.4rem; align-items: end; }
.cl-im-edit .cl-eingabe { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) repeat(5, minmax(0, 0.6fr)) auto auto; }
.cl-nur-edit { display: none; }
.cl-im-edit .cl-nur-edit { display: block; }
.cl-f label { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.15rem; }
.cl-f input, .cl-f select { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.35rem 0.5rem; font-size: 1.35rem; font-weight: 600; text-transform: uppercase; height: var(--cl-feld-h); }
.cl-klein input, .cl-klein select { font-size: 1rem; padding: 0.55rem 0.4rem; }
.cl-f input:focus, .cl-f select:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.cl-f input.dupe { border-color: var(--cl-dupe); color: var(--cl-dupe); }
/* AFU-234: Knopf so hoch wie die Felder, auch gegen .rm-ablage .btn (28 px) in der Fernbedienung */
.cl-eingabe { --cl-feld-h: 2.6rem; }
.cl-eingabe .btn.cl-los { white-space: nowrap; height: var(--cl-feld-h); min-height: var(--cl-feld-h); padding: 0 1rem; font-size: 1rem; }
.cl-im-edit .cl-f-ruf input { border-color: var(--accent); }

/* AFU-236: Zeile „Auf der Frequenz“ unter der Eingabe; Farben wie Bandkarte bzw. Status */
.cl-auf-qrg { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--muted); min-height: 1.6rem; }
.cl-auf-qrg[hidden] { display: none; }
.cl-aq-titel { margin-right: 0.2rem; white-space: nowrap; }
.cl-aq { font: 600 0.8rem ui-monospace, "JetBrains Mono", Consolas, monospace; background: var(--bg2); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.1rem 0.45rem; cursor: pointer; display: inline-flex; gap: 0.35rem; align-items: baseline; }
.cl-aq small { font: 400 0.7rem system-ui, sans-serif; color: var(--muted); }
.cl-aq:hover, .cl-aq:focus-visible { border-color: var(--accent); }
.cl-aq.neu { border-color: var(--cl-neu); color: var(--cl-neu); }
.cl-aq.multi { border-color: var(--cl-mult); color: var(--cl-mult); }
.cl-aq.dupe { color: var(--cl-dupe); text-decoration: line-through; opacity: 0.75; }
.cl-aq.jota, .cl-aq.zaehltnicht { color: var(--cl-warn); }
.cl-aq.hier { box-shadow: 0 0 0 1px var(--accent) inset; }
.cl-aq-mehr { font: inherit; color: var(--accent); background: none; border: 0; padding: 0 0.2rem; cursor: pointer; }
.cl-aq-leer { font-style: italic; }
.cl-status { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0; min-height: 1.45rem; }
.cl-st { padding: 0.2rem 0.6rem; border-radius: 6px; font-weight: 600; font-size: 0.8rem; border: 1px solid var(--border); }
.cl-st.dupe { color: var(--cl-dupe); border-color: var(--cl-dupe); background: color-mix(in srgb, var(--cl-dupe) 14%, transparent); }
.cl-st.mult { color: var(--cl-mult); border-color: var(--cl-mult); background: color-mix(in srgb, var(--cl-mult) 14%, transparent); }
.cl-st.neu { color: var(--cl-neu); border-color: var(--cl-neu); background: color-mix(in srgb, var(--cl-neu) 14%, transparent); }
.cl-st.warn { color: var(--cl-warn); border-color: var(--cl-warn); }
.cl-st.info { color: var(--muted); font-weight: 500; }

.cl-fkeys { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.3rem; margin: 0.4rem 0 0.6rem; }
.cl-fk { font: inherit; font-size: 0.78rem; text-align: left; cursor: pointer; background: var(--bg2); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.4rem; min-width: 0; }
/* AFU-247: vorn am Knopf nur die belegte Taste (kein festes „F1“ mehr daneben); Kasten „Tasten“ unter Einrichten */
.cl-fk { position: relative; }
.cl-fk-taste { font: 600 0.72rem ui-monospace, Consolas, monospace; color: var(--accent); margin-right: 0.3rem;
  border: 1px solid var(--border); border-radius: 4px; padding: 0 0.25rem; line-height: 1.3; }
.cl-fk-taste.leer { color: var(--muted); font-weight: 400; }
.cl-speicher { white-space: nowrap; }
.cl-speicher .cl-kb { min-width: 4.5rem; font-size: 0.72rem; padding: 0.05rem 0.35rem; }
.cl-speicher-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.5rem; font-size: 0.85rem; }
.cl-tasten td { vertical-align: middle; white-space: nowrap; padding-top: 0.2rem; padding-bottom: 0.2rem; }
.cl-tasten .btn-sm { min-height: 0; height: auto; padding: 0.08rem 0.6rem; font-size: 0.78rem; line-height: 1.4; }
.cl-kb { display: inline-block; min-width: 6.5rem; text-align: center; font: 600 0.78rem ui-monospace, Consolas, monospace; color: var(--fg);
  border: 1px solid var(--border); background: var(--bg2); border-radius: 6px; padding: 0.12rem 0.45rem; }
.cl-kb.leer { color: var(--muted); font-weight: 400; font-style: italic; }
.cl-kb.hoert { border-color: var(--accent); color: var(--accent); animation: cl-hoert 1s infinite; }
@keyframes cl-hoert { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .cl-kb.hoert { animation: none; } }
.cl-kb-weg { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 0.3rem; }
.cl-kb-weg:hover { color: var(--cl-dupe); }
.cl-hilfe kbd + .cl-link, .cl-hilfe .cl-link { font-weight: 600; }
.cl-fk small { display: block; color: var(--muted); font-family: ui-monospace, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-fk.sendet { background: color-mix(in srgb, var(--cl-dupe) 22%, var(--bg2)); border-color: var(--cl-dupe); }
.cl-fk:disabled { opacity: 0.45; cursor: default; }
/* AFU-232: Sprachtexte in SSB/FM: leere Taste blass, laufender Text rot mit Fortschritt, darunter Auto-CQ */
.cl-fkeys:has(.cl-fk-tasten) { display: block; }
.cl-fk-tasten { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.3rem; }
.cl-fk.leer { opacity: 0.55; }
.cl-fk-bar { display: block; height: 3px; margin-top: 0.2rem; background: color-mix(in srgb, var(--cl-dupe) 25%, transparent); border-radius: 2px; overflow: hidden; }
.cl-fk-bar > span { display: block; height: 100%; width: 0; background: var(--cl-dupe); }
.cl-fk-hilfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.35rem 0 0; }
.cl-fk-hilfe .cl-ankreuz { margin: 0; }
.cl-autocq-s { width: 3.6rem; }
.cl table.cl-ssb input, .cl table.cl-ssb select { width: 100%; box-sizing: border-box; }
.ssp-rec { color: var(--cl-dupe, #ef5350); }
.ssp-rec.laeuft { background: color-mix(in srgb, #ef5350 20%, var(--bg2)); border-color: #ef5350; }
.ssp-titel { margin: 0.8rem 0 0.4rem; }
.ssp-dialog { width: min(760px, 94vw); max-height: 90vh; overflow-y: auto; }
.ssp-welle { display: block; width: 100%; height: 90px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: ew-resize; touch-action: none; }
.ssp-pegel { height: 5px; margin: 0.3rem 0; background: var(--bg); border-radius: 3px; overflow: hidden; }
.ssp-pegel > div { height: 100%; width: 0; background: linear-gradient(90deg, #4caf7d 0 70%, #e6b84f 70% 90%, #ef5350 90%); background-size: 100% 100%; transition: width 80ms linear; }
.ssp-zeit { margin: 0.3rem 0; }

.cl-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.6rem; }
.cl-rechts { display: grid; gap: 0.6rem; align-content: start; }
.cl-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 9px; padding: 0.45rem 0.6rem; min-width: 0; }
.cl h4 { margin: 0 0 0.35rem; font-size: 0.76rem; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; gap: 0.5rem;
  text-transform: uppercase; letter-spacing: 0.03em; }
.cl h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cl table.data.cl-tab-klein { font-size: 0.8rem; width: 100%; }
.cl table.data.cl-tab-klein td, .cl table.data.cl-tab-klein th { padding: 0.15rem 0.35rem; }
.cl table.data tr.dupe td { color: var(--cl-dupe); text-decoration: line-through; }
.cl table.data tr.dupe td:last-child, .cl table.data tr.dupe td.cl-multi { text-decoration: none; }
.cl table.data tr.zaehltnicht td { color: var(--muted); }
.cl table.data tr.edit td { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cl table.data tr.cur td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cl-multi { color: var(--cl-mult); white-space: nowrap; }
.cl .cl-stift { padding: 0; min-height: 0; width: 1.6rem; height: 1.6rem; line-height: 1; border-radius: 6px; font-size: 0.85rem; }
/* AFU-245: Stift und Papierkorb nebeneinander, Löschen im Korrekturmodus neben Speichern */
.cl td.cl-knoepfe { white-space: nowrap; }
.cl td.cl-knoepfe .cl-stift + .cl-stift { margin-left: 0.25rem; }
/* AFU-253: Stand als Symbol vor Stift und Papierkorb, alles in einer Zeile (.cl-knoepfe unten ist flex mit Umbruch) */
.cl table.data td.cl-knoepfe { display: table-cell; text-align: right; vertical-align: middle; }
.cl td.cl-knoepfe > * { vertical-align: middle; }
.cl td.cl-knoepfe > * + * { margin-left: 0.25rem; }
.cl td .cl-stand, .cl .cl-platz { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; }
.cl td .cl-stand svg { width: 1.05rem; height: 1.05rem; }
.cl .cl-stand-text { width: auto; font-size: 0.72rem; color: var(--muted); }
.cl table.data tr.dupe td .cl-stand-text { text-decoration: none; }
.cl-stand-uebertragen, .cl-stand-gespeichert { color: var(--cl-neu); }
.cl-stand-lokal, .cl-stand-ohne_konto { color: var(--muted); }
.cl-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cl .cl-weg-k svg { width: 0.95rem; height: 0.95rem; }
.cl-im-edit .cl-nur-edit.cl-weg { display: inline-flex; }
.cl-ankreuz { align-self: center; font-size: 0.86rem; }
.cl-stand-wartet { color: var(--cl-warn); }
.cl-stand-fehler { color: var(--cl-dupe); }
.cl-stand-zeile { display: flex; justify-content: space-between; align-items: end; gap: 0.5rem; font-size: 0.82rem; }
.cl-stand-zeile > div:last-child { text-align: right; }
.cl-gross { font-size: 1.7rem; font-weight: 700; color: var(--fg); }
.cl-check { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.95rem; }
.cl-chk { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: var(--fg); }
.cl-chk.log { color: var(--cl-warn); }
.cl-chk.liste { color: var(--muted); }
.cl-chk:hover { text-decoration: underline; }
.cl-check-zeile .cl-chk { flex: none; font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; font-size: 0.95rem; }

.cl-reiter { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--border); margin: 0.8rem 0 0.5rem; }
.cl-tab { font: inherit; font-size: 0.84rem; cursor: pointer; padding: 0.35rem 0.8rem; margin-bottom: -1px; border: 1px solid transparent;
  border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--muted); }
.cl-tab[aria-selected="true"] { color: var(--fg); font-weight: 600; background: var(--bg2); border-color: var(--border); border-bottom: 1px solid var(--bg2); }
/* Betriebsart der Bandkarte (AFU-230): Segmentleiste nach der Designrichtlinie (28 px, Radius 8, aktiv gefüllt) */
.cl-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 0.5rem; font-size: 0.8rem; }
.cl-karte-titel { color: var(--muted); }
.cl-karte-aus { color: var(--muted); }
.cl-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cl-seg > button { font: inherit; font-size: 0.8rem; height: 28px; padding: 0 0.7rem; cursor: pointer; background: transparent; color: var(--fg);
  border: 0; border-left: 1px solid var(--border); }
.cl-seg > button:first-child { border-left: 0; }
.cl-seg > button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cl-seg > button.on { background: var(--accent); color: #fff; }
.cl-seg > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.cl-spot-unbekannt { margin-left: 0.35rem; color: var(--muted); font-size: 0.75rem; }
.cl-karte { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.15rem 0.6rem; font-size: 0.84rem; }
.cl-spot { font: inherit; display: flex; justify-content: space-between; gap: 0.5rem; cursor: pointer; background: none; color: var(--fg);
  border: 1px solid transparent; border-radius: 4px; padding: 0.1rem 0.35rem; text-align: left; }
.cl-spot:hover { border-color: var(--border); }
.cl-spot.multi { color: var(--cl-mult); }
.cl-spot.dupe { color: var(--muted); text-decoration: line-through; }
.cl-spot.jota, .cl-spot.zaehltnicht { color: var(--cl-warn); }
.cl-spot.cur, .cl-spot.wahl { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cl-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.cl table.cl-cw input { width: 100%; box-sizing: border-box; }
.cl-knoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.cl-hilfe { font-size: 0.75rem; color: var(--muted); margin: 0.6rem 0 0; line-height: 1.7; }
.cl-hilfe kbd { font-family: ui-monospace, Consolas, monospace; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 0 0.3rem; color: var(--fg); }

/* nach der Breite des Kastens, nicht des Fensters: in der Fernbedienung liegt der Logger auch in einer schmalen Ablage */
@container (max-width: 860px) {
  .cl-raster, .cl-zwei { grid-template-columns: minmax(0, 1fr); }
  .cl-fkeys, .cl-fk-tasten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
  .cl-eingabe, .cl-im-edit .cl-eingabe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-f-ruf, .cl-f-aus { grid-column: 1 / -1; }
  .cl-im-edit .cl-f-ruf, .cl-im-edit .cl-f-aus { grid-column: auto / span 3; }
  .cl-los { grid-column: 1 / -1; }
  .cl-fk small { display: none; }
}

/* AFU-243: Zeile „Gehört (Decoder)“ und Herkunft des Austauschs */
.cl-aq.unsicher { opacity: 0.6; font-style: italic; }
.cl-aq.vorschlag { border-style: dashed; }
.cl-f-aus { position: relative; }
.cl-aus-quelle { position: absolute; top: 0; right: 0; font-size: 0.7rem; font-weight: 600; color: var(--cl-neu); }
.cl-aus-quelle[hidden] { display: none; }

/* AFU-254: Einrichten & Export in Unterreitern, dicht (Felder 24 px, Zeilen ~26 px; schmal 32 px) */
.cl-ut { display: flex; gap: 2px; margin: 0 0 0.45rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; }
.cl-ut-k { font: inherit; font-size: 0.78rem; white-space: nowrap; cursor: pointer; background: none; color: var(--muted); border: 0;
  border-bottom: 2px solid transparent; padding: 0.25rem 0.65rem; }
.cl-ut-k:hover { color: var(--fg); }
.cl-ut-k[aria-selected="true"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.cl-ut-k:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cl-ut-k small { margin-left: 0.25rem; color: var(--muted); font-weight: 400; }
.cl-ut-k small:empty { display: none; }
.cl-einr { --cl-einr-h: 24px; }
.cl-einr input:not([type="checkbox"]):not([type="radio"]), .cl-einr select, .cl-einr textarea {
  height: var(--cl-einr-h); min-height: var(--cl-einr-h); padding: 0 0.4rem; font-size: 0.82rem; box-sizing: border-box; border-radius: 5px; }
.cl-einr textarea { padding: 0.15rem 0.4rem; resize: vertical; line-height: 1.3; }
/* gegen die Feldhöhe aus style.css (2,45 rem für .field input/select) */
.cl .cl-einr .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .cl .cl-einr .field select {
  height: var(--cl-einr-h); min-height: var(--cl-einr-h); line-height: 1.2; min-width: 0; font-size: 0.82rem; padding: 0 0.4rem; border-radius: 5px; }
.cl .cl-einr .btn, .cl .cl-einr .btn-sm { height: var(--cl-einr-h); min-height: var(--cl-einr-h); padding: 0 0.6rem; font-size: 0.78rem; line-height: 1; }
.cl-einr .field { margin: 0; min-width: 0; }
.cl-einr .field > label { font-size: 0.66rem; margin-bottom: 2px; }
.cl-einr .field-hint { font-size: 0.72rem; margin: 0.3rem 0 0; }
.cl-einr .field-hint:empty { display: none; }
.cl-einr table.data.cl-tab-klein td { padding: 1px 0.3rem; vertical-align: middle; }
/* gegen table.data td input/select aus style.css (Polster 0,4 rem 0,6 rem, Radius 9) */
.cl .cl-einr table.data td input:not([type="checkbox"]):not([type="radio"]), .cl .cl-einr table.data td select {
  display: block; height: var(--cl-einr-h); min-height: var(--cl-einr-h); padding: 0 0.4rem; font-size: 0.82rem; border-radius: 5px; line-height: 1.2; }
.cl-einr table.data td { line-height: 1.2; }
.cl-einr table.data.cl-tab-klein th { padding: 2px 0.3rem; font-size: 0.64rem; }
.cl-einr-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.cl-einr-hinweis > span { flex: 1 1 14rem; min-width: 0; }
.cl-einr-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.6rem; margin: 0 0 0.35rem; }
/* Contest & Export */
.cl-einr-reihe { display: grid; grid-template-columns: 11rem 15rem minmax(0, 1fr); gap: 0.4rem 0.6rem; align-items: end; }
.cl-einr-reihe input, .cl-einr-reihe select, .cl-einr-reihe textarea { width: 100%; }
.cl-einr-ank { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0.4rem 0 0; }
.cl-einr .cl-ankreuz { font-size: 0.82rem; }
.cl-export { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.cl-export h5 { margin: 0 0.4rem 0 0; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
/* Speichertabellen: Nummer und Taste schmal, Name 30 % */
.cl-einr .cl-speicher { width: 1%; }
.cl-einr .cl-speicher .cl-kb { min-width: 3.6rem; font-size: 0.7rem; padding: 0 0.3rem; border-radius: 4px; color: var(--accent); background: none; }
.cl-einr .cl-speicher .cl-kb.leer { color: var(--muted); }
.cl-einr td.cl-name { width: 30%; }
.cl-einr table.cl-ssb td:last-child { width: 1%; white-space: nowrap; }
.cl-einr table.cl-ssb .knopfreihe { flex-wrap: nowrap; gap: 0.25rem; justify-content: flex-end; }
/* Tasten: zwei gleich lange Tabellen, ab 700 px nebeneinander */
.cl-tasten-tabelle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.1rem; }
.cl-tasten td { white-space: nowrap; }
.cl-tasten td:first-child { white-space: normal; line-height: 1.2; }
.cl .cl-einr .cl-tasten .btn-sm { height: 20px; min-height: 20px; padding: 0 0.4rem; font-size: 0.72rem; }
.cl-einr .cl-tasten .cl-kb { min-width: 3.6rem; font-size: 0.7rem; padding: 0 0.25rem; border-radius: 4px; }
.cl-einr .cl-tasten .cl-kb-weg { padding: 0 0.15rem; font-size: 0.9rem; }
.cl-einr .cl-tasten .field-hint { font-size: 0.68rem; }
.cl-speicher-reihe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.8rem; }
.cl-einr .cl-seg > button { height: var(--cl-einr-h); font-size: 0.76rem; padding: 0 0.6rem; }
.cl-mehr { margin: 0.25rem 0 0; font-size: 0.74rem; }
.cl-mehr summary { cursor: pointer; color: var(--accent); width: max-content; }
/* Auf der Frequenz: vier Felder in einer Reihe */
.cl-aq-felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem 0.7rem; max-width: 42rem; }
.cl-aq-zeile > div { display: flex; align-items: center; gap: 0.3rem; }
.cl-aq-zeile input { width: 4.5rem; text-align: right; }
.cl-aq-zeile span { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
/* Meine Aufnahmen (sprachspeicher.js) nur hier dichter */
.cl-einr .cl-ssp .ssp-titel { margin: 0 0 0.3rem; }
.cl .cl-einr .cl-ssp .ssp-liste .btn-sm { width: var(--cl-einr-h); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.cl-einr .cl-ssp .ssp-liste .btn-sm svg { width: 0.85rem; height: 0.85rem; }
.cl-einr .cl-ssp .ssp-liste .knopfreihe { flex-wrap: nowrap; gap: 0.25rem; justify-content: flex-end; }
.cl-einr .cl-ssp .ssp-knoepfe { margin: 0.35rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cl-einr .cl-ssp .tabellen-fuss { padding: 0.2rem 0.4rem; margin: 0; font-size: 0.75rem; }
.cl-einr .cl-ssp .tabellen-fuss select { width: auto; }
@container (max-width: 700px) {
  .cl-einr { --cl-einr-h: 32px; }
  .cl-einr-reihe { grid-template-columns: minmax(0, 1fr); }
  .cl-aq-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cl-tasten-tabelle { grid-template-columns: minmax(0, 1fr); }
  .cl-tasten-tabelle table + table thead { display: none; }
  .cl-einr .cl-speicher .cl-kb { display: none; }
  .cl .cl-einr .cl-tasten .btn-sm { height: 28px; min-height: 28px; }
  .cl-einr .cl-tasten td { white-space: normal; }
  .cl-einr .cl-tasten td:first-child { min-width: 5.5rem; }
  .cl-einr .cl-tasten .cl-kb { min-width: 0; }
  .cl-einr .ssp-liste th:nth-child(3), .cl-einr .ssp-liste td:nth-child(3) { display: none; }
}

/* AFU-279: Notiz zum Band, Antenne, Rotor */
.cl-bandzeile .cl-bandnotiz { color: var(--fg); font-weight: 600; }
.cl-bandzeile .cl-ant { font-size: 0.78rem; padding: 0.1rem 0.3rem; }
.cl-bandzeile .cl-aq-titel:not(:first-child) { margin-left: 0.6rem; }

/* AFU-285: SO2V, die zweite Zeile */
.cl-vfob .cl-pill.sp { border-color: var(--cl-warn); color: var(--cl-warn); }

/* AFU-286: Mitschnitt */
.cl-mitschnitt[hidden] { display: none; }
.cl-mitschnitt.an { color: var(--cl-warn); border-color: var(--cl-warn); }
.cl-hoeren { font-size: 0.7rem; }