/* FT8-Horch: Material-3-Oberfläche mit eigenem CSS. Farbrollen stehen in farben.css (erzeugt). */
@import url("farben.css");

@font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url("fonts/roboto-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url("fonts/roboto-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-weight: 500; font-display: swap; src: url("fonts/roboto-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 500; font-display: swap; src: url("fonts/roboto-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-weight: 700; font-display: swap; src: url("fonts/roboto-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat Alt1"; font-weight: 500; font-display: swap; src: url("fonts/MontserratAlt1-Medium.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-weight: 400; font-display: swap; src: url("fonts/roboto-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-weight: 500; font-display: swap; src: url("fonts/roboto-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --font: Roboto, system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
  /* Formskala */
  --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-xl: 28px; --shape-full: 999px;
  /* Statusfarben außerhalb der M3-Rollen, immer mit Text beschriftet */
  --ok: #1b7f3b; --warn: #8a5300; --warn-bg: #ffddb0;
  --dauer: 200ms;
}
:root { --serie-1: #0072b2; --serie-2: #c2410c; --serie-3: #00785a; --serie-4: #7a5f00; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --ok: #7bd88f; --serie-1: #56b4e9; --serie-2: #e69f00; --serie-3: #4fd1a5; --serie-4: #f0e442; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok: #7bd88f; --serie-1: #56b4e9; --serie-2: #e69f00; --serie-3: #4fd1a5; --serie-4: #f0e442; } }
@media (prefers-reduced-motion: reduce) { :root { --dauer: 0ms; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 400 16px/24px var(--font); color: var(--md-on-surface); background: var(--md-surface); -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* Typoskala */
.title-lg { font: 400 22px/28px var(--font); }
.title-md { font: 500 16px/24px var(--font); letter-spacing: .15px; }
.label-lg { font: 500 14px/20px var(--font); letter-spacing: .1px; }
.body-sm { font: 400 12px/16px var(--font); }
.mono { font-family: var(--font-mono); }

.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* Gerüst: Kopfzeile, Inhalt, Navigation Bar (kompakt) oder Rail (ab 600 px) */
#app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; height: 100%; }
#kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 8px 16px 8px 16px; background: var(--md-surface); min-height: 64px; }
#kopf .kopfblock { flex: 1 1 auto; min-width: 0; }
#kopf h1 { margin: 0; white-space: nowrap; font-family: "Montserrat Alt1", var(--font); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 479px) { #kopf h1 { font-size: 16px; letter-spacing: .06em; } }
#uhr { font: 500 14px/20px var(--font-mono); color: var(--md-on-surface-variant); white-space: nowrap; }
#uhr { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
#uhr #uhrDiff { font-size: .85em; opacity: .85; }
#uhrZeit::before { content: "UTC "; }
main { overflow: auto; padding: 0 16px 16px; }
.tab { display: none; max-width: 960px; margin: 0 auto; }
.tab.aktiv { display: block; }

nav#nav { display: flex; background: var(--md-surface-container); padding: 8px 4px 12px; gap: 0; }
nav#nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--md-on-surface-variant); font: 500 12px/16px var(--font); cursor: pointer; min-height: 48px; }
nav#nav .pille { width: 64px; height: 32px; border-radius: var(--shape-full); display: grid; place-items: center; transition: background var(--dauer); }
nav#nav button[aria-current="page"] { color: var(--md-on-surface); }
nav#nav button[aria-current="page"] .pille { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
@media (min-width: 600px) {
  #app { grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  #kopf { grid-column: 1 / 3; }
  nav#nav { grid-row: 2; grid-column: 1; flex-direction: column; justify-content: flex-start; padding: 8px 0; gap: 12px; }
  nav#nav button { flex: none; }
  main { grid-row: 2; grid-column: 2; }
}

/* Schaltflächen */
.btn { font: 500 14px/20px var(--font); min-height: 48px; padding: 0 24px; border-radius: var(--shape-full); border: 1px solid var(--md-outline); background: none; color: var(--md-primary-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.filled { background: var(--md-primary); color: var(--md-on-primary); border-color: transparent; }
.btn.tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.btn.text { border-color: transparent; padding: 0 12px; }
.btn:disabled { opacity: .38; cursor: default; }
.icon-btn { width: 48px; height: 48px; border-radius: var(--shape-full); border: 0; background: none; color: var(--md-on-surface-variant); display: grid; place-items: center; cursor: pointer; }
:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

/* Chip */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: var(--shape-sm); border: 1px solid var(--md-outline); background: none; color: var(--md-on-surface-variant); font: 500 14px/20px var(--font); cursor: pointer; }

/* Karten */
.card { background: var(--md-surface-container-low); border-radius: var(--shape-md); padding: 16px; margin-top: 12px; }
.card h2 { margin: 0 0 8px; }
.hint { color: var(--md-on-surface-variant); }

/* Eingabefelder (outlined) */
.feld { display: block; position: relative; margin-top: 12px; }
.feld > span { position: absolute; left: 12px; top: -8px; padding: 0 4px; background: var(--md-surface-container-low); font: 400 12px/16px var(--font); color: var(--md-on-surface-variant); z-index: 1; }
dialog .feld > span { background: var(--md-surface-container-high); }
.feld input, .feld select { width: 100%; min-height: 56px; padding: 0 16px; font: 400 16px/24px var(--font); color: var(--md-on-surface); background: none; border: 1px solid var(--md-outline); border-radius: var(--shape-xs); }
.feld input:focus, .feld select:focus { outline: 2px solid var(--md-primary); border-color: var(--md-primary); }
.feld select { background: var(--md-surface-container-low); }
dialog .feld select { background: var(--md-surface-container-high); }
.reihe { display: flex; gap: 12px; flex-wrap: wrap; }
.reihe > * { flex: 1 1 120px; }

/* Segmented Buttons */
.segmente { display: flex; margin-top: 12px; }
.segmente button { flex: 1; min-height: 48px; border: 1px solid var(--md-outline); background: none; color: var(--md-on-surface); font: 500 14px/20px var(--font); cursor: pointer; margin-left: -1px; }
.segmente button:first-child { border-radius: var(--shape-full) 0 0 var(--shape-full); margin-left: 0; }
.segmente button:last-child { border-radius: 0 var(--shape-full) var(--shape-full) 0; }
.segmente button[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* Dialog und Bottom Sheet */
dialog { border: 0; padding: 0; color: var(--md-on-surface); background: var(--md-surface-container-high); border-radius: var(--shape-xl); max-width: min(560px, calc(100vw - 32px)); width: 100%; }
dialog::backdrop { background: rgb(0 0 0 / .4); }
dialog .inhalt { padding: 24px; }
dialog .aktionen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
dialog.sheet { margin: auto auto 0; max-width: 640px; border-radius: var(--shape-xl) var(--shape-xl) 0 0; }

/* Snackbar und Warnband */
#snackbar { position: fixed; left: 16px; right: 16px; bottom: 96px; max-width: 560px; margin: 0 auto; padding: 14px 16px; border-radius: var(--shape-xs); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font: 400 14px/20px var(--font); opacity: 0; pointer-events: none; transition: opacity var(--dauer); z-index: 10; }
#snackbar.zeigen { opacity: 1; }
.warnband { background: var(--warn-bg); color: var(--warn); border-radius: var(--shape-sm); padding: 8px 12px; margin-top: 8px; }
.warnband:empty { display: none; }

/* QSO-Ansicht */
.status { color: var(--md-on-surface-variant); margin-top: 8px; }
.pegel { height: 6px; background: var(--md-surface-container-highest); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.pegel > div { height: 100%; width: 0; background: var(--ok); }
.pegel > div.uebersteuert { background: var(--md-error); }
.wasserfall { position: relative; margin-top: 12px; }
.wasserfall canvas { display: block; width: 100%; height: 220px; border-radius: var(--shape-md); }
.wasserfall canvas + canvas { position: absolute; left: 0; top: 0; touch-action: pan-y; }
.liste { font: 400 13px/20px var(--font-mono); background: var(--md-surface-container-low); border-radius: var(--shape-md); max-height: 240px; overflow: auto; }
.liste > div { padding: 6px 12px; border-bottom: 1px solid var(--md-outline-variant); white-space: pre-wrap; word-break: break-word; }
.liste .cq { cursor: pointer; border-left: 4px solid var(--ok); }
.liste .anmich { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 500; }
.liste .tx { background: var(--md-primary-container); color: var(--md-on-primary-container); border-left: 4px solid var(--md-primary-text); }
.liste .info { color: var(--md-on-surface-variant); }
.aktionsleiste { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
@media (min-width: 840px) {
  #qso-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* Log */
.logliste { max-height: none; }
.logzeile { display: flex; align-items: center; gap: 8px; }
.logzeile .text { flex: 1; min-width: 0; }
.logzeile .icon-btn { width: 40px; height: 40px; }
.logzeile .klein { color: var(--md-on-surface-variant); font-size: 12px; }
.logzeile .icon-btn + .icon-btn { margin-left: -8px; }
.liste .info { padding: 12px; }
input[type="search"], input[type="date"] { -webkit-appearance: none; appearance: none; }
.feld input[type="date"] { min-width: 0; }

/* Labor */
.messblock { margin-top: 8px; }
.messzeile { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--md-outline-variant); }
.messzeile span:last-child { text-align: right; word-break: break-word; }
.urteil { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 16px; border-radius: var(--shape-md); background: var(--md-surface-container-high); }
.urteil.ok { border-left: 4px solid var(--ok); }
.urteil.ok .icon { color: var(--ok); }
.urteil.warn { background: var(--warn-bg); color: var(--warn); }
.diagramm canvas { width: 100%; height: 280px; max-width: 720px; display: block; margin-top: 12px; }
.tabelle { width: 100%; border-collapse: collapse; font: 400 13px/20px var(--font-mono); margin-top: 8px; }
.tabelle th, .tabelle td { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--md-outline-variant); }
.tabelle th:first-child, .tabelle td:first-child { text-align: left; }

/* Codierung */
details.karte { background: var(--md-surface-container-low); border-radius: var(--shape-md); margin-top: 12px; padding: 0 16px; }
details.karte > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; }
details.karte > summary::-webkit-details-marker { display: none; }
details.karte > summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--md-on-surface-variant); border-bottom: 2px solid var(--md-on-surface-variant); transform: rotate(45deg); transition: transform var(--dauer); }
details.karte[open] > summary::after { transform: rotate(-135deg); }
details.karte .nr { flex: none; width: 28px; height: 28px; border-radius: var(--shape-full); background: var(--md-primary); color: var(--md-on-primary); display: grid; place-items: center; font: 500 14px/20px var(--font); }
details.karte > p { margin: 0 0 8px; }
.karteninhalt { padding-bottom: 16px; }
.zeile { margin: 8px 0 4px; }
.klein { font: 400 12px/16px var(--font); color: var(--md-on-surface-variant); margin: 4px 0; }
.chips, .bloecke { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.feldchip, .feldblock { border-radius: var(--shape-sm); background: var(--md-surface-container-high); padding: 8px 12px; border-top: 4px solid var(--serie-1); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feldchip { flex-direction: row; align-items: baseline; gap: 8px; }
.feldblock .kopf { font: 500 14px/20px var(--font); }
.feldblock .bits { font: 400 14px/20px var(--font-mono); word-break: break-all; }
.f0 { border-top-color: var(--serie-1); } .f1 { border-top-color: var(--serie-2); } .f2 { border-top-color: var(--serie-3); }
.f3 { border-top-color: var(--serie-4); } .f4 { border-top-color: var(--md-primary-text); } .f5 { border-top-color: var(--md-outline); }
.bits { font: 400 14px/20px var(--font-mono); word-break: break-all; margin: 4px 0; }
.chip.kleinchip { min-height: 0; padding: 2px 8px; font-size: 12px; cursor: default; border-radius: var(--shape-xs); }
.abschnitt { font: 500 12px/16px var(--font); margin: 12px 0 4px; color: var(--md-on-surface-variant); }
.zellen { display: flex; flex-wrap: wrap; gap: 2px; }
.zelle { width: 22px; height: 24px; border-radius: 3px; border: 1px solid var(--md-outline-variant); background: var(--md-surface-container-high); color: var(--md-on-surface); font: 400 12px/22px var(--font-mono); text-align: center; padding: 0; }
.zelle.crc { border-bottom: 3px solid var(--serie-2); } .zelle.parity { border-bottom: 3px solid var(--serie-3); } .zelle.nutz { border-bottom: 3px solid var(--serie-1); }
button.zelle { cursor: pointer; }
button.zelle[aria-pressed="true"] { background: var(--md-primary); color: var(--md-on-primary); outline: 2px solid var(--md-primary-text); text-decoration: line-through; }
.fehlerbox .feld { margin: 0; flex: 0 1 170px; min-width: 130px; }
.balkenzeile { display: flex; align-items: center; gap: 8px; }
.balkenzeile > span:first-child { width: 40px; flex: none; }
.balkenzeile > span:last-child { width: 28px; text-align: right; flex: none; }
.balken { flex: 1; height: 10px; background: var(--md-surface-container-highest); border-radius: 5px; overflow: hidden; }
.balken .fuellung { display: block; height: 100%; background: var(--md-primary-text); }
.scrollx { overflow-x: auto; margin-top: 8px; }
.scrollx canvas { display: block; }
#codSpektro { max-width: 360px; }
.klein.mono { word-break: break-all; }
details.mehr { margin: 4px 0 8px; }
details.mehr > summary { cursor: pointer; color: var(--md-primary-text); min-height: 40px; display: flex; align-items: center; }
details.mehr > p { margin: 8px 0; max-width: 62ch; }
@media (max-width: 400px) { #kopf { padding-left: 12px; } #kopf h1 { font-size: 15px; line-height: 24px; letter-spacing: .06em; } #kopf .chip { padding: 0 10px; font-size: 13px; } }
/* Navigation: aktiver Eintrag mit einer Fläche um Symbol und Schrift */
nav#nav button { padding: 8px 4px; border-radius: var(--shape-lg); gap: 2px; transition: background var(--dauer); }
nav#nav button[aria-current="page"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
nav#nav button[aria-current="page"] .pille { background: none; color: inherit; }
nav#nav .pille { height: 28px; }
@media (min-width: 600px) { nav#nav button { width: 64px; margin: 0 auto; } }
/* Hilfe und Über */
.md { max-width: 62ch; }
.md h1, .md h2, .md h3 { font-family: var(--font); scroll-margin-top: 8px; }
.md h1 { font: 400 28px/36px var(--font); margin: 16px 0 8px; }
.md h2 { font: 400 22px/28px var(--font); margin: 24px 0 8px; }
.md h3 { font: 500 16px/24px var(--font); margin: 16px 0 4px; }
.md p, .md li { margin: 8px 0; }
.md code { font-family: var(--font-mono); font-size: 13px; background: var(--md-surface-container-high); padding: 1px 4px; border-radius: var(--shape-xs); }
.md pre { background: var(--md-surface-container-high); padding: 12px; border-radius: var(--shape-sm); overflow: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 8px 0; padding: 0 16px; border-left: 4px solid var(--md-outline-variant); color: var(--md-on-surface-variant); }
.md table { border-collapse: collapse; margin: 8px 0; display: block; overflow-x: auto; }
.md th, .md td { border-bottom: 1px solid var(--md-outline-variant); padding: 6px 10px; text-align: left; }
.md a, dialog a { color: var(--md-primary-text); }
.md hr { border: 0; border-top: 1px solid var(--md-outline-variant); margin: 16px 0; }
#hilfeNav ul { list-style: none; margin: 8px 0 0; padding: 0; }
#hilfeNav li { margin: 0; }
#hilfeNav a { display: block; padding: 10px 4px; color: var(--md-primary-text); text-decoration: none; min-height: 44px; }
#hilfeNav li.e3 a { padding-left: 20px; }
dialog .inhalt.scroll { max-height: 80vh; overflow: auto; }
dialog h3.abschn { margin: 20px 0 4px; }
/* Sieben Einträge: vier Ziele, Trenner, Hilfe, Über, Einstellungen */
nav#nav button { min-width: 0; font-size: 11px; white-space: nowrap; letter-spacing: 0; }
nav#nav .trenner { flex: none; width: 1px; margin: 10px 4px; background: var(--md-outline-variant); }
nav#nav .pille { width: 100%; max-width: 56px; }
@media (max-width: 400px) { nav#nav button { font-size: 10px; } nav#nav .trenner { margin: 10px 2px; } }
@media (min-width: 600px) {
  nav#nav .trenner { width: 40px; height: 1px; margin: auto auto 4px; }
  nav#nav .pille { width: 64px; }
  nav#nav button.aktion + button.aktion { margin-top: 0; }
}
nav#nav .kurz { display: none; }
@media (max-width: 479px) { nav#nav .voll { display: none; } nav#nav .kurz { display: inline; } }
@media (max-width: 340px) { nav#nav button { font-size: 9px; } }
@media (min-width: 600px) { nav#nav button { width: 72px; } nav#nav .pille { width: 64px; } }
@media (max-width: 400px) { #uhr { font-size: 13px; } }
@media (max-width: 439px) { #uhrZeit::before { content: none; } }
.seitentitel { margin: 4px 0 8px; }
.card h3.title-md { margin: 0 0 8px; }
.card .warnband { margin-top: 12px; }
.liste > div.mitknopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.liste > div.mitknopf > span { min-width: 0; white-space: pre-wrap; word-break: break-word; }
.icon-btn.klein { width: 40px; height: 40px; flex: none; margin: -6px -6px -6px 0; color: inherit; }
.zelle.llr0 { background: color-mix(in srgb, var(--serie-1) calc(15% + var(--s, 0) * 85%), var(--md-surface-container-high)); }
.zelle.llr1 { background: color-mix(in srgb, var(--serie-2) calc(15% + var(--s, 0) * 85%), var(--md-surface-container-high)); }
.zelle.llr0, .zelle.llr1 { border-bottom-width: 1px; color: var(--md-on-surface); }
.zelle.fix { outline: 2px solid var(--md-primary-text); outline-offset: 0; font-weight: 700; }
.locator-zeile { display: flex; align-items: center; gap: 8px; }
.locator-zeile .feld { flex: 1; min-width: 0; }
.locator-zeile .btn { flex: none; min-height: 56px; margin-top: 12px; }
@media (max-width: 479px) { .locator-zeile .btn-text { display: none; } .locator-zeile .btn { padding: 0 16px; } }
/* App-Logo in der Kopfzeile und auf der Über-Seite */
.app-logo { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.ueber-logo { display: flex; justify-content: center; margin: 4px 0 12px; }
.ueber-logo img { width: 96px; height: 96px; border-radius: 22px; }
@media (max-width: 400px) { .app-logo { width: 36px; height: 36px; border-radius: 8px; } }
@media (max-width: 339px) { #titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.md figure { margin: 16px 0; }
.md img { display: block; max-width: 100%; height: auto; border-radius: var(--shape-md); border: 1px solid var(--md-outline-variant); }
.md figcaption { margin-top: 6px; color: var(--md-on-surface-variant); font: 400 13px/18px var(--font); }
#profilChip { margin-left: auto; }
#kopf { row-gap: 0; }
.installband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 8px; padding: 12px 16px; border-radius: var(--shape-md); background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.installband[hidden] { display: none; }
.installband .aktionen { margin: 0; }
.installband .btn.tonal { background: var(--md-primary); color: var(--md-on-primary); }
.installband .btn.text { color: var(--md-on-secondary-container); }
/* Kopfzeile: größerer Titel, alles andere etwas kleiner */
#kopf { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
.app-logo { width: 34px; height: 34px; border-radius: 8px; }
#kopf h1 { font-size: 24px; line-height: 30px; letter-spacing: .08em; }
#uhr { font-size: 12px; line-height: 16px; }
#kopf .chip { min-height: 40px; padding: 0 12px; font-size: 12px; }
@media (max-width: 479px) { #kopf h1 { font-size: 20px; line-height: 26px; letter-spacing: .06em; } }
@media (max-width: 400px) { #kopf h1 { font-size: 18px; line-height: 24px; } .app-logo { width: 30px; height: 30px; border-radius: 7px; } #uhr { font-size: 11px; } #kopf .chip { padding: 0 8px; font-size: 11px; } }
@media (max-width: 359px) { #kopf h1 { font-size: 16px; line-height: 22px; } }
/* Titel optisch mittig: Versalien der Montserrat liegen 0,076 em über der Mitte der Zeilenbox */
#kopf h1 { position: relative; top: .076em; }
/* Handy: alles auf 90 % */
@media (max-width: 599px) { html { zoom: .9; } }
/* Schalter für das CQ-Fenster (gerade/ungerade) */
.schalter { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; background: none; border: 0; color: var(--md-on-surface); font: 500 14px/20px var(--font); cursor: pointer; }
.schalter-spur { position: relative; flex: none; width: 52px; height: 32px; border-radius: var(--shape-full); border: 2px solid var(--md-outline); background: var(--md-surface-container-highest); transition: background var(--dauer), border-color var(--dauer); }
.schalter-knopf { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--md-outline); transition: transform var(--dauer), background var(--dauer), width var(--dauer), height var(--dauer), top var(--dauer), left var(--dauer); }
.schalter[aria-checked="true"] .schalter-spur { background: var(--md-primary); border-color: var(--md-primary); }
.schalter[aria-checked="true"] .schalter-knopf { transform: translateX(20px); background: var(--md-on-primary); top: 2px; left: 2px; width: 24px; height: 24px; margin: 0; }
.schalter:focus-visible .schalter-spur { outline: 2px solid var(--md-primary-text); outline-offset: 2px; }
.schalter-wert { min-width: 4.8em; }
.schalter-wert .w-odd, .schalter[aria-checked="true"] .w-even { display: none; }
.schalter[aria-checked="true"] .w-odd { display: inline; }
/* Feste Höhe für Band-Aktivität und QSO-Fenster, damit sich nichts verschiebt, wenn Inhalt kommt */
#band, #qso { height: 240px; max-height: none; }
@media (max-width: 599px) {
  #band, #qso { height: 180px; }
  /* Aktionsknöpfe nur mit Symbol, der Text bleibt für Screenreader */
  .aktionsleiste { gap: 8px; margin-top: 8px; }
  .aktionsleiste #btnCq, .aktionsleiste #btnHalt { width: 48px; padding: 0; }
  .aktionsleiste #btnCq > span, .aktionsleiste #btnHalt > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Mikrofon-Schalter: links Mikrofon durchgestrichen (aus), rechts Mikrofon (an) */
.schalter.mik { gap: 6px; padding: 0 8px; }
.schalter.mik .icon { color: var(--md-on-surface-variant); opacity: .6; }
.schalter.mik[aria-checked="false"] .sym-aus, .schalter.mik[aria-checked="true"] .sym-an { color: var(--md-primary-text); opacity: 1; }
.schalter:disabled { opacity: .5; cursor: default; }
/* Rahmen und kleinere Rundung für Textfelder und Listen */
.liste { border: 1px solid var(--md-outline-variant); border-radius: var(--shape-xs); }
/* Zustandsschicht (M3): Überlagerung in der Textfarbe, Hover 22 %, Fokus 26 %, Druck 32 %, bei Knöpfen dazu Schatten und Rahmen in der Textfarbe. Nur mit Maus als Hover. */
.btn, .icon-btn, .chip, .segmente button, nav#nav button, .liste .cq, .liste > div.mitknopf { --zs: 0%; background-image: linear-gradient(color-mix(in srgb, currentColor var(--zs), transparent), color-mix(in srgb, currentColor var(--zs), transparent)); }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible, .segmente button:focus-visible, nav#nav button:focus-visible { --zs: 26%; }
.btn:active:not(:disabled), .icon-btn:active, .chip:active, .segmente button:active, nav#nav button:active { --zs: 32%; }
@media (hover: hover) {
  .btn:hover:not(:disabled), .icon-btn:hover, .chip:hover, .segmente button:hover, nav#nav button:hover, .liste .cq:hover, .liste > div.mitknopf:hover { --zs: 22%; }
  .btn:hover:not(:disabled) { box-shadow: 0 2px 6px rgb(0 0 0 / .35); }
  .btn:not(.filled):not(.tonal):hover:not(:disabled) { border-color: currentColor; }
  .btn.filled:hover:not(:disabled), .btn.tonal:hover:not(:disabled) { box-shadow: 0 2px 6px rgb(0 0 0 / .35), inset 0 0 0 1px color-mix(in srgb, currentColor 60%, transparent); }
  .schalter:hover:not(:disabled) .schalter-knopf { box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-on-surface) 22%, transparent); }
}
.schalter:focus-visible .schalter-knopf { box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-on-surface) 18%, transparent); }
/* Aktives Ziel der Navigation: Kachel rot mit weißem Symbol, die Beschriftung zusätzlich fett */
nav#nav button[aria-current="page"] { font-weight: 700; }
/* Kopf der Band-Aktivität mit dem Schalter für die Auto-Antwort */
.bandkopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 4px; min-height: 48px; } /* gleiche Höhe in beiden Spalten, auch ohne Schalter */
.bandkopf h2 { margin: 0; min-width: 0; }
.schalter-text { font: 500 14px/20px var(--font); white-space: nowrap; }
/* Zeilenfarben in Band-Aktivität und QSO-Fenster: gesendet gelb, an mich rot, sonst weiß, Systemmeldungen hellgrau */
#band > div, #qso > div { background: light-dark(#ffffff, #262626); color: var(--md-on-surface); }
#band > div.info, #qso > div.info { background: light-dark(#e4e4e4, #3a3a3a); color: var(--md-on-surface-variant); }
#band > div.tx, #qso > div.tx { background: #ffeea0; color: #1a1a1a; border-left: 4px solid #c99a00; }
#band > div.anmich, #qso > div.anmich { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 500; }
/* Bereits im Log: hellgrün, auch im Dunkeln mit dunkler Schrift */
#band > div.imlog { background: #c9f2cf; color: #1a1a1a; }
/* Statuszeile über dem Pegelbalken, in der Schrift der Uhr in der Kopfzeile. Zwei Zeilen Höhe sind reserviert, damit nichts springt. */
#status { font: 500 12px/16px var(--font-mono); color: var(--md-on-surface-variant); white-space: pre-wrap; min-height: 32px; margin: 19px 0 -5px; }
#btnHalt { margin-left: auto; }
@media (max-width: 400px) { #status { font-size: 11px; } }

/* Logo in der Kopfzeile in der Schriftfarbe des Titels: SVG als Maske, Farbe aus currentColor */
#kopf .app-logo { background: var(--md-on-surface); -webkit-mask: url("icons/logo.svg") center / contain no-repeat; mask: url("icons/logo.svg") center / contain no-repeat; border-radius: 0; }