/* Setliste - Akzent und Sonderbausteine der App, nur Bildschirm (media="screen"). Das gemeinsame Bild kommt aus
   firmen.css, der Ausdruck aus styles.css. Farben nur ueber die Variablen aus firmen.css. */
@media screen {
  :root {
    --g: linear-gradient(135deg, #d9a7e8 0%, #8a3fa6 60%, #2a0f36 120%);
    --accent: #9b4fb8;
  }

  nav.tabs { flex-wrap: wrap; }
  .muster { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); font-weight: 600; font-size: 14px; }
  #gError { margin-bottom: 10px; }
  .buttons { display: grid; margin-bottom: 12px; }
  .wahl label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); cursor: pointer; }
  .wahl label span { min-width: 0; overflow-wrap: anywhere; }
  .kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .kopf h3 { min-width: 0; overflow-wrap: anywhere; }
  .kopf > .muted { white-space: nowrap; flex: none; }
  .zahl { font-size: 18px; font-weight: 700; white-space: nowrap; flex: none; }
  .liste { list-style: none; padding: 0; display: grid; gap: 0; }
  .liste li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
  .liste li:first-child { border-top: 0; padding-top: 0; }
  .liste li > span:first-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; flex: 1; }
  .knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 48%; }
  .badge.archiviert { color: var(--muted); }
  .gespeichert { color: var(--ok); font-weight: 600; font-size: 14px; text-align: right; margin-top: 8px; }
  .gespeichert.links-buendig { text-align: left; margin: 0 4px 10px; }

  /* Suche ueber dem Titelstamm; Auswahl und Knoepfe ueber und unter der Setliste */
  .planwahl { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .planwahl input, .planwahl select { flex: 1; min-width: 180px; }
  .planwahl button { flex: none; }
  .card .planwahl { margin: 12px 0 0; }

  /* Die Setliste: Nummer vorn, Pausen als Trennzeile */
  .setliste .nr { display: inline-block; min-width: 2.2em; font-weight: 700; color: var(--muted); }
  .setliste li.pause { color: var(--warn); font-weight: 600; border-top: 2px dashed color-mix(in srgb, var(--warn) 55%, transparent); }
  .setliste li.pause + li { border-top: 2px dashed color-mix(in srgb, var(--warn) 55%, transparent); }
  .summen { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 14px; }
  .summen b { font-size: 16px; }
  dialog { width: min(560px, calc(100vw - 24px)); }
}