/* Tabellenlayout */
.bandplan-tabelle {
  width: 100%;
  border-collapse: collapse;
}
.bandplan-tabelle thead th {
  background-color: #ddd;
  padding: 8px;
}
.bandplan-tabelle td {
  border: 1px solid #ccc;
  padding: 8px;
}
.bandplan-tabelle tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
.bandplan-tabelle tbody tr:hover {
  background-color: #eaeaea;
}
.bandplan-tabelle td:first-child {
  text-align: right;
  vertical-align: top;
  font-weight: normal;
  width: 15%;
}
.bandplan-tabelle td:nth-child(2) {
  text-align: left;
  width: 65%;
}
.bandplan-tabelle td:nth-child(3) {
  text-align: right;
  width: 20%;
}

/* Bandbereichs-Details */
.bereich-untertitel {
  font-size: 0.9em;
  font-weight: normal;
  display: block;
  margin-bottom: 2px;
  color: #444;
}
.bereich-modis {
  font-size: 0.9em;
}
.bereich-modi-prio {
  font-size: 1em;
}

/* Modus-Icons */
.mode-icon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 1px 0px 1px 0;
  padding: 1px 5px;
  background-color: #eee;
  border-radius: 3px;
  font-size: 0.8em;
  line-height: 1.2;
}

.mode-icon svg {
  width: 0.9em;
  height: 0.9em;
  vertical-align: middle;
}

.mode-icon-only {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 1px 4px 1px 0;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.8em;
  line-height: 1.2;
}

.mode-icon-only svg {
  width: 0.9em;
  height: 0.9em;
  vertical-align: middle;
}

/* Linkstil */
.band-link {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}
.band-link:hover {
  text-decoration: underline;
}

/* Infobox */
.bandinfo-box {
  border: 2px solid #333;
  padding: 15px;
  margin: 20px 0;
  background-color: #f9f9f9;
}
.bandinfo-box h3 {
  margin-top: 0;
}

.bandbereich-liste {
  margin-top: 10px;
}
.bandbereich-liste .mode-icon {
  text-align: center;
}
.bandbereich-liste strong {
  display: inline-block;
  margin-bottom: 2px;
}

.bandplan-filterform {
    font-size: 0.95em;
}

.bandplan-filterform select,
.bandplan-filterform input[type="checkbox"] {
    margin-right: 4px;
}

@media (max-width: 600px) {
    .bandplan-filterform div {
        width: 100%;
    }

    .bandplan-filterform label {
        display: inline-block;
        margin-bottom: 6px;
    }

    .bandplan-filterform select {
        width: 100%;
    }
}

tr.clickable-band-row:hover {
    background-color: #f0f0f0;
}

/* ---------- Top-Bar ---------- */
.bandplan-topbar{
    display:flex;
    gap:8px;
    flex-wrap:nowrap;        /* ①  NICHT umbrechen – Desktop */
    align-items:center;      /*   (optional, vertikale Mitte) */
    margin-bottom:10px;
}

/* Button-Gruppen dürfen nur so breit sein wie ihr Inhalt */
.topbar-left,
.topbar-right{
    flex: 0 0 auto;      /* <--  verhindert 100 %-Breiten  */
    display:flex;
    gap:6px;
}

/* PDF-Gruppe ganz nach rechts schieben */
.topbar-right{margin-left:auto;}

/* Klassen-Buttons + PDF identische Höhe */
.klasse-btn,
.pdf-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border-radius:4px;
    font-weight:bold;
    text-decoration:none;
    border:none;
    cursor:pointer;
    line-height:1
}
.klasse-btn{background:#ccc;color:#000}
.klasse-btn.active{background:#333;color:#fff}

.pdf-btn{
    background:#c00;color:#fff
}
.pdf-btn:hover{background:#900}

/* Mobile: Buttons umbrechen */
@media(max-width:600px){
    .bandplan-topbar{flex-wrap:wrap;}
    .topbar-right{margin-left:0;}   /* sonst wäre er allein in Zeile 1 */
}

/* ---------- Filter Bar ---------- */
.filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    font-size:1rem;
    margin-bottom:20px;      /* Abstand zur Tabelle */
}
/* Band-Select hübsch groß */
.filter-bar select{
    padding:6px 10px;
    font-size:1rem;
    min-width:140px;
}

/* ---------- Modi-Toggle-Buttons ---------- */
.toggle-btn{
    --mcol:#666;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 14px;
    border:2px solid var(--mcol);
    border-radius:5px;
    background:#fff;
    cursor:pointer;
    font-weight:600;
    line-height:1;
    transition:.15s;
    user-select:none;
}
.toggle-btn i{color:var(--mcol);}
.toggle-btn input{display:none;}

.toggle-btn:hover{background:var(--mcol);color:#fff;}
.toggle-btn:hover i{color:#fff;}

/*  Zustand „aktiv“ */
.toggle-btn.is-active,
.toggle-btn input:checked + i{ /* Fallback für JS-lose Toggle */
    background:var(--mcol);
    color:#fff;
}
.toggle-btn.is-active i{color:#fff;}

/* ---------- Icons IN DER FILTERLEISTE (Toggle-Buttons) ---------- */
.filter-bar .mode-icon,
.filter-bar .mode-icon-only{
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-size:.8em;
    padding:2px 5px;
    border-radius:3px;
    background:#f1f1f1;
}
.filter-bar .mode-icon-only{
    background:transparent;
    padding:0;
}

.no-js-only{display:none;}
html.no-js .no-js-only{display:inline-block;}