/* AFU-383: Bandplan-Spickzettel /bandplan/spickzettel. Das Blatt sieht am Bildschirm aus wie gedruckt (Papier,
   helle Farben), damit man sieht, was aus dem Drucker kommt. Eigene Klassen mit sp-, nichts aus style.css neu.
   Farben der Gruppen wie --bp-* in style.css, hier in der hellen Fassung fürs Papier. */

.sp {
  --sp-papier: #ffffff; --sp-text: #14161c; --sp-leise: #555b66; --sp-linie: #c9ccd3;
  --sp-cw: #2f6fd8; --sp-digital: #0b8a5f; --sp-phone: #b07405; --sp-sonder: #c23a72;
  --sp-dial: #a86b00; --sp-nf: #c62828;
}

.sp-steuer { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin-bottom: 1rem; }
.sp-wahl { display: flex; gap: 0.35rem; align-items: center; }
.sp-wahl > span { color: var(--muted); margin-right: 0.2rem; }
.sp-wahl a[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Nur das Blatt der gewählten Klasse; ohne JavaScript bleibt A (Vorgabe in der Seite). */
.sp[data-klasse="A"] .sp-blatt:not([data-k="A"]),
.sp[data-klasse="E"] .sp-blatt:not([data-k="E"]),
.sp[data-klasse="N"] .sp-blatt:not([data-k="N"]) { display: none; }

.sp-papier {
  background: var(--sp-papier); color: var(--sp-text); max-width: 210mm; margin: 0 auto;
  padding: 8mm; border-radius: 4px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  font-size: 0.78rem; line-height: 1.3; overflow-wrap: anywhere;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Ziffern gleich breit, aber proportionale Schrift: Monospace braucht auf dem Blatt ein Drittel mehr Platz. */
.sp-papier .mono { font-family: inherit; font-variant-numeric: tabular-nums; }

.sp-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; border-bottom: 2px solid var(--sp-text);
  padding-bottom: 0.25rem; margin-bottom: 0.45rem; }
.sp-kopf h2 { margin: 0; font-size: 1.35em; color: var(--sp-text); border: 0; padding: 0; }
.sp-kopf h2::before, .sp-kopf h2::after { content: none; }
.sp-kopf p { margin: 0; color: var(--sp-leise); font-size: 0.92em; }

.sp-raster { column-count: 2; column-gap: 5mm; }
@media (max-width: 700px) { .sp-raster { column-count: 1; } .sp-papier { padding: 0.8rem; } }

.sp-band, .sp-mikro, .sp-frei { break-inside: avoid; margin: 0 0 0.35rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--sp-linie); }
.sp-band h3, .sp-mikro h3, .sp-frei h3 { display: flex; flex-wrap: wrap; gap: 0 0.5rem; align-items: baseline;
  margin: 0 0 0.15rem; font-size: 1.08em; color: var(--sp-text); border: 0; padding: 0; }
.sp-name { font-weight: 700; min-width: 2.6em; }
.sp-grenze { color: var(--sp-text); }
.sp-pwr-kopf { margin-left: auto; font-weight: 700; }

.sp-balken { position: relative; height: 0.95em; margin: 0.1rem 0 0.2rem; background: #eceef2; border-radius: 2px; }
.sp-seg { position: absolute; top: 0; bottom: 0; color: #fff; font-size: 0.72em; font-weight: 700; line-height: 1.32em;
  text-align: center; overflow: hidden; white-space: nowrap; border-right: 1px solid var(--sp-papier); }
.sp-seg.cw { background: var(--sp-cw); }
.sp-seg.digital { background: var(--sp-digital); }
.sp-seg.phone { background: var(--sp-phone); }
.sp-seg.sonder { background: var(--sp-sonder); }
.sp-dialmarke, .sp-nfmarke { position: absolute; top: -0.12em; bottom: -0.12em; width: 0; }
.sp-dialmarke { border-left: 2px dashed var(--sp-dial); }
.sp-nfmarke { border-left: 2px solid var(--sp-nf); }

.sp-z { margin: 0.05rem 0 0; }
.sp-segs { color: var(--sp-text); }
.sp-s { white-space: nowrap; margin-right: 0.35em; }
.sp-s b, .sp-marken b, .sp-nf b, .sp-frei b { font-weight: 700; }
.sp-marken { color: var(--sp-text); }
.sp-dial { text-decoration: underline dashed var(--sp-dial); text-underline-offset: 2px; }
.sp-nf, .sp-nf b, .sp-frei .nf { color: var(--sp-nf); }
.sp-pwr { color: var(--sp-text); }
.sp-ziff { color: var(--sp-leise); font-size: 0.8em; font-weight: 400; }

.sp-mikro table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.sp-mikro th, .sp-mikro td { text-align: left; padding: 0.05rem 0.3rem 0.05rem 0; border-bottom: 1px solid var(--sp-linie);
  color: var(--sp-text); background: none; }
.sp-mikro th { font-weight: 700; }
.sp-frei p { margin: 0.1rem 0 0; }

.sp-legende { display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; margin: 0.35rem 0 0; font-size: 0.88em; color: var(--sp-leise); }
.sp-legende i.sp-seg { position: static; display: inline-block; width: 0.9em; height: 0.75em; margin-right: 0.25em;
  vertical-align: -0.05em; border: 0; }
.sp-strich { display: inline-block; width: 0; height: 0.9em; margin: 0 0.35em 0 0.2em; border-left: 2px dashed var(--sp-dial);
  vertical-align: -0.1em; }
.sp-legende b { color: var(--sp-text); }
.sp-quellen { margin: 0.3rem 0 0; font-size: 0.82em; color: var(--sp-leise); }
.sp-quellen b { color: var(--sp-text); }

@page { size: A4 portrait; margin: 8mm; }
@media print {
  body:has(.sp) .page-head, .sp-steuer { display: none !important; }
  body:has(.sp) main, body:has(.sp) .wrap { margin: 0; padding: 0; max-width: none; width: auto; }
  .sp-papier { max-width: none; padding: 0; box-shadow: none; border-radius: 0; font-size: 7.3pt; line-height: 1.25; }
  .sp-raster { column-count: 2; }
}