/*
 * itone/service-core: Stylesheet der HTML-Seiten.
 *
 * Aufbau, Abstände und Regeln aus web/components.md und web/accessibility.md
 * des CI-Pakets. Seit 1.0 stehen hier keine Farbwerte und keine
 * Schriftketten mehr, nur var(--itm-…). Die Werte liefert das Theme des
 * Dienstes (Ui\Theme, Vorgabe seit 1.1 Theme::labsCi()) in theme.css, das der
 * Befehl assets erzeugt und die Grundseite nach dieser Datei einbindet.
 *
 * - Hell und dunkel schaltet theme.css über prefers-color-scheme und
 *   [data-theme="dark"], die Seiten haben kein Skript. data-theme="light"
 *   hält eine Seite hell (seit 1.1). Bilder mit zwei Fassungen tragen
 *   .only-light und .only-dark und folgen denselben Regeln.
 * - Kein Inline-CSS in den Seiten, alles Aussehen steht hier und in
 *   theme.css. Nur so greift die strenge Content-Security-Policy.
 * - Zustände nie nur über Farbe: Meldungen und Kennzeichen tragen immer Text,
 *   zusätzlich ein Symbol.
 */

:root {
  color-scheme: light dark;

  --itm-radius-sm: 8px;
  --itm-radius-md: 12px;
  --itm-radius-lg: 16px;
  --itm-radius-pill: 999px;

  --itm-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Fester Modus über data-theme (seit 1.1), auch für Formularelemente des Browsers. */
[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

/* Grundlage */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Platz der Scrollleiste immer frei halten: Sonst ist das Fenster auf langen Seiten
   schmaler als auf kurzen, und die mittig gesetzte Seite samt Kopfleiste springt beim
   Wechsel seitlich. Verträgt sich nicht mit 100vw, deshalb nirgends 100vw (seit 1.7.1). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--itm-bg);
  color: var(--itm-text);
  font-family: var(--itm-font-body);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--itm-primary);
}

a:hover {
  color: var(--itm-primary-hover);
}

/* Fokus nie entfernen: Rahmen in der Primärfarbe plus weicher Ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--itm-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--itm-focus-ring);
}

code,
.mono {
  font-family: var(--itm-font-mono);
  font-size: 14px;
}

h1,
h2,
h3 {
  font-family: var(--itm-font-black);
  font-weight: 900;
  letter-spacing: -0.035em;
}

h1 {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.15;
}

h2 {
  margin: 32px 0 12px;
  font-size: 24px;
  line-height: 1.15;
}

h3 {
  margin: 24px 0 8px;
  font-family: var(--itm-font-medium);
  font-weight: 500;
  letter-spacing: 0;
  font-size: 18px;
  line-height: 1.3;
}

p {
  margin: 0 0 12px;
  max-width: 70ch;
}

.small {
  color: var(--itm-text-secondary);
  font-size: 14px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Aufbau: Kopf, Navigation, Inhalt, Fusszeile */

.page {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 32px;
}

/*
 * Schmale Lesespalte (Bestätigung, Kein Zugang, Anmeldung, Fehlerseiten): Nur
 * der Inhalt wird schmal. Kopf, Navigation und Fusszeile behalten die Breite
 * der Grundseite, damit Logo, Name, Konto und Abmelden an derselben Stelle stehen.
 */
.page--narrow > main {
  max-width: 680px;
}

/*
 * Mittig (seit 1.5, Anmeldung, Abgemeldet und Kein Zugang): Überschrift, Karte
 * und Fusszeile stehen als schmaler Block waagerecht in der Mitte, ihr Inhalt
 * bleibt linksbündig. Der Kopf behält die volle Breite der Grundseite.
 */
.page--centered > main,
.page--centered > .footer {
  width: 100%;
  max-width: 560px;
  margin-right: auto;
  margin-left: auto;
}

/* Der Inhalt darf nie breiter werden als das Fenster, lange Wörter brechen um. */
main {
  min-width: 0;
  overflow-wrap: break-word;
}

.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin: 0 0 24px;
}

.brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-width: 0;
}

/*
 * Breite und Höhe des Logos kommen aus dem Theme als Attribute des Bildes;
 * die Höhe folgt dem Seitenverhältnis. Schutzraum 25 % der Höhe.
 */
.logo {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px 0;
}

.service-name {
  margin: 0;
  color: var(--itm-text-secondary);
  font-family: var(--itm-font-medium);
  font-size: 15px;
}

.service-name strong {
  display: block;
  color: var(--itm-text);
  font-family: var(--itm-font-heavy);
  font-weight: 800;
  font-size: 18px;
}

.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--itm-text-secondary);
  font-size: 14px;
}

.account form {
  margin: 0;
}

/*
 * Link "Zum Portal" vor dem Konto (seit 1.3). Farben wie jeder Link aus dem
 * Theme, hell und dunkel; Touch-Ziel 44 px hoch.
 */
.portal-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--itm-font-medium);
  white-space: nowrap;
}

/*
 * Schmale Fenster: Logo höchstens 40 px hoch, Konto und Abmelden in eigener
 * Zeile rechtsbündig unter Logo und Namen. Touch-Ziele bleiben 44 px hoch.
 */
@media (max-width: 600px) {
  .header {
    gap: 8px 16px;
  }

  .brand {
    gap: 4px 16px;
  }

  .logo {
    width: auto;
    height: 40px;
    max-height: 40px;
    margin: 10px 0;
  }

  .account {
    flex: 1 1 100%;
    justify-content: flex-end;
    text-align: right;
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--itm-line-strong);
  list-style: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--itm-text);
  font-family: var(--itm-font-medium);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--itm-primary);
}

.nav a[aria-current="page"] {
  border-bottom-color: var(--itm-primary);
}

/*
 * Gruppen der Navigation (seit 1.9, PageFrame::ITEMS) ohne Band: <details>
 * mit gemeinsamem name, nur eine offen, ohne Skript. Das <summary> sieht aus
 * wie ein Eintrag, die Gruppe mit dem aktiven Untereintrag wie der aktive.
 * Das Untermenü schwebt unter dem Eintrag, auf schmalen Fenstern steht es im
 * Fluss. Die Regeln für Pfeil und Untermenü gelten auch im Band.
 */
.nav-group {
  position: relative;
}

.nav-group > summary,
.band-group > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.nav-group > summary::-webkit-details-marker,
.band-group > summary::-webkit-details-marker {
  display: none;
}

.nav-group > summary::marker,
.band-group > summary::marker {
  content: "";
}

.nav-group > summary {
  min-height: 44px;
  color: var(--itm-text);
  font-family: var(--itm-font-medium);
  font-size: 15px;
  border-bottom: 3px solid transparent;
}

.nav-group > summary:hover,
.nav-group--active > summary {
  color: var(--itm-primary);
}

.nav-group--active > summary {
  border-bottom-color: var(--itm-primary);
}

.group-icon {
  flex: none;
  transition: transform .15s var(--itm-ease);
}

.group-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-group[open] > summary .group-icon,
.band-group[open] > summary .group-icon {
  transform: rotate(180deg);
}

/* Untermenü: schwebende Fläche der Karten, Radius 12, Schatten des Themes, über dem Inhalt. */
.nav-menu,
.band-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 220px;
  margin: 4px 0 0;
  padding: 6px;
  list-style: none;
  background: var(--itm-card);
  border: 1px solid var(--itm-line);
  border-radius: var(--itm-radius-md);
  box-shadow: var(--itm-shadow-md);
}

/*
 * Einträge des Untermenüs: 44 px hoch, der aktive wie der aktive Eintrag der
 * Seitenleiste. Der Selektor schlägt .nav a und .nav a[aria-current], die
 * sonst auch hier gälten. Im Band dieselben Regeln nach den Reitern.
 */
.nav .nav-menu a {
  display: flex;
  align-items: center;
  position: static;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--itm-radius-sm);
  background: transparent;
  color: var(--itm-text);
  font-family: var(--itm-font-medium);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.nav .nav-menu a:hover {
  background: var(--itm-hover-soft);
  color: var(--itm-primary);
}

.nav .nav-menu a[aria-current="page"] {
  border: 0;
  background: var(--itm-hover-soft);
  color: var(--itm-primary);
  box-shadow: inset 3px 0 0 var(--itm-primary);
  font-weight: 700;
}

.nav-menu a:focus-visible {
  outline: 2px solid var(--itm-primary);
  outline-offset: -2px;
  box-shadow: none;
}

.card {
  margin: 0 0 24px;
  padding: 32px;
  background: var(--itm-card);
  border: 1px solid var(--itm-line);
  border-radius: var(--itm-radius-lg);
  box-shadow: var(--itm-shadow-md);
}

/*
 * Seit 1.12: Der Innenabstand der Karte ist der ganze Abstand zum Rand. Der
 * Aussenabstand des ersten Kindes oben und des letzten unten fällt weg, etwa
 * von h2 oben oder einem Absatz, einer Tabelle oder einer Meldung unten.
 */
.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .card {
    padding: 24px 20px;
  }
}

.title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 0 16px;
}

.title-row h1 {
  margin: 0;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  margin: 16px 0 0;
  padding: 0 4px;
  color: var(--itm-text-secondary);
  font-size: 14px;
}

.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--itm-font-medium);
}

/*
 * Marke in der Fusszeile (seit 1.1), bei Theme::labsCi() die Wort-Bild-Marke
 * mit Kachelhöhe 48 px. Schutzraum nach logo/logo-usage.md des CI-Pakets:
 * die halbe Kachelhöhe, also 24 px.
 */
.footer-brand {
  display: inline-flex;
  align-items: center;
  margin: 24px 24px 24px 0;
}

.footer-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 48px;
}

/*
 * Kleines Symbol vor einer Überschrift (Components::headingIcon(), seit 1.1),
 * ohne Rahmen und Innenabstand. Die Höhe kommt aus der Klasse der Stufe.
 */
.heading-with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}

.heading-icon {
  display: block;
  flex: none;
  width: auto;
}

.heading-icon--16 {
  height: 16px;
}

.heading-icon--24 {
  height: 24px;
}

.heading-icon--32 {
  height: 32px;
}

.heading-icon--48 {
  height: 48px;
}

/*
 * Rahmen mit Seitenleiste (seit 1.5, PageFrame::withSidebar()): links die
 * Seitenleiste mit etwa 15 rem, rechts Navigation und Inhalt. Unter 56 rem
 * Breite steht die Seitenleiste über dem Inhalt, ohne Skript und ohne
 * Ausklappmenü. Farben nur aus dem Theme.
 */
.page--sidebar {
  max-width: 1280px;
}

.page-body {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.page-content {
  min-width: 0;
}

.sidebar {
  padding: 8px;
  background: var(--itm-card);
  border: 1px solid var(--itm-line);
  border-radius: var(--itm-radius-lg);
}

.sidebar-heading {
  margin: 16px 12px 4px;
  color: var(--itm-text-secondary);
  font-family: var(--itm-font-heavy);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sidebar-heading:first-child {
  margin-top: 8px;
}

.sidebar-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Eintrag: Touch-Ziel 44 px hoch. Der aktive Eintrag (aria-current) ist nicht
 * nur farbig, sondern hat Grund, Balken links und kräftigere Schrift.
 */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--itm-radius-sm);
  color: var(--itm-text);
  font-family: var(--itm-font-medium);
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
}

.sidebar-link:hover {
  background: var(--itm-hover-soft);
  color: var(--itm-primary);
}

.sidebar-link[aria-current="page"] {
  background: var(--itm-hover-soft);
  color: var(--itm-primary);
  box-shadow: inset 3px 0 0 var(--itm-primary);
  font-weight: 700;
}

.sidebar-tile {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
}

.sidebar-label {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar-external {
  flex: none;
  color: var(--itm-text-secondary);
}

@media (max-width: 56rem) {
  .page-body {
    display: block;
  }

  .sidebar {
    margin: 0 0 24px;
  }
}

/*
 * Kachel-Karten (Components::tileCard(), seit 1.5): Kachel 48 px, Titel und
 * eine Zeile Text, die ganze Karte ist ein Link. Im Raster mehrere in einer
 * Reihe, auf schmalen Bildschirmen untereinander.
 */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  margin: 0 0 24px;
}

.tile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 44px;
  padding: 20px;
  background: var(--itm-card);
  border: 1px solid var(--itm-line);
  border-radius: var(--itm-radius-lg);
  box-shadow: var(--itm-shadow-sm);
  color: var(--itm-text);
  text-decoration: none;
  transition: border-color 150ms var(--itm-ease);
}

.tile-card:hover {
  border-color: var(--itm-primary);
  color: var(--itm-text);
}

.tile-card-tile {
  display: block;
  flex: none;
  width: 48px;
  height: 48px;
}

.tile-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tile-card-title {
  color: var(--itm-text);
  font-family: var(--itm-font-heavy);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.tile-card:hover .tile-card-title {
  color: var(--itm-primary);
}

.tile-card-text {
  color: var(--itm-text-secondary);
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .tile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Element-Band (seit 1.6, PageFrame::band()): Kopfleiste über die volle
 * Fensterbreite, darunter in der Breite der Seite (1080 px, mit Seitenleiste
 * 1280 px) Seitenleiste, Band, Inhalt und Fusszeile. Farben nur aus den
 * Variablen des Themes (--itm-band-…); ohne Band gilt keine dieser Regeln.
 */
.page.page--band {
  max-width: none;
  padding: 0 0 32px;
}

.page--band > .page-main {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 0;
}

.page--band.page--sidebar > .page-main {
  max-width: 1280px;
}

.page--band.page--narrow > .page-main > main {
  max-width: 680px;
}

.page--band.page--centered > .page-main > main,
.page--band.page--centered > .page-main > .footer {
  width: 100%;
  max-width: 560px;
  margin-right: auto;
  margin-left: auto;
}

/* Kopfleiste: Fläche der Karten, Linie unten, Inhalt in der Breite der Seite, etwa 68 px hoch. */
.header--band {
  display: block;
  margin: 0;
  background: var(--itm-card);
  border-bottom: 1px solid var(--itm-line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  width: 100%;
  max-width: 1080px;
  min-height: 68px;
  margin: 0 auto;
  padding: 10px 16px;
}

.page--band.page--sidebar .header-inner {
  max-width: 1280px;
}

.header--band .brand {
  gap: 16px;
}

.header-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 32px;
}

.brand-divider {
  align-self: stretch;
  width: 1px;
  min-height: 32px;
  background: var(--itm-line-strong);
}

.brand-title {
  margin: 0;
  color: var(--itm-text);
  font-family: var(--itm-font-heavy);
  font-size: 16px;
  font-weight: 700;
}

/* Konto als Chip: Kreis mit Initialen und Name, Rahmen wie die starke Linie. */
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 4px 16px 4px 4px;
  border: 1px solid var(--itm-line-strong);
  border-radius: var(--itm-radius-pill);
  color: var(--itm-text);
  font-family: var(--itm-font-medium);
  font-size: 14px;
}

.account-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--itm-raised);
  color: var(--itm-text);
  font-family: var(--itm-font-heavy);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.account-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/*
 * Band: dunkle Fläche mit Radius 16, Leuchten oben rechts als radialer
 * Verlauf (rein dekorativ, ohne Weichzeichner). Mit Reitern schliesst der
 * aktive Reiter bündig an die Unterkante an, das Band hat dann unten keinen
 * Innenabstand.
 */
.band {
  margin: 0 0 24px;
  padding: 20px 24px;
  background: radial-gradient(circle at 100% 0, var(--itm-band-glow), transparent 60%), var(--itm-band-bg);
  border: 1px solid var(--itm-band-border);
  border-radius: var(--itm-radius-lg);
  color: var(--itm-band-text);
}

.band--tabs {
  padding-bottom: 0;
}

.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.band-tile {
  display: block;
  flex: none;
  width: 48px;
  height: 48px;
}

.band-text {
  flex: 1 1 auto;
  min-width: 0;
}

.band-label {
  margin: 0;
  color: var(--itm-band-meta);
  font-family: var(--itm-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.band-title {
  margin: 0;
  color: var(--itm-band-text);
  font-family: var(--itm-font-black);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Ampel: Pill mit Punkt und Text, als Link, wenn sie ein Ziel hat. Nie nur Farbe. */
.band-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 6px 14px;
  border-radius: var(--itm-radius-pill);
  color: var(--itm-band-unknown);
  background: var(--itm-band-unknown-bg);
  font-family: var(--itm-font-heavy);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}

.band-status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.band-status--ok {
  color: var(--itm-band-ok);
  background: var(--itm-band-ok-bg);
}

.band-status--warn {
  color: var(--itm-band-warn);
  background: var(--itm-band-warn-bg);
}

.band-status--err {
  color: var(--itm-band-err);
  background: var(--itm-band-err-bg);
}

a.band-status:hover {
  text-decoration: underline;
}

.band-status--ok:hover {
  color: var(--itm-band-ok);
}

.band-status--warn:hover {
  color: var(--itm-band-warn);
}

.band-status--err:hover {
  color: var(--itm-band-err);
}

.band-status--unknown:hover {
  color: var(--itm-band-unknown);
}

/* Reiter: mindestens 48 px hoch, oben 3 px Linie, die nur der aktive zeigt. */
.band-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.band-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-top: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  color: var(--itm-band-muted);
  font-family: var(--itm-font-heavy);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.band-tabs a:hover {
  color: var(--itm-band-text);
}

/*
 * Der aktive Reiter reicht 1 px über die untere Randlinie des Bands und liegt
 * darüber, so geht er ohne Linie in die Seite über. Im Hellen ist der Rand
 * unsichtbar, dort ändert sich nichts.
 */
.band-tabs a[aria-current="page"] {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  padding-bottom: 1px;
  background: var(--itm-bg);
  border-top-color: var(--itm-band-indicator);
  color: var(--itm-text-strong);
}

/* Auch beim Darüberfahren bleibt der aktive Reiter bei Schrift und Fläche (seit 1.9 ausdrücklich). */
.band-tabs a[aria-current="page"]:hover {
  background: var(--itm-bg);
  color: var(--itm-text-strong);
}

.band a:focus-visible {
  outline: 3px solid var(--itm-focus-ring);
  outline-offset: 3px;
  box-shadow: none;
}

/*
 * Gruppen in den Reitern (seit 1.9): Das <summary> sieht aus wie ein Reiter,
 * in der Gruppe mit dem aktiven Untereintrag (band-group--active, vom Server
 * gesetzt, kein :has()) wie der aktive. Das Untermenü (.band-menu, Regeln bei
 * der Navigation) schwebt unter dem Reiter. Das Band selbst schneidet nichts
 * ab: Das Leuchten ist ein Hintergrund, der nie über den Rand malt, und weder
 * das Band noch seine Vorfahren tragen overflow.
 */
.band-group {
  position: relative;
}

.band-group > summary {
  min-height: 48px;
  padding: 0 16px;
  border-top: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  color: var(--itm-band-muted);
  font-family: var(--itm-font-heavy);
  font-size: 15px;
  font-weight: 700;
}

.band-group > summary:hover {
  color: var(--itm-band-text);
}

.band-group--active > summary {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  padding-bottom: 1px;
  background: var(--itm-bg);
  border-top-color: var(--itm-band-indicator);
  color: var(--itm-text-strong);
}

/*
 * Die aktive Gruppe behält in jedem Zustand Schrift und Fläche des aktiven
 * Reiters, sonst stünde beim Darüberfahren die helle Bandschrift auf der
 * hellen Fläche. Die Regel mit :hover ist so spezifisch wie
 * .band-group > summary:hover und steht danach; der Pfeil folgt über
 * currentColor.
 */
.band-group--active > summary:hover,
.band-group--active > summary:focus-visible,
.band-group--active[open] > summary,
.band-group--active[open] > summary:hover {
  background: var(--itm-bg);
  color: var(--itm-text-strong);
}

.band summary:focus-visible {
  outline: 3px solid var(--itm-focus-ring);
  outline-offset: 3px;
  box-shadow: none;
}

/*
 * Einträge des Untermenüs im Band: 44 px hoch, der aktive wie der aktive
 * Eintrag der Seitenleiste. Die Selektoren schlagen .band-tabs a und
 * .band-tabs a[aria-current], auch deren Form unter 40 rem.
 */
.band-tabs .band-menu a {
  display: flex;
  align-items: center;
  position: static;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--itm-radius-sm);
  background: transparent;
  color: var(--itm-text);
  font-family: var(--itm-font-medium);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.band-tabs .band-menu a:hover {
  background: var(--itm-hover-soft);
  color: var(--itm-primary);
}

.band-tabs .band-menu a[aria-current="page"] {
  position: static;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--itm-radius-sm);
  background: var(--itm-hover-soft);
  color: var(--itm-primary);
  box-shadow: inset 3px 0 0 var(--itm-primary);
  font-weight: 700;
}

.band-menu a:focus-visible {
  outline: 2px solid var(--itm-primary);
  outline-offset: -2px;
  box-shadow: none;
}

/*
 * Schmale Fenster unter 40 rem: Die Ampel rutscht unter den Titel, die
 * Reiter brechen um, der aktive bekommt rundum 10 px Radius. Ohne Skript.
 * Seit 1.9 stehen Untermenüs dort im Fluss, auch ohne Band.
 */
@media (max-width: 40rem) {
  .band {
    padding: 16px;
  }

  .band--tabs {
    padding-bottom: 12px;
  }

  .band-text {
    flex-basis: calc(100% - 64px);
  }

  .band-status {
    margin-left: 64px;
  }

  .band-tabs a[aria-current="page"] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-radius: 10px;
  }

  /*
   * Gruppen (seit 1.9), im Band wie in der Linien-Navigation: Der Punkt mit
   * der Gruppe nimmt die volle Breite, das Untermenü klappt im Fluss unter
   * dem Reiter auf statt zu schweben.
   */
  .band-group-item,
  .nav-group-item {
    flex: 1 1 100%;
  }

  .band-group--active > summary {
    margin-bottom: 0;
    padding-bottom: 0;
    border-radius: 10px;
  }

  .band-menu,
  .nav-menu {
    position: static;
    min-width: 0;
    box-shadow: none;
  }
}

/*
 * Bilder mit heller und dunkler Fassung (Logo im Kopf, Marke in der
 * Fusszeile, seit 1.1): sichtbar ist genau eine, nach denselben Regeln wie
 * theme.css. Steht nach .logo und .footer-logo, damit display: none greift.
 */
.only-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light {
    display: none;
  }

  :root:not([data-theme="light"]) .only-dark {
    display: block;
  }
}

[data-theme="dark"] .only-light {
  display: none;
}

[data-theme="dark"] .only-dark {
  display: block;
}

.incident {
  margin-top: 24px;
  color: var(--itm-text-secondary);
  font-size: 14px;
}

/* Meldungen: Symbol, Überschrift und Text, nie nur Farbe. */

.notice {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px 12px;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--itm-info-bg);
  color: var(--itm-text);
  border: 1px solid var(--itm-line-strong);
  border-left: 4px solid var(--itm-info);
  border-radius: var(--itm-radius-md);
}

.notice::before {
  content: "i";
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--itm-radius-pill);
  background: var(--itm-info);
  color: var(--itm-on-primary);
  font-family: var(--itm-font-heavy);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}

.notice strong {
  color: var(--itm-info);
  font-family: var(--itm-font-medium);
  font-weight: 500;
}

.notice p {
  margin: 0;
}

.notice--success {
  background: var(--itm-success-bg);
  border-left-color: var(--itm-success);
}

.notice--success::before {
  content: "\2713";
  background: var(--itm-success);
}

.notice--success strong {
  color: var(--itm-success);
}

.notice--warning {
  background: var(--itm-warning-bg);
  border-left-color: var(--itm-warning);
}

.notice--warning::before {
  content: "!";
  background: var(--itm-warning);
}

.notice--warning strong {
  color: var(--itm-warning);
}

.notice--danger {
  background: var(--itm-danger-bg);
  border-left-color: var(--itm-danger);
}

.notice--danger::before {
  content: "\00D7";
  background: var(--itm-danger);
}

.notice--danger strong {
  color: var(--itm-danger);
}

.notice--neutral {
  background: var(--itm-neutral-bg);
  border-left-color: var(--itm-neutral);
}

.notice--neutral::before {
  content: "\2013";
  background: var(--itm-neutral);
}

.notice--neutral strong {
  color: var(--itm-neutral);
}

/* Kennzeichen (Status in Tabellen): Punkt plus Text. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 10px;
  border-radius: var(--itm-radius-pill);
  font-family: var(--itm-font-medium);
  font-size: 13px;
  white-space: nowrap;
  color: var(--itm-info);
  background: var(--itm-info-bg);
}

.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.badge--success {
  color: var(--itm-success);
  background: var(--itm-success-bg);
}

.badge--warning {
  color: var(--itm-warning);
  background: var(--itm-warning-bg);
}

.badge--danger {
  color: var(--itm-danger);
  background: var(--itm-danger-bg);
}

.badge--neutral {
  color: var(--itm-neutral);
  background: var(--itm-neutral-bg);
}

/* Tabellen: echter Kopf, Zebrastreifen, Zahlen rechtsbündig und tabellarisch. */

/*
 * Bei schmalem Fenster scrollt die Tabelle waagerecht in ihrem Rahmen, statt
 * Spalten abzuschneiden. Der Rahmen selbst ist nie breiter als der Inhalt der
 * Seite, die Seite scrollt also nicht waagerecht.
 */
.table-wrap {
  max-width: 100%;
  margin: 0 0 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--itm-line);
  border-radius: var(--itm-radius-md);
  background: var(--itm-card);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.table caption {
  padding: 12px 14px;
  text-align: left;
  color: var(--itm-text-secondary);
  font-size: 14px;
}

.table th,
.table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--itm-line);
}

.table thead th {
  background: var(--itm-table-head);
  color: var(--itm-on-table-head);
  font-family: var(--itm-font-medium);
  font-weight: 500;
  white-space: nowrap;
}

.table tbody tr:nth-child(even) {
  background: var(--itm-table-zebra);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table td {
  overflow-wrap: break-word;
}

/* Zahlen und Datumsangaben brechen nie um. */
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table .nowrap {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.table-wrap:focus-visible {
  outline: 2px solid var(--itm-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--itm-focus-ring);
}

/*
 * Sortierbare Spaltenköpfe (Components::table() mit sort): Link über den
 * ganzen Kopf, Pfeil der aktuellen Richtung, ohne Skript.
 */
.table thead th a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: inherit;
  text-decoration: none;
}

.table thead th a:hover {
  text-decoration: underline;
}

.table thead th a:focus-visible {
  outline-color: var(--itm-on-table-head);
}

.sort-arrow {
  font-size: 12px;
  line-height: 1;
}

/* Leere Tabelle: nur der Satz im Rahmen der Tabelle, Abstand wie eine Zelle. */
.table-empty {
  margin: 0;
  padding: 12px 14px;
  color: var(--itm-text-secondary);
}

/* Formulare: Beschriftung über dem Feld, zwei Spalten ab 768 px, Fehler am Feld. */

.form {
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 24px;
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.field--wide {
  grid-column: 1 / -1;
}

/*
 * Neue Zeile ohne volle Breite (Form::newRow()): Das Feld steht in der
 * linken Spalte. Stand das Feld davor ebenfalls links, rückt es dafür in die
 * nächste Zeile, die rechte Spalte bleibt frei.
 */
.field--new-row {
  grid-column-start: 1;
}

.field label,
.field .label {
  font-family: var(--itm-font-medium);
  font-size: 14px;
}

.field .required {
  color: var(--itm-text-secondary);
  font-family: var(--itm-font-body);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  background: var(--itm-card);
  color: var(--itm-text);
  border: 1px solid var(--itm-control-border);
  border-radius: var(--itm-radius-md);
  font-family: var(--itm-font-body);
  font-size: 16px;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--itm-primary);
}

/*
 * Breite nach Inhalt (Form, Parameter chars): Das Eingabefeld ist höchstens
 * so breit wie die Stufe in Zeichen plus Innenabstand und Rahmen
 * (2 × 14 px + 2 × 1 px) plus einem Zuschlag für Bedienelemente des
 * Browsers (--itm-field-spin, sonst 0). ch misst im Schriftbild des Felds.
 * Wegen width: 100% bleibt es auf schmalen Bildschirmen in seiner Spalte.
 * Stufen wie Form::WIDTH_STEPS.
 */

/*
 * Zahlenfelder: Der Browser zeichnet rechts im Feld Pfeile zum Hoch- und
 * Runterzählen (etwa 15 bis 20 px je nach Browser). Der Zuschlag hält dafür
 * Platz frei, damit ein Feld für 10 Ziffern 10 Ziffern zeigt. Die Stufe
 * selbst bleibt die Zahl der Zeichen.
 */
.field input[type="number"] {
  --itm-field-spin: 28px;
}

.field--ch-2 input {
  max-width: calc(2ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-3 input {
  max-width: calc(3ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-4 input {
  max-width: calc(4ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-5 input {
  max-width: calc(5ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-6 input {
  max-width: calc(6ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-8 input {
  max-width: calc(8ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-10 input {
  max-width: calc(10ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-12 input {
  max-width: calc(12ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-14 input {
  max-width: calc(14ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-16 input {
  max-width: calc(16ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-20 input {
  max-width: calc(20ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-24 input {
  max-width: calc(24ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-28 input {
  max-width: calc(28ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-32 input {
  max-width: calc(32ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-36 input {
  max-width: calc(36ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-40 input {
  max-width: calc(40ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-48 input {
  max-width: calc(48ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-56 input {
  max-width: calc(56ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-64 input {
  max-width: calc(64ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-72 input {
  max-width: calc(72ch + 30px + var(--itm-field-spin, 0px));
}

.field--ch-80 input {
  max-width: calc(80ch + 30px + var(--itm-field-spin, 0px));
}

/*
 * Dateifeld: Rahmen wie die übrigen Felder, die Auswahl erscheint als
 * sekundäre Schaltfläche. Ohne JavaScript, Farben nur aus Variablen, damit
 * hell und dunkel gleich funktionieren.
 */
.field input[type="file"] {
  padding: 5px 14px 5px 5px;
  line-height: 32px;
  cursor: pointer;
}

.field input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 14px;
  padding: 4px 18px;
  border: 1px solid var(--itm-primary);
  border-radius: var(--itm-radius-sm);
  background: transparent;
  color: var(--itm-primary);
  font-family: var(--itm-font-medium);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 150ms var(--itm-ease), color 150ms var(--itm-ease);
}

.field input[type="file"]:hover::file-selector-button {
  background: var(--itm-hover-soft);
  color: var(--itm-primary-hover);
}

.field .hint {
  margin: 0;
  color: var(--itm-text-secondary);
  font-size: 14px;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--itm-danger);
  border-width: 2px;
}

.field .error {
  margin: 0;
  color: var(--itm-danger);
  font-size: 14px;
}

.field .error::before {
  content: "\00D7";
  display: inline-block;
  margin-right: 6px;
  font-family: var(--itm-font-heavy);
  font-weight: 800;
}

/*
 * Hinweiskasten im Formular (Form::notice()): über die volle Breite an der
 * Stelle im Raster, an der er aufgerufen wird.
 */
.form-notice {
  grid-column: 1 / -1;
  min-width: 0;
}

.form-notice .notice {
  margin: 0;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.checkbox input {
  width: 20px;
  height: 20px;
  min-height: 0;
}

/* Schaltflächen: primär, sekundär, gefährlich. Mindestens 44 px hoch. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 22px;
  border: 1px solid var(--itm-primary);
  border-radius: var(--itm-radius-md);
  background: transparent;
  color: var(--itm-primary);
  font-family: var(--itm-font-medium);
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--itm-ease), color 150ms var(--itm-ease);
}

.button:hover {
  background: var(--itm-hover-soft);
  color: var(--itm-primary-hover);
}

.button--primary {
  background: var(--itm-primary);
  color: var(--itm-on-primary);
}

.button--primary:hover {
  background: var(--itm-primary-hover);
  border-color: var(--itm-primary-hover);
  color: var(--itm-on-primary);
}

.button--danger {
  background: var(--itm-danger);
  border-color: var(--itm-danger);
  color: var(--itm-on-danger);
}

.button--danger:hover {
  background: var(--itm-danger);
  color: var(--itm-on-danger);
  text-decoration: underline;
}

.button--link {
  border-color: transparent;
}

/* Ghost (seit 1.6, Abmelden in der Kopfleiste mit Band): ohne Rahmen, Grund erst beim Darüberfahren. */
.button--ghost {
  border-color: transparent;
  background: transparent;
}

.button--ghost:hover {
  background: var(--itm-hover-soft);
}

.button[disabled],
.button[aria-disabled="true"] {
  background: var(--itm-disabled-bg);
  border-color: var(--itm-disabled-border);
  color: var(--itm-disabled);
  cursor: not-allowed;
}

/*
 * Schaltflächen unten rechts. Im Quelltext steht die Hauptaktion zuerst,
 * damit Enter im Formular sie auslöst; row-reverse zeigt sie ganz rechts.
 */
.actions {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin: 32px 0 0;
}

/* Seitenweise blättern */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--itm-line-strong);
  border-radius: var(--itm-radius-md);
  text-decoration: none;
  font-family: var(--itm-font-medium);
  font-variant-numeric: tabular-nums;
}

.pagination a:hover {
  background: var(--itm-hover-soft);
}

.pagination [aria-current="page"] {
  background: var(--itm-primary);
  border-color: var(--itm-primary);
  color: var(--itm-on-primary);
}

.pagination .disabled {
  color: var(--itm-disabled);
  background: var(--itm-disabled-bg);
  border-color: var(--itm-disabled-border);
}

/*
 * Bildvorschau auf festem Grund (Components::imagePreview()): hell bzw.
 * dunkel unabhängig vom Modus der Seite, Rand und Innenabstand wie .card.
 * Das Bild wird eingepasst, nie vergrössert: ohne feste Breite und Höhe nur
 * mit Obergrenzen, object-fit: contain hält das Seitenverhältnis.
 */

.image-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 32px;
  border: 1px solid;
  border-radius: var(--itm-radius-lg);
}

@media (max-width: 480px) {
  .image-preview {
    padding: 24px 20px;
  }
}

.image-preview--light {
  background: var(--itm-preview-light-bg);
  border-color: var(--itm-preview-light-line);
}

.image-preview--dark {
  background: var(--itm-preview-dark-bg);
  border-color: var(--itm-preview-dark-line);
}

.image-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Höchsthöhe je Stufe wie Components::PREVIEW_HEIGHTS */

.image-preview--h-24 img {
  max-height: 24px;
}

.image-preview--h-32 img {
  max-height: 32px;
}

.image-preview--h-48 img {
  max-height: 48px;
}

.image-preview--h-64 img {
  max-height: 64px;
}

.image-preview--h-96 img {
  max-height: 96px;
}

.image-preview--h-128 img {
  max-height: 128px;
}

.image-preview--h-192 img {
  max-height: 192px;
}

.image-preview--h-256 img {
  max-height: 256px;
}

.image-preview--h-384 img {
  max-height: 384px;
}

.image-preview--h-512 img {
  max-height: 512px;
}

/*
 * Hervorgehobene Kennung (Components::identifier()), etwa auf einer
 * Bestätigungsseite: gross, Festbreitenschrift, damit sich ähnliche Zeichen
 * (l, 1, I, 0, O) unterscheiden lassen. Farben aus den Variablen, die mit dem
 * Modus umschalten.
 */

.identifier {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 8px 16px;
  background: var(--itm-raised);
  color: var(--itm-text);
  border: 1px solid var(--itm-line-strong);
  border-radius: var(--itm-radius-md);
  font-family: var(--itm-font-mono);
  font-size: 28px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/*
 * Farbfeld (Components::colorSwatch()): Feld plus Wert als Text. Die Farbe
 * setzt die Klasse swatch--<hex> aus theme.css, nie ein style-Attribut.
 */
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}

.swatch-field {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--itm-line-strong);
  border-radius: var(--itm-radius-sm);
}

/* Beschreibungsliste für Angaben (Name, Wert) */

.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 24px;
  margin: 0 0 24px;
}

.details dt {
  color: var(--itm-text-secondary);
}

.details dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/*
 * Zeitstrahl (seit 1.8, Components::timeline()): SVG ohne Inline-Stile, Lage
 * nur über Attribute, Farben nur über die Klassen tl-… mit Variablen des
 * Themes. Marken sind Kreise fester Grösse, "läuft" ist ein Ring. Die
 * Beschriftungen der Achse stehen als HTML-Liste darunter, die Lage in ganzen
 * Prozent über tl-at-0 bis tl-at-100.
 */

.timeline {
  margin: 0 0 24px;
  padding: 0 8px;
}

.timeline-chart {
  display: block;
  width: 100%;
}

.tl-label {
  fill: var(--itm-text-secondary);
  font-family: var(--itm-font-body);
  font-size: 13px;
}

.tl-line {
  fill: var(--itm-line);
}

.tl-axis {
  stroke: var(--itm-line);
  stroke-width: 1;
}

.tl-expected {
  stroke: var(--itm-text-secondary);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.tl-now {
  stroke: var(--itm-primary);
  stroke-width: 2;
}

.tl-segment {
  stroke: none;
}

.tl-marker {
  stroke: var(--itm-card);
  stroke-width: 1.5;
}

.tl-ok {
  fill: var(--itm-success);
}

.tl-warn {
  fill: var(--itm-warning);
}

.tl-err {
  fill: var(--itm-danger);
}

.tl-unknown {
  fill: var(--itm-neutral);
}

.tl-running {
  fill: var(--itm-info);
}

.tl-marker.tl-running {
  fill: var(--itm-card);
  stroke: var(--itm-info);
  stroke-width: 3;
}

.timeline-axis {
  position: relative;
  height: 1.6em;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: var(--itm-text-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.timeline-axis li {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.timeline-axis li.tl-at-0 {
  transform: none;
}

.timeline-axis li.tl-at-100 {
  transform: translateX(-100%);
}

.tl-at-0 { left: 0%; }
.tl-at-1 { left: 1%; }
.tl-at-2 { left: 2%; }
.tl-at-3 { left: 3%; }
.tl-at-4 { left: 4%; }
.tl-at-5 { left: 5%; }
.tl-at-6 { left: 6%; }
.tl-at-7 { left: 7%; }
.tl-at-8 { left: 8%; }
.tl-at-9 { left: 9%; }
.tl-at-10 { left: 10%; }
.tl-at-11 { left: 11%; }
.tl-at-12 { left: 12%; }
.tl-at-13 { left: 13%; }
.tl-at-14 { left: 14%; }
.tl-at-15 { left: 15%; }
.tl-at-16 { left: 16%; }
.tl-at-17 { left: 17%; }
.tl-at-18 { left: 18%; }
.tl-at-19 { left: 19%; }
.tl-at-20 { left: 20%; }
.tl-at-21 { left: 21%; }
.tl-at-22 { left: 22%; }
.tl-at-23 { left: 23%; }
.tl-at-24 { left: 24%; }
.tl-at-25 { left: 25%; }
.tl-at-26 { left: 26%; }
.tl-at-27 { left: 27%; }
.tl-at-28 { left: 28%; }
.tl-at-29 { left: 29%; }
.tl-at-30 { left: 30%; }
.tl-at-31 { left: 31%; }
.tl-at-32 { left: 32%; }
.tl-at-33 { left: 33%; }
.tl-at-34 { left: 34%; }
.tl-at-35 { left: 35%; }
.tl-at-36 { left: 36%; }
.tl-at-37 { left: 37%; }
.tl-at-38 { left: 38%; }
.tl-at-39 { left: 39%; }
.tl-at-40 { left: 40%; }
.tl-at-41 { left: 41%; }
.tl-at-42 { left: 42%; }
.tl-at-43 { left: 43%; }
.tl-at-44 { left: 44%; }
.tl-at-45 { left: 45%; }
.tl-at-46 { left: 46%; }
.tl-at-47 { left: 47%; }
.tl-at-48 { left: 48%; }
.tl-at-49 { left: 49%; }
.tl-at-50 { left: 50%; }
.tl-at-51 { left: 51%; }
.tl-at-52 { left: 52%; }
.tl-at-53 { left: 53%; }
.tl-at-54 { left: 54%; }
.tl-at-55 { left: 55%; }
.tl-at-56 { left: 56%; }
.tl-at-57 { left: 57%; }
.tl-at-58 { left: 58%; }
.tl-at-59 { left: 59%; }
.tl-at-60 { left: 60%; }
.tl-at-61 { left: 61%; }
.tl-at-62 { left: 62%; }
.tl-at-63 { left: 63%; }
.tl-at-64 { left: 64%; }
.tl-at-65 { left: 65%; }
.tl-at-66 { left: 66%; }
.tl-at-67 { left: 67%; }
.tl-at-68 { left: 68%; }
.tl-at-69 { left: 69%; }
.tl-at-70 { left: 70%; }
.tl-at-71 { left: 71%; }
.tl-at-72 { left: 72%; }
.tl-at-73 { left: 73%; }
.tl-at-74 { left: 74%; }
.tl-at-75 { left: 75%; }
.tl-at-76 { left: 76%; }
.tl-at-77 { left: 77%; }
.tl-at-78 { left: 78%; }
.tl-at-79 { left: 79%; }
.tl-at-80 { left: 80%; }
.tl-at-81 { left: 81%; }
.tl-at-82 { left: 82%; }
.tl-at-83 { left: 83%; }
.tl-at-84 { left: 84%; }
.tl-at-85 { left: 85%; }
.tl-at-86 { left: 86%; }
.tl-at-87 { left: 87%; }
.tl-at-88 { left: 88%; }
.tl-at-89 { left: 89%; }
.tl-at-90 { left: 90%; }
.tl-at-91 { left: 91%; }
.tl-at-92 { left: 92%; }
.tl-at-93 { left: 93%; }
.tl-at-94 { left: 94%; }
.tl-at-95 { left: 95%; }
.tl-at-96 { left: 96%; }
.tl-at-97 { left: 97%; }
.tl-at-98 { left: 98%; }
.tl-at-99 { left: 99%; }
.tl-at-100 { left: 100%; }

/*
 * Aufklapper (seit 1.8, Components::disclosure()): <details> mit <summary>,
 * Pfeil als SVG, der sich beim Öffnen dreht. Ohne Skript, Zeile mindestens
 * 44 px hoch, Fokus wie überall.
 */

.disclosure {
  margin: 0 0 12px;
  border: 1px solid var(--itm-line);
  border-radius: var(--itm-radius-md);
  background: var(--itm-card);
}

.disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--itm-radius-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--itm-font-heavy);
  font-weight: 700;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary::marker {
  content: "";
}

.disclosure > summary:hover {
  background: var(--itm-hover-soft);
}

.disclosure-icon {
  flex: none;
  transition: transform .15s var(--itm-ease);
}

.disclosure-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.disclosure[open] > summary .disclosure-icon {
  transform: rotate(90deg);
}

.disclosure-body {
  padding: 0 16px 16px 40px;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .field input[type="file"]::file-selector-button,
  .disclosure-icon,
  .group-icon,
  .tile-card {
    transition: none;
  }
}