/*
 * THW Toolbox – Launcher (Design-Version 0.2.0)
 * Nur launcherspezifische Ergänzungen. Alles andere kommt aus design/components/basis.css,
 * Werte ausschließlich aus design/tokens.css.
 */

.tb-seite > h1 { margin-bottom: var(--abstand-2); }
.tb-einleitung { margin: 0 0 var(--abstand-5); font-family: var(--schrift-lesetext); color: var(--farbe-text-sekundaer); max-width: 40rem; }
.tb-hinweise { display: flex; flex-direction: column; gap: var(--abstand-3); margin-bottom: var(--abstand-5); }
.tb-hinweise:empty { display: none; }
.tb-hinweise .tb-kasten { margin: 0; padding: var(--abstand-3) var(--abstand-4); }
.tb-hinweise .tb-kasten p { margin: 0; }

/* Kopfzeile: aktuelle Seite */
.tb-kopf__link[aria-current="page"] { text-decoration: none; color: var(--farbe-text); }

/* Kacheln */
.tb-kachel__icon svg,
.tb-kachel__icon img { display: block; width: 100%; height: 100%; }
.tb-kachel__notiz { margin: 0; font-size: var(--groesse-xs); color: var(--farbe-text-sekundaer); }
.tb-kachel__notiz--abweichung { color: var(--farbe-fehler); }
.tb-kachel--grau { border-style: dashed; border-color: var(--farbe-deaktiviert); }
.tb-kachel--grau .tb-kachel__name,
.tb-kachel--grau .tb-kachel__kurz { color: var(--farbe-text-sekundaer); }
.tb-kachel--grau .tb-kachel__icon { color: var(--farbe-text-sekundaer); opacity: 0.6; }

/* Fachgruppen und Bereich */
.tb-gruppen__zeichen { flex: none; width: var(--ziel-fein); height: var(--ziel-fein); }
.tb-gruppen__zeichen img { display: block; width: 100%; height: 100%; }
.tb-gruppen__link > .tb-gruppen__text { flex: 1 1 auto; }
.tb-gruppen__zusatz { display: block; font-size: var(--groesse-xs); font-weight: var(--gewicht-normal); color: var(--farbe-text-sekundaer); }
.tb-gruppen__text { display: flex; flex-direction: column; min-width: 0; }
.tb-bereich__kopf { margin-bottom: var(--abstand-4); }
.tb-bereich__kurz { margin: 0 0 var(--abstand-3); color: var(--farbe-text-sekundaer); }
.tb-bereich__zurueck { margin-bottom: var(--abstand-2); margin-inline-start: calc(var(--abstand-3) * -1); }
.tb-bereich__meine { margin-top: var(--abstand-2); }
.tb-bereich__titel > h2 { margin-bottom: var(--abstand-1); }

/* Offline an den Kacheln (ab 0.4.0): Schalter rechts neben der Überschrift, Kasten „Alle Module offline“, Hinweis */
.tb-bereich__zeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--abstand-2) var(--abstand-6); }
.tb-bereich__titel { flex: 1 1 18rem; min-width: 0; }
.tb-bereich__titel > .tb-bereich__kurz:last-child { margin-bottom: 0; }
.tb-bereich__offline { display: flex; flex-direction: column; gap: var(--abstand-1); flex: 0 1 20rem; min-width: 0; }
@media (max-width: 39.99rem) {
  .tb-bereich__offline { flex-basis: 100%; padding-top: var(--abstand-2); border-top: var(--linie-fein) solid var(--farbe-rahmen); }
}
.tb-kachel__offline-platz { display: flex; flex-direction: column; gap: var(--abstand-2); min-width: 0; }
.tb-alle-offline { max-width: 40rem; margin: 0 0 var(--abstand-6); padding: var(--abstand-4); }
.tb-alle-offline > .tb-kachel__offline-platz { margin-bottom: var(--abstand-3); }
@media (min-width: 40rem) { .tb-alle-offline { padding: var(--abstand-4) var(--abstand-5); } }
.tb-launcher__gruppen > .tb-alle-offline { margin-bottom: var(--abstand-5); }
.tb-offline-hinweis { display: flex; align-items: flex-start; gap: var(--abstand-3); margin: 0; font-family: var(--schrift-lesetext); color: var(--farbe-text); }
.tb-offline-hinweis > .tb-symbol { flex: none; color: var(--farbe-primaer); margin-top: calc(var(--abstand-1) / 2); }
.tb-offline-hinweis--unten { max-width: 40rem; margin-top: var(--abstand-5); }
.tb-bereich__meine .tb-wahl { margin: 0; }

/* Fuß: bündig mit dem Inhalt (gleiche Breite und Ränder wie tb-seite) */
.tb-fuss { border-top: var(--linie-fein) solid var(--farbe-rahmen); font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }
.tb-fuss__innen { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); padding-block: var(--abstand-5); }
.tb-fuss__innen > * { margin: 0; }
/* Rechtliche Seiten (ab Launcher 0.4.1): eigene Zeile am Handy, ab Tablet rechts neben den Versionen */
.tb-fuss__recht { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--abstand-2); flex: 1 1 100%; }
.tb-fuss__recht a { display: inline-flex; align-items: center; min-height: var(--ziel-fein); }
.tb-fuss__recht a[aria-current="page"] { color: var(--farbe-text); text-decoration: none; }
@media (min-width: 40rem) { .tb-fuss__recht { flex: 0 1 auto; margin-inline-start: auto; } .tb-fuss__innen { align-items: center; } }

/* Textseiten: Impressum, Datenschutz, Nutzung, Quellen */
.tb-rechtstext { max-width: 40rem; font-family: var(--schrift-lesetext); }
.tb-rechtstext p, .tb-rechtstext li { overflow-wrap: break-word; }
.tb-rechtstext ul { margin: 0 0 var(--abstand-4); padding-inline-start: var(--abstand-5); }
.tb-rechtstext li + li { margin-top: var(--abstand-2); }
.tb-rechtstext .tb-abschnitt > h3 { margin-top: var(--abstand-5); }
.tb-rechtstext__wichtig { margin-bottom: var(--abstand-6); }
.tb-anbieter { margin: 0 0 var(--abstand-3); font-style: normal; }
.tb-rechtstext ul.tb-quellen { padding-inline-start: 0; list-style: none; }
.tb-quellen > li { padding-block: var(--abstand-2); border-bottom: var(--linie-fein) solid var(--farbe-rahmen); }
.tb-quellen > li + li { margin-top: 0; }
.tb-quellen__hinweis { display: block; color: var(--farbe-text-sekundaer); font-size: var(--groesse-s); }
.tb-quellen__link { display: block; font-size: var(--groesse-s); overflow-wrap: anywhere; }
.tb-quellen__modul > h3 { margin: var(--abstand-5) 0 var(--abstand-2); }
.tb-quellen__leer { color: var(--farbe-text-sekundaer); }

/* Freischaltung und Stammstelle */
.tb-freischaltung-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-4); margin-bottom: var(--abstand-4); }
@media (min-width: 40rem) { .tb-freischaltung-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .tb-freischaltung-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tb-abschnitt { margin-bottom: var(--abstand-6); }
.tb-abschnitt > h2 { margin-bottom: var(--abstand-2); }
.tb-abschnitt > h3 { margin-top: var(--abstand-5); }
.tb-abschnitt .tb-lesetext { max-width: 40rem; }
.tb-rechteliste { margin: 0 0 var(--abstand-4); padding: 0; list-style: none; }
.tb-rechteliste .tb-wahl { margin: 0; }
.tb-schmal { max-width: 36rem; }
.tb-code { font-family: var(--schrift-mono); font-size: var(--groesse-s); overflow-wrap: anywhere; }
.tb-aktionen--abstand { margin-top: var(--abstand-3); }

.tb-leser__kamera { margin-bottom: var(--abstand-4); }
.tb-ergebnisfeld { margin-top: var(--abstand-5); }
.tb-ergebnisfeld > h3 { margin-top: 0; }

/* Einstellungen: Modulübersicht */
.tb-modullegende { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-5); margin: 0 0 var(--abstand-4); padding: 0; list-style: none; font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); }
.tb-modullegende li { display: flex; align-items: center; gap: var(--abstand-2); }
.tb-modullegende__frei,
.tb-modulzeile__frei { font-weight: var(--gewicht-fett); color: var(--farbe-text); }
.tb-modulzeile { flex-wrap: wrap; align-items: flex-start; column-gap: var(--abstand-3); }
.tb-modulzeile--ebene1 { padding-inline-start: calc(var(--abstand-1) + var(--abstand-5)); }
.tb-modulzeile--ebene2 { padding-inline-start: calc(var(--abstand-1) + var(--abstand-5) * 2); }
.tb-modulzeile__icon { flex: none; width: var(--symbol-groesse); height: var(--symbol-groesse); margin-top: var(--abstand-1); color: var(--farbe-primaer); }
.tb-modulzeile__icon svg,
.tb-modulzeile__icon img { display: block; width: 100%; height: 100%; }
.tb-modulzeile .tb-liste__text { flex: 1 1 10rem; }
.tb-modulzeile__zugang { display: inline-flex; align-items: center; gap: var(--abstand-2); flex: 1 1 100%; padding-inline-start: calc(var(--symbol-groesse) + var(--abstand-3)); font-size: var(--groesse-s); font-weight: var(--gewicht-fett); color: var(--farbe-text); }
.tb-modulzeile__sammlung { font-weight: var(--gewicht-normal); color: var(--farbe-text-sekundaer); }
.tb-modulzeile__offline { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--abstand-4); margin: 0; padding-inline-start: calc(var(--symbol-groesse) + var(--abstand-3)); }
.tb-modulzeile__offline .tb-schalter { flex: 0 1 20rem; }
.tb-modulzeile__groesse { margin-inline-start: var(--abstand-2); }
.tb-modulzeile__status { margin: 0; }
@media (min-width: 40rem) {
  .tb-modulzeile__zugang { flex: 0 1 17rem; padding-inline-start: 0; justify-content: flex-start; }
}

/* Einstellungen: unauffälliger Zugang zur Verwaltung (Stammstelle) ganz unten */
.tb-einstellungen__verwaltung { margin: var(--abstand-7) 0 0; }
.tb-einstellungen__verwaltung .tb-knopf--text { color: var(--farbe-text-sekundaer); font-size: var(--groesse-s); }

/* Stammstelle: Modulstatus je Modul */
.tb-modulstatus { list-style: none; margin: 0 0 var(--abstand-4); padding: 0; }
.tb-modulstatus__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2) var(--abstand-4); padding: var(--abstand-3) 0; border-bottom: 1px solid var(--farbe-trennlinie); }
.tb-modulstatus__name { min-width: 0; }
.tb-modulstatus__kennung { display: block; color: var(--farbe-text-sekundaer); font-size: var(--groesse-s); }
.tb-modulstatus__zeile .tb-feld { margin: 0; flex: 0 1 16rem; }

/* Verwaltung: Updateportal (Abschnitt „Module verwalten“) */
.tb-verwaltung__titel { margin: var(--abstand-5) 0 var(--abstand-2); font-size: var(--groesse-l); }
.tb-verwaltung__liste { list-style: none; margin: 0 0 var(--abstand-4); padding: 0; }
.tb-verwaltung__zeile { display: flex; flex-direction: column; gap: var(--abstand-1); padding: var(--abstand-3) 0; border-bottom: 1px solid var(--farbe-trennlinie); min-width: 0; }
.tb-verwaltung__name { overflow-wrap: anywhere; }
.tb-verwaltung__meta { margin: 0; font-size: var(--groesse-s); color: var(--farbe-text-sekundaer); overflow-wrap: anywhere; }
.tb-verwaltung__zusatz { margin: 0 0 var(--abstand-2); padding-inline-start: calc(var(--abstand-5) + var(--abstand-2)); }
.tb-verwaltung__link { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--ziel); padding: 0; border: 0; background: none; font: inherit; font-size: var(--groesse-s); font-weight: var(--gewicht-fett); color: var(--farbe-primaer); text-decoration: underline; cursor: pointer; }
.tb-verwaltung__link:disabled { color: var(--farbe-text-sekundaer); cursor: default; }
.tb-verwaltung__wahl { display: grid; gap: var(--abstand-2); margin: var(--abstand-3) 0; }
.tb-aenderungen h3 { margin: var(--abstand-3) 0 var(--abstand-1); }
.tb-aenderungen ul { margin: 0; padding-inline-start: 1.2rem; }