/*
 * Gestaltung der öffentlichen Ansichten von Uvst.Web.
 *
 * Aufbau und Werte folgen dem Referenzprojekt UvstWebMigration (core/app/assets/css/main.css, Entwurf „Klar &
 * Verbindlich“): Alles, was das Erscheinungsbild ausmacht, steht als Token in :root. Wer die Gestaltung ändern will,
 * ändert diese Werte, nicht die Regeln darunter.
 *
 * Schriften: Das Framework liefert Inter (Fließtext) und Raleway (Überschriften) selbst aus und setzt sie global mit
 * !important (PSApplication.razor). Das Referenzprojekt nutzt Sora für Überschriften; das ist hier nicht verfügbar.
 */

/*
 * Das Framework sperrt das Scrollen der Seite (html { overflow: hidden }, feste Hülle mit eigenen Scrollbereichen).
 * Die öffentlichen Ansichten scrollen als ganze Seite, damit die Kopfzeile kleben kann und die Seite bei jeder
 * Navigation nach oben springt.
 */
html:has(.uvst-site) {
  overflow: auto;
}

/* ───────────────────────────────────────────────────────────── Design-Tokens */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Raleway", var(--font-sans);

  /* Marke. --uvst-primary ist die vorgegebene CI-Farbe und bleibt fest. */
  --uvst-primary: #e30513;
  --uvst-primary-deep: #c00411;
  --uvst-primary-soft: #fdecee;

  /* Schrift- und Flächenfarben */
  --uvst-ink: #141519;
  --uvst-ink-2: #2a2d34;
  --uvst-muted: #5c616b;
  --uvst-line: #e6e7ec;
  --uvst-line-strong: #d7d9e0;
  --uvst-surface: #ffffff;
  --uvst-surface-2: #f1f2f5;
  --uvst-page-bg: #f6f7f9;

  /* Dunkle Flächen (Fußzeile) */
  --uvst-dark: #101114;
  --uvst-dark-line: #24262c;
  --uvst-dark-text: #b6bac2;
  --uvst-dark-muted: #7d828c;

  --uvst-max-width: 1160px;

  /* Kundenbereich: breiterer Inhalt als auf den öffentlichen Seiten (siehe .mud-main-content .uvst-container) */
  --uvst-app-max-width: 1440px;

  /* Radien und Schatten */
  --uvst-radius: 16px;
  --uvst-radius-sm: 10px;
  --uvst-radius-input: 8px;
  --uvst-radius-pill: 999px;
  --uvst-shadow-sm: 0 1px 2px rgba(20, 21, 25, 0.05), 0 1px 3px rgba(20, 21, 25, 0.06);
  --uvst-shadow-md: 0 8px 30px rgba(20, 21, 25, 0.08);

  /* Bedienelemente */
  --uvst-control-height: 2.25rem;
  --uvst-control-pad-y: 0.375rem;
  --uvst-control-pad-x: 0.625rem;

  /* Schriftgrößen */
  --uvst-text-xs: 0.75rem;
  --uvst-text-sm: 0.8125rem;
  --uvst-text-md: 0.875rem;
  --uvst-text-base: 0.9375rem;
  --uvst-text-lg: 1rem;
  --uvst-text-xl: 1.125rem;
  --uvst-text-2xl: 1.25rem;

  /* Abstände */
  --uvst-space-0p5: 0.125rem;
  --uvst-space-1: 0.25rem;
  --uvst-space-1p5: 0.375rem;
  --uvst-space-2: 0.5rem;
  --uvst-space-2p5: 0.625rem;
  --uvst-space-3: 0.75rem;
  --uvst-space-3p5: 0.875rem;
  --uvst-space-4: 1rem;
  --uvst-space-5: 1.25rem;
  --uvst-space-6: 1.5rem;
  --uvst-space-8: 2rem;
  --uvst-space-10: 2.5rem;
  --uvst-space-12: 3rem;
}

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

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--uvst-ink);
  background: var(--uvst-page-bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

a {
  color: var(--uvst-primary);
  text-decoration: none;
}

a:hover {
  color: var(--uvst-primary-deep);
  text-decoration: underline;
}

img,
svg {
  max-width: 100%;
}

button:not(:disabled) {
  cursor: pointer;
}

/* Sichtbarer Fokus in der Markenfarbe, damit die Tastaturbedienung nachvollziehbar bleibt. */
:focus-visible {
  outline: 3px solid var(--uvst-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

h1:focus {
  outline: none;
}

/* ═════════════════════════════════════════════════════ Hülle der Seiten */
.uvst-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--uvst-page-bg);
}

.uvst-site-main {
  flex: 1;
}

.uvst-container {
  max-width: var(--uvst-max-width);
  margin: 0 auto;
  padding: 0 var(--uvst-space-6);
}

/* ── Kopfzeile: klebend und leicht durchscheinend ──────────────────────── */
.uvst-site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--uvst-line);
}

.uvst-head-in {
  display: flex;
  align-items: center;
  gap: var(--uvst-space-6);
  height: 72px;
}

.uvst-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.uvst-brand img {
  height: 38px;
  width: auto;
  display: block;
}

/* ── Hauptnavigation ───────────────────────────────────────────────────── */
.uvst-mainnav {
  margin-left: auto;
}

.uvst-mainnav ul {
  display: flex;
  align-items: center;
  gap: var(--uvst-space-0p5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.uvst-mainnav a {
  display: block;
  color: var(--uvst-ink-2);
  font-weight: 500;
  font-size: var(--uvst-text-base);
  padding: var(--uvst-space-2) var(--uvst-space-3p5);
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.uvst-mainnav a:hover {
  color: var(--uvst-ink);
  background: var(--uvst-surface-2);
  text-decoration: none;
}

.uvst-mainnav a.uvst-active {
  color: var(--uvst-primary);
}

/* Nur im aufgeklappten Menü auf dem Telefon sichtbar (siehe Medienabschnitt unten). */
.uvst-mainnav-login {
  display: none;
}

.uvst-head-actions {
  display: flex;
  align-items: center;
  gap: var(--uvst-space-2p5);
  margin-left: var(--uvst-space-2);
}

/* Das Kontrollkästchen steuert das Menü unter 900 px; es selbst bleibt unsichtbar, aber mit der Tastatur erreichbar. */
.uvst-menu-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.uvst-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--uvst-line-strong);
  border-radius: var(--uvst-radius-sm);
  color: var(--uvst-ink-2);
  cursor: pointer;
}

.uvst-menu-check:focus-visible ~ .uvst-head-actions .uvst-menu-btn {
  outline: 3px solid var(--uvst-primary);
  outline-offset: 2px;
}

.uvst-menu-icon-close {
  display: none;
}

/* ── Knöpfe ────────────────────────────────────────────────────────────── */
.uvst-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--uvst-space-2);
  min-height: 2.5rem;
  padding: var(--uvst-space-2) var(--uvst-space-4);
  border: 1px solid transparent;
  border-radius: var(--uvst-radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--uvst-text-md);
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.uvst-btn:hover {
  text-decoration: none;
}

.uvst-btn-lg {
  min-height: 3rem;
  padding: var(--uvst-space-3) var(--uvst-space-6);
  font-size: var(--uvst-text-base);
  border-radius: 12px;
}

.uvst-btn-primary {
  background: var(--uvst-primary);
  color: #ffffff;
}

.uvst-btn-primary:hover {
  background: var(--uvst-primary-deep);
  color: #ffffff;
}

.uvst-btn-outline {
  background: var(--uvst-surface);
  border-color: var(--uvst-line-strong);
  color: var(--uvst-ink);
}

.uvst-btn-outline:hover {
  background: var(--uvst-surface-2);
  color: var(--uvst-ink);
}

.uvst-btn-outline-primary {
  background: transparent;
  border-color: var(--uvst-primary);
  color: var(--uvst-primary);
}

.uvst-btn-outline-primary:hover {
  background: var(--uvst-primary-soft);
  color: var(--uvst-primary-deep);
}

.uvst-btn-ghost {
  background: transparent;
  color: var(--uvst-ink-2);
}

.uvst-btn-ghost:hover {
  background: var(--uvst-surface-2);
  color: var(--uvst-ink);
}

.uvst-btn-dark {
  background: var(--uvst-ink);
  color: #ffffff;
}

.uvst-btn-dark:hover {
  background: #000000;
  color: #ffffff;
}

/* ── Abschnitte und Seitenkopf ─────────────────────────────────────────── */
.uvst-section {
  padding: var(--uvst-space-12) 0;
}

.uvst-section-tight {
  padding: var(--uvst-space-8) 0;
}

.uvst-sec-head {
  max-width: 640px;
  margin-bottom: var(--uvst-space-10);
}

.uvst-sec-head h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  margin: var(--uvst-space-3) 0;
}

.uvst-sec-head p {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-xl);
  margin: 0;
}

/* Kleine Auszeichnung über einer Überschrift, mit rotem Strich davor. */
.uvst-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--uvst-space-2);
  font-family: var(--font-display);
  font-size: var(--uvst-text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uvst-primary);
}

.uvst-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--uvst-primary);
  border-radius: 2px;
}

.uvst-page-hero {
  border-bottom: 1px solid var(--uvst-line);
  background: var(--uvst-surface);
}

.uvst-page-hero .uvst-container {
  padding-top: var(--uvst-space-12);
  padding-bottom: var(--uvst-space-12);
}

.uvst-page-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  margin: var(--uvst-space-3) 0;
}

.uvst-page-hero p {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-xl);
  max-width: 640px;
  margin: 0;
}

.uvst-page-hero-center {
  text-align: center;
}

.uvst-page-hero-center .uvst-eyebrow {
  justify-content: center;
}

.uvst-page-hero-center p {
  margin-left: auto;
  margin-right: auto;
}

/* Im Kundenbereich liefert der Rahmen des Frameworks schon Kopfleiste und Menü: der Seitenkopf fällt kompakter aus. */
.mud-main-content .uvst-page-hero .uvst-container {
  padding-top: var(--uvst-space-6);
  padding-bottom: var(--uvst-space-6);
}

.mud-main-content .uvst-page-hero h1 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

.mud-main-content .uvst-section {
  padding: var(--uvst-space-8) 0;
}

/*
 * Im Kundenbereich ist der Inhalt breiter als auf den öffentlichen Seiten (--uvst-app-max-width statt --uvst-max-width): Tabellen brauchen die Breite.
 * Seitenkopf und Karten sitzen im selben Container und haben darum dieselbe linke Kante und Breite; keine Seite setzt eine eigene Breite.
 * Die größeren Seitenränder gelten erst ab 1440 px: Darunter wäre der Inhalt bei offenem Menü schmaler als vorher.
 */
.mud-main-content .uvst-container {
  max-width: var(--uvst-app-max-width);
}

@media (min-width: 1440px) {
  .mud-main-content .uvst-container {
    padding-left: var(--uvst-space-8);
    padding-right: var(--uvst-space-8);
  }
}

.mud-main-content .uvst-page-hero p {
  max-width: 760px;
}

/* Lesebreite für Fließtextseiten (Bedingungen, Impressum, Über uns). */
.uvst-readable {
  max-width: 760px;
}

.uvst-readable-card {
  max-width: calc(760px + 2 * var(--uvst-space-8));
  padding: var(--uvst-space-8);
}


/* ── Fußzeile ──────────────────────────────────────────────────────────── */
.uvst-site-foot {
  background: var(--uvst-dark);
  color: var(--uvst-dark-text);
  padding: var(--uvst-space-12) 0 var(--uvst-space-8);
}

.uvst-foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uvst-space-8);
}

.uvst-foot-brand img {
  height: 34px;
  width: auto;
  /* Das Logo liegt nur farbig vor; auf dunklem Grund wird es weiß gerechnet, statt eine zweite Datei zu pflegen. */
  filter: brightness(0) invert(1);
}

.uvst-foot-brand p {
  font-size: var(--uvst-text-sm);
  color: var(--uvst-dark-muted);
  margin: var(--uvst-space-4) 0 0;
  max-width: 260px;
}

.uvst-site-foot h2 {
  color: #ffffff;
  font-size: var(--uvst-text-md);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 var(--uvst-space-4);
}

.uvst-site-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--uvst-space-2p5);
}

.uvst-site-foot a {
  color: var(--uvst-dark-text);
  font-size: var(--uvst-text-md);
}

.uvst-site-foot a:hover {
  color: #ffffff;
}

.uvst-site-foot address {
  font-style: normal;
  font-size: var(--uvst-text-md);
  line-height: 1.9;
}

.uvst-foot-bottom {
  border-top: 1px solid var(--uvst-dark-line);
  margin-top: var(--uvst-space-10);
  padding-top: var(--uvst-space-6);
  display: flex;
  justify-content: space-between;
  gap: var(--uvst-space-4);
  flex-wrap: wrap;
  font-size: var(--uvst-text-md);
  color: var(--uvst-dark-muted);
}

/* ═════════════════════════════════════════════════════════ Startseite */
.uvst-hero {
  background: linear-gradient(180deg, var(--uvst-surface) 0%, var(--uvst-page-bg) 100%);
  border-bottom: 1px solid var(--uvst-line);
  overflow: hidden;
}

/* padding-block, nicht padding: das Element ist zugleich .uvst-container und braucht seinen seitlichen Innenabstand. */
.uvst-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uvst-space-10);
  align-items: center;
  padding-block: var(--uvst-space-12);
}

.uvst-hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: var(--uvst-space-4) 0 var(--uvst-space-5);
}

/* Hinterlegtes Wort in der Überschrift, wie ein Textmarker unter der Schrift. */
.uvst-hero-mark {
  color: var(--uvst-primary);
  background: linear-gradient(transparent 62%, var(--uvst-primary-soft) 62%);
}

.uvst-hero-lead {
  font-size: var(--uvst-text-xl);
  color: var(--uvst-muted);
  max-width: 520px;
  margin: 0 0 var(--uvst-space-8);
}

.uvst-hero-cta {
  display: flex;
  gap: var(--uvst-space-3);
  flex-wrap: wrap;
  align-items: center;
}

.uvst-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uvst-space-2p5);
  margin: var(--uvst-space-10) 0 0;
  padding: 0;
  list-style: none;
}

.uvst-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--uvst-space-2);
  background: var(--uvst-surface);
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius-pill);
  padding: var(--uvst-space-2) var(--uvst-space-3p5);
  font-size: var(--uvst-text-sm);
  font-weight: 500;
  color: var(--uvst-ink-2);
}

.uvst-chip svg {
  color: var(--uvst-primary);
}

/* Karte rechts im Hero: Betriebszeiten der drei Dienstgruppen. */
.uvst-hero-card {
  background: var(--uvst-surface);
  border: 1px solid var(--uvst-line);
  border-radius: 18px;
  box-shadow: var(--uvst-shadow-md);
  padding: var(--uvst-space-6);
}

.uvst-hero-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uvst-space-3);
  margin-bottom: var(--uvst-space-5);
}

.uvst-hero-card-head h2 {
  font-size: var(--uvst-text-base);
  font-weight: 600;
  margin: 0;
}

.uvst-hero-card dl {
  margin: 0;
}

.uvst-status {
  display: inline-flex;
  align-items: center;
  gap: var(--uvst-space-2);
  font-size: var(--uvst-text-sm);
  font-weight: 600;
  color: #16794c;
}

.uvst-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f9d5f;
  box-shadow: 0 0 0 3px rgba(31, 157, 95, 0.18);
}

.uvst-reg-row {
  display: flex;
  align-items: center;
  gap: var(--uvst-space-3);
  padding: var(--uvst-space-3) 0;
  border-bottom: 1px solid var(--uvst-line);
}

.uvst-reg-row:last-child {
  border-bottom: 0;
}

.uvst-reg-row dt {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: var(--uvst-text-base);
}

.uvst-reg-row dt small {
  display: block;
  font-size: var(--uvst-text-sm);
  font-weight: 400;
  color: var(--uvst-muted);
}

.uvst-reg-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--uvst-text-md);
  color: var(--uvst-ink-2);
  text-align: right;
}

/* ── Leistungskarten ───────────────────────────────────────────────────── */
.uvst-svcs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uvst-space-5);
}

/* Flex-Spalte, damit „Mehr erfahren“ am unteren Rand sitzt, egal wie lang der Text ist. */
.uvst-svc {
  display: flex;
  flex-direction: column;
  background: var(--uvst-surface);
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius);
  padding: var(--uvst-space-6);
  color: inherit;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.uvst-svc:hover {
  transform: translateY(-4px);
  box-shadow: var(--uvst-shadow-md);
  border-color: var(--uvst-line-strong);
  color: inherit;
  text-decoration: none;
}

.uvst-svc h3 {
  font-size: var(--uvst-text-xl);
  font-weight: 600;
  margin: 0 0 var(--uvst-space-2);
  color: var(--uvst-ink);
}

.uvst-svc p {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-base);
  margin: 0 0 var(--uvst-space-4);
}

.uvst-svc-more {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--uvst-text-sm);
  font-weight: 600;
  color: var(--uvst-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--uvst-space-1p5);
}

/* Symbolkachel einer Leistungskarte; die Farbe kommt aus --uvst-svc-color der jeweiligen Klasse. */
.uvst-svc-icon {
  width: 48px;
  height: 48px;
  flex: none;
  align-self: flex-start;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: var(--uvst-space-4);
  background: color-mix(in srgb, var(--uvst-svc-color, var(--uvst-primary)) 12%, transparent);
}

.uvst-svc-icon svg {
  color: var(--uvst-svc-color, var(--uvst-primary));
}

/*
 * Symbole aus der CI-Sammlung (img/features) werden unverändert als Maske benutzt und über die Fläche eingefärbt: Die
 * Sammlung sieht „Farbe über CSS (currentColor)“ vor, und eine Datei in einem <img> erbt currentColor nicht.
 */
.uvst-svc-symbol::before {
  content: "";
  width: 24px;
  height: 24px;
  background: var(--uvst-svc-color, var(--uvst-primary));
  -webkit-mask: var(--uvst-svc-symbol) center / contain no-repeat;
  mask: var(--uvst-svc-symbol) center / contain no-repeat;
}

.uvst-svc-erv {
  --uvst-svc-color: var(--uvst-primary);
}

.uvst-svc-fb {
  --uvst-svc-color: #004a99;
  --uvst-svc-symbol: url("/img/features/fb_firmenbuch.svg");
}

.uvst-svc-gb {
  --uvst-svc-color: #346834;
  --uvst-svc-symbol: url("/img/features/gb_grundbuch.svg");
}

/* Die CI nennt für eAe „Signalrot“ (#E53516). Neben der Markenfarbe #E30513 sähe das wie ein Fehler aus, hier deshalb die Markenfarbe. */
.uvst-svc-eae {
  --uvst-svc-color: var(--uvst-primary);
  --uvst-svc-symbol: url("/img/features/eae_akteneinsicht.svg");
}

/* Die CI nennt #A6C9F1: als Strichfarbe auf Weiß nicht lesbar (Kontrast rund 1,5:1), deshalb abgedunkelt; die Fläche bleibt im Originalton. */
.uvst-svc-exda {
  --uvst-svc-color: color-mix(in srgb, #a6c9f1 55%, #14213d);
  --uvst-svc-symbol: url("/img/features/exda_exekutionsdaten.svg");
  background: color-mix(in srgb, #a6c9f1 22%, transparent);
}

.uvst-svc-gisa {
  --uvst-svc-color: var(--uvst-ink-2);
}

/* ── Zwei Tafeln nebeneinander ─────────────────────────────────────────── */
.uvst-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uvst-space-5);
  align-items: start;
}

.uvst-panel {
  background: var(--uvst-surface);
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius);
  padding: var(--uvst-space-8);
}

.uvst-panel-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--uvst-primary);
  font-size: var(--uvst-text-md);
  letter-spacing: 0.08em;
}

.uvst-panel h3 {
  font-size: var(--uvst-text-2xl);
  font-weight: 600;
  margin: var(--uvst-space-2) 0 var(--uvst-space-2p5);
}

.uvst-panel p {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-lg);
  margin: 0;
}

/* ── Liste der eGovernment-Schnittstellen ──────────────────────────────── */
.uvst-egov-list {
  margin-top: var(--uvst-space-5);
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius);
  background: var(--uvst-surface);
  overflow: hidden;
}

.uvst-egov-item {
  padding: var(--uvst-space-4) var(--uvst-space-6);
  border-bottom: 1px solid var(--uvst-line);
}

.uvst-egov-item:last-child {
  border-bottom: 0;
}

.uvst-egov-head {
  display: flex;
  justify-content: space-between;
  gap: var(--uvst-space-5);
  align-items: baseline;
  flex-wrap: wrap;
}

.uvst-egov-head b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--uvst-text-xl);
  color: var(--uvst-ink);
}

.uvst-egov-head span {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-sm);
}

.uvst-egov-item ul {
  list-style: none;
  margin: var(--uvst-space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uvst-space-1) var(--uvst-space-8);
}

.uvst-egov-item li {
  color: var(--uvst-ink-2);
  font-size: var(--uvst-text-md);
  padding: var(--uvst-space-1) 0 var(--uvst-space-1) var(--uvst-space-4);
  position: relative;
}

.uvst-egov-item li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 7px;
  height: 2px;
  background: var(--uvst-primary);
  border-radius: 2px;
}

/* ── Verfügbarkeit ─────────────────────────────────────────────────────── */
.uvst-avail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uvst-space-4);
  margin: 0;
}

.uvst-avail > div {
  background: var(--uvst-surface);
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius);
  padding: var(--uvst-space-6);
}

.uvst-avail dt {
  font-family: var(--font-display);
  font-size: var(--uvst-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uvst-muted);
  margin: 0 0 var(--uvst-space-2p5);
}

.uvst-avail dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--uvst-text-xl);
  color: var(--uvst-ink);
  line-height: 1.35;
}

/* ── Abschlussband ─────────────────────────────────────────────────────── */
.uvst-cta-band {
  background: var(--uvst-primary);
  border-radius: 20px;
  color: #ffffff;
  padding: var(--uvst-space-10) var(--uvst-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uvst-space-8);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

/* Angedeuteter Ring rechts oben, rein dekorativ. */
.uvst-cta-band::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 34px solid rgba(255, 255, 255, 0.1);
}

.uvst-cta-band > * {
  position: relative;
  z-index: 1;
}

.uvst-cta-band h2 {
  color: #ffffff;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  margin: 0;
}

.uvst-cta-band p {
  color: rgba(255, 255, 255, 0.86);
  margin: var(--uvst-space-2p5) 0 0;
  max-width: 560px;
}

/* ═══════════════════════════════════════════════════ Karten und Fließtext */
.uvst-card {
  background: var(--uvst-surface);
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius);
  box-shadow: var(--uvst-shadow-sm);
  padding: var(--uvst-space-6);
  margin-bottom: var(--uvst-space-6);
}

.uvst-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uvst-space-5);
  align-items: start;
}

.uvst-cards > .uvst-card {
  margin-bottom: 0;
  height: 100%;
}

.uvst-card > h2:first-child,
.uvst-card > h3:first-child,
.uvst-card > h4:first-child,
.uvst-card > h5:first-child {
  margin-top: 0;
}

.uvst-card h2 {
  font-size: var(--uvst-text-xl);
  font-weight: 600;
  color: var(--uvst-ink);
  margin: 0 0 var(--uvst-space-3);
}

.uvst-card > p {
  color: var(--uvst-muted);
  margin: 0 0 var(--uvst-space-4);
}

.uvst-card > address {
  font-style: normal;
  margin: 0;
}

/* Zeile aus Symbol und Text innerhalb einer Karte (Anschrift, Telefon). */
.uvst-card-line {
  display: flex;
  gap: var(--uvst-space-3);
  margin: 0;
  padding: var(--uvst-space-2) 0;
  font-size: var(--uvst-text-lg);
  color: var(--uvst-ink-2);
}

.uvst-card-line > svg {
  flex: none;
  margin-top: 0.2rem;
  color: var(--uvst-primary);
}

.uvst-section-title {
  font-size: var(--uvst-text-xl);
  font-weight: 600;
  color: var(--uvst-ink);
  margin: 0 0 var(--uvst-space-4);
}

/*
 * Fließtext-Typografie: Überschriften in Ink, nicht in der Markenfarbe. Rot ist Akzent (Knöpfe, aktive Navigation,
 * Eyebrow, Fokus, Fehler), nicht Textfarbe; Links im Fließtext sind dunkel mit rotem Unterstrich.
 */
.uvst-content h4,
.uvst-prose h4 {
  color: var(--uvst-ink);
  font-size: var(--uvst-text-xl);
  font-weight: 600;
  margin: var(--uvst-space-6) 0 var(--uvst-space-3);
}

.uvst-content h5,
.uvst-prose h5 {
  color: var(--uvst-ink);
  font-weight: 600;
  font-size: var(--uvst-text-lg);
  margin: var(--uvst-space-6) 0 var(--uvst-space-3);
}

.uvst-content a,
.uvst-prose a,
.uvst-message-body a {
  color: var(--uvst-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--uvst-primary);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.uvst-content a:hover,
.uvst-prose a:hover,
.uvst-message-body a:hover {
  color: var(--uvst-primary);
}

.uvst-content p,
.uvst-prose p {
  line-height: 1.55;
  margin: var(--uvst-space-2p5) 0;
}

.uvst-content ul.disclist,
.uvst-prose ul.disclist,
.uvst-content ul.intend {
  margin: var(--uvst-space-3) 0 var(--uvst-space-3) var(--uvst-space-5);
  padding: 0;
}

.uvst-content .uvst-fee-html ul {
  margin: var(--uvst-space-3) 0 var(--uvst-space-3) var(--uvst-space-5);
  list-style: disc;
  padding-left: var(--uvst-space-5);
}

/* Aufzählung ohne Punkte (Impressum) */
.uvst-content ul.uvst-plainlist,
.uvst-prose ul.uvst-plainlist {
  list-style: none;
  margin: var(--uvst-space-1p5) 0 var(--uvst-space-3);
  padding-left: 0;
}

/* „Nach oben“-Sprunglinks in den langen Inhaltsseiten */
.uvst-content .uvst-toplink {
  display: inline-block;
  margin-left: var(--uvst-space-2);
}

/* Entgelte: eine Karte je Abschnitt */
.uvst-content .uvst-fee-card hr {
  border: 0;
  border-top: 1px solid var(--uvst-line);
  margin: var(--uvst-space-3) 0 var(--uvst-space-4);
}

/* Tarif-Tabellen: nur waagrechte Trennlinien, kein Gitternetz. */
.uvst-content table.tarife,
.uvst-prose table.tarife {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: var(--uvst-space-3) 0 var(--uvst-space-5);
  font-size: var(--uvst-text-base);
}

.uvst-content table.tarife col.tarife-col-unit,
.uvst-prose table.tarife col.tarife-col-unit {
  width: 30%;
}

.uvst-content table.tarife col.tarife-col-fee,
.uvst-prose table.tarife col.tarife-col-fee {
  width: 12.5rem;
}

.uvst-content table.tarife th,
.uvst-content table.tarife td,
.uvst-prose table.tarife th,
.uvst-prose table.tarife td {
  border: 0;
  border-bottom: 1px solid var(--uvst-line);
  padding: var(--uvst-space-3);
  text-align: left;
  vertical-align: top;
  /* Lange deutsche Wörter ("Verrechnungsstellenaufschlag") dürfen auf dem Telefon umbrechen, statt in die nächste Spalte zu laufen. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.uvst-content table.tarife th,
.uvst-prose table.tarife th {
  background: transparent;
  border-bottom-color: var(--uvst-line-strong);
  color: var(--uvst-muted);
  font-family: var(--font-display);
  font-size: var(--uvst-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.uvst-content table.tarife tr:last-child td,
.uvst-prose table.tarife tr:last-child td {
  border-bottom: 0;
}

.uvst-content table.tarife th.tarife-fee,
.uvst-content table.tarife td.tarife-fee,
.uvst-prose table.tarife th.tarife-fee,
.uvst-prose table.tarife td.tarife-fee {
  text-align: right;
  white-space: nowrap;
  /* Ziffern gleicher Breite, damit die Nachkommastellen untereinander liegen. */
  font-variant-numeric: tabular-nums;
}

/* Ein Hinweis über mehrere Zeilen ("werden direkt über BMF abgerechnet") ist kein Betrag: Er bricht um, statt über die feste Spalte hinauszulaufen. */
.uvst-content table.tarife td.tarife-fee[rowspan] {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Auf dem Telefon ist die Spalte der Beträge schmal: Auch ein Eintrag wie "0,45 EUR bzw. 0,51 EUR" darf dort umbrechen. */
@media (max-width: 640px) {
  .uvst-content table.tarife td.tarife-fee {
    white-space: normal;
  }
}

.uvst-content table.tarife td.tarife-note {
  font-weight: bold;
  font-size: 0.8em;
}

.uvst-content table.tarife td.tarife-group {
  font-weight: 600;
  color: var(--uvst-ink);
  padding-top: var(--uvst-space-5);
}

/* ── Aufklappbare Auszüge (Über uns) ───────────────────────────────────── */
.uvst-accordion {
  margin: var(--uvst-space-2) 0 var(--uvst-space-4);
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius-sm);
  overflow: hidden;
}

.uvst-accordion details + details {
  border-top: 1px solid var(--uvst-line);
}

.uvst-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uvst-space-4);
  padding: var(--uvst-space-3p5) var(--uvst-space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--uvst-text-lg);
  color: var(--uvst-ink);
  list-style: none;
}

.uvst-accordion summary::-webkit-details-marker {
  display: none;
}

.uvst-accordion summary:hover,
.uvst-accordion details[open] > summary {
  color: var(--uvst-primary);
}

.uvst-accordion-chevron {
  flex: none;
  transition: transform 0.2s ease;
}

.uvst-accordion details[open] > summary .uvst-accordion-chevron {
  transform: rotate(180deg);
}

.uvst-accordion-body {
  padding: 0 var(--uvst-space-4) var(--uvst-space-3);
}

/* ── Downloads: Dateien in Gruppen, je Zeile Symbol, Text und Knopf ────── */
.uvst-files .uvst-files-note {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-md);
  margin: 0;
}

.uvst-files-list {
  list-style: none;
  margin: var(--uvst-space-3p5) 0 0;
  padding: 0;
  border-top: 1px solid var(--uvst-line);
}

.uvst-file {
  display: flex;
  align-items: center;
  gap: var(--uvst-space-4);
  padding: var(--uvst-space-4) 0;
  border-bottom: 1px solid var(--uvst-line);
}

.uvst-file:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.uvst-file-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--uvst-radius-sm);
  background: var(--uvst-primary-soft);
  color: var(--uvst-primary-deep);
}

.uvst-file-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--uvst-space-0p5);
}

.uvst-file-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--uvst-text-lg);
  color: var(--uvst-ink);
}

.uvst-file-desc {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-md);
}

.uvst-file-meta {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-sm);
}

.uvst-file .uvst-btn {
  flex: none;
}

@media (max-width: 640px) {
  .uvst-file {
    flex-wrap: wrap;
  }

  .uvst-file-text {
    flex-basis: calc(100% - 3.5rem);
  }

  .uvst-file .uvst-btn {
    width: 100%;
  }
}

/* ── Service-Meldungen: eine Karte je Meldung ──────────────────────────── */
.uvst-messages {
  display: grid;
  gap: var(--uvst-space-4);
}

.uvst-message.uvst-card {
  margin-bottom: 0;
  padding: 0;
}

.uvst-message-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--uvst-space-4);
  padding: var(--uvst-space-5);
  list-style: none;
}

.uvst-message-head::-webkit-details-marker {
  display: none;
}

.uvst-message-heading {
  display: flex;
  flex-direction: column;
  gap: var(--uvst-space-1);
  min-width: 0;
}

.uvst-message-title {
  font-family: var(--font-display);
  font-size: var(--uvst-text-xl);
  font-weight: 600;
  color: var(--uvst-ink);
  line-height: 1.3;
}

.uvst-message-head:hover .uvst-message-title {
  color: var(--uvst-primary);
}

.uvst-message-date {
  font-size: var(--uvst-text-md);
  color: var(--uvst-muted);
}

.uvst-message-chevron {
  flex: none;
  margin-top: 0.15rem;
  color: var(--uvst-muted);
  transition: transform 0.2s ease;
}

.uvst-message[open] .uvst-message-chevron {
  transform: rotate(180deg);
}

.uvst-message-content {
  padding: 0 var(--uvst-space-5) var(--uvst-space-5);
}

.uvst-message-source {
  margin: 0 0 var(--uvst-space-3);
  font-size: var(--uvst-text-md);
  color: var(--uvst-muted);
}

/* Markdown und einfaches HTML der Meldungen: Überschriften, Linie, Listen, fett/kursiv. */
.uvst-message-body h1,
.uvst-message-body h2,
.uvst-message-body h3,
.uvst-message-body h4,
.uvst-message-body h5,
.uvst-message-body h6 {
  color: var(--uvst-ink);
  font-size: var(--uvst-text-xl);
  font-weight: 600;
  margin: var(--uvst-space-3p5) 0 var(--uvst-space-2);
}

.uvst-message-body p {
  line-height: 1.55;
  margin: var(--uvst-space-2) 0;
}

.uvst-message-body hr {
  border: 0;
  border-top: 1px solid var(--uvst-line-strong);
  margin: var(--uvst-space-3p5) 0;
}

.uvst-message-body ul {
  list-style: disc;
  margin: var(--uvst-space-2) 0;
  padding-left: var(--uvst-space-6);
}

.uvst-message-body ol {
  list-style: decimal;
  margin: var(--uvst-space-2) 0;
  padding-left: var(--uvst-space-6);
}

/* ═══════════════════════════════════════════════════════════════ Hinweise */
.uvst-alert {
  margin-top: var(--uvst-space-4);
  margin-bottom: var(--uvst-space-4);
  padding: var(--uvst-space-3) var(--uvst-space-4);
  border-radius: var(--uvst-radius-sm);
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Ein Hinweis soll weder an der Karte, dem Grid oder dem Feld davor noch an dem danach kleben. Die Abstände oben und unten fallen mit denen der
   Nachbarn zusammen (der größere gilt), zwei Hinweise untereinander haben also 16 px dazwischen. Als letztes Element eines Behälters bleibt unten nichts. */
/* Verweis in Knopfgestalt mit Hinweis (Anmeldung mit Zertifikat). */
.uvst-link-button {
  display: flex;
  flex-direction: column;
  gap: var(--uvst-space-2);
  margin-top: var(--uvst-space-4);
}

.uvst-link-button .uvst-btn {
  width: 100%;
}

.uvst-link-button-hint {
  margin: 0;
  color: var(--uvst-muted);
  font-size: var(--uvst-text-sm);
  line-height: 1.5;
}

.uvst-alert:last-child {
  margin-bottom: 0;
}

.uvst-alert-success {
  background: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

/* Sachlicher Hinweis, etwa wenn eine Datenquelle nicht erreichbar ist */
.uvst-alert-notice {
  background: #e8eef3;
  color: #2c3e50;
  border-color: #c9d6e0;
}

/* Warnung vor einer Handlung mit Folgen (Passwort ändern): Symbol links, fetter Titel über dem Text */
.uvst-alert-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--uvst-space-3);
  background: #fff3cd;
  color: #664d03;
  border-color: #ffe69c;
}

.uvst-alert-icon {
  flex: none;
  margin-top: 0.15em;
}

.uvst-alert-title {
  display: block;
  margin-bottom: var(--uvst-space-1);
}

/* ═══════════════════════════════════════════════ Anmeldung und Kundenbereich */
.uvst-form-card {
  background: var(--uvst-surface);
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius);
  box-shadow: var(--uvst-shadow-sm);
  padding: var(--uvst-space-8);
  margin-bottom: var(--uvst-space-6);
}

/*
 * Aktionsknöpfe der Formularkarte (Speichern, Anmelden, Suchen …) haben Luft zu den Feldern darüber. Nur die Knöpfe unmittelbar in der Karte
 * (Karte > Hülle des Frameworks > Knopf): Die Symbolknöpfe in den Zellen eines Grids in derselben Karte liegen tiefer und bleiben unberührt.
 * Ein Abstand, den der ViewBuilder mit .Margin(…) setzt, geht vor (Inline-Stil). Mit NarrowFields liegen die Felder in einer eigenen Hülle.
 */
.uvst-form-card > div > .component-input-action,
.uvst-form-fields-narrow > div > .component-input-action {
  margin-top: var(--uvst-space-4);
}

/* Nur die Anmeldung: schmale Karte, mittig (sie liegt nicht im Kundenbereich). */
.uvst-form-card-narrow {
  max-width: 440px;
}

.uvst-form-card-center {
  margin-left: auto;
  margin-right: auto;
}

/* Kundenbereich: Die Karte steht in voller Breite, Felder und Hinweise darin in lesbarer Breite, linksbündig (Passwort ändern, ERV-Einstellungen). */
.uvst-form-fields-narrow {
  max-width: 560px;
}

.uvst-form-card-title {
  font-size: var(--uvst-text-2xl);
  font-weight: 700;
  margin: 0;
}

/* Folgt auf den Titel gleich das erste Feld (kein Untertitel), hat es Luft zur Überschrift. */
.uvst-form-card-title:not(:has(+ .uvst-form-card-sub)) {
  margin-bottom: var(--uvst-space-3);
}

.uvst-form-card-sub {
  color: var(--uvst-muted);
  margin: var(--uvst-space-1) 0 var(--uvst-space-6);
}

.uvst-sectionhead {
  margin: var(--uvst-space-8) 0 var(--uvst-space-4);
}

.uvst-sectionhead h2 {
  font-size: var(--uvst-text-2xl);
  font-weight: 700;
  margin: 0;
}

.uvst-sectionhead p {
  color: var(--uvst-muted);
  margin: var(--uvst-space-1) 0 0;
}

/* Kacheln der Startseite des Kundenbereichs */
.uvst-navcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uvst-space-5);
  margin-bottom: var(--uvst-space-8);
}

.uvst-navcard {
  display: flex;
  flex-direction: column;
  gap: var(--uvst-space-2);
  padding: var(--uvst-space-5);
  background: var(--uvst-surface);
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius);
  box-shadow: var(--uvst-shadow-sm);
  color: var(--uvst-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.uvst-navcard:hover {
  border-color: var(--uvst-primary);
  box-shadow: var(--uvst-shadow-md);
  color: var(--uvst-ink);
  text-decoration: none;
}

.uvst-navcard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--uvst-radius-sm);
  background: var(--uvst-primary-soft);
  color: var(--uvst-primary);
}

.uvst-navcard-title {
  font-family: var(--font-display);
  font-size: var(--uvst-text-xl);
  font-weight: 600;
}

.uvst-navcard-text {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-md);
}

/* Filterleiste über Tabellen (Abrechnung, Aktivität): Eingaben in gleich breiten Spalten, die auf schmalen Bildschirmen umbrechen. */
.uvst-filterbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  gap: var(--uvst-space-4);
  margin-bottom: var(--uvst-space-4);
}

.uvst-filterbar.uvst-card {
  padding: var(--uvst-space-4) var(--uvst-space-5);
}

.uvst-filterbar-item {
  min-width: 0;
}

/* Blätterleiste unter der Tabelle: Zurück, Angabe, Weiter */
.uvst-filterbar-plain {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--uvst-space-4);
}

/* Eingaben nebeneinander innerhalb einer Karte (Formular): gleich breit, brechen auf schmalen Bildschirmen um */
.uvst-filterbar-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--uvst-space-4);
  margin-bottom: 0;
}

.uvst-filterbar-inline > .uvst-filterbar-item {
  flex: 1 1 7rem;
}

/* Auf dem Telefon eine Eingabe je Zeile: In zwei Spalten wären die Beschriftungen abgeschnitten */
@media (max-width: 599px) {
  .uvst-filterbar-inline > .uvst-filterbar-item {
    flex-basis: 100%;
  }
}

/*
 * Grid des Frameworks auf den Tabellenseiten: dichtere Zeilen als der Standard von MudBlazor (16 px Innenabstand) und
 * Beträge rechtsbündig, auch in der Spaltenüberschrift. Die Spalten der Abrechnung: 4 bis 8 sind Beträge.
 */
.uvst-grid {
  margin-bottom: var(--uvst-space-4);
}

.uvst-grid .mud-table-cell {
  padding: 0.4rem 0.75rem;
  font-size: var(--uvst-text-md);
}

.uvst-grid .mud-table-cell .mud-icon-button {
  padding: 2px;
}

.uvst-grid-billing thead th:nth-child(n + 4):nth-child(-n + 8) {
  text-align: right;
}

/* Spalte "Optionen" der Abrechnung: die Symbole (Parameter, Ergebnis oder Protokoll) stehen nebeneinander. */
.uvst-grid-options {
  display: flex;
  align-items: center;
  gap: var(--uvst-space-1);
}

/* Fester Platz je Symbol, damit "Ergebnis" oder "Protokoll" in jeder Zeile an derselben Stelle steht, auch ohne Parameter davor. */
.uvst-grid-option {
  display: flex;
  justify-content: center;
  width: 1.75rem;
}

/* Die Spalten der Rechnungen: 3 bis 5 sind Beträge. */
.uvst-grid-invoices thead th:nth-child(n + 3):nth-child(-n + 5) {
  text-align: right;
}

/*
 * Lazy Loading braucht einen Rahmen mit begrenzter Höhe, in dem gescrollt wird: Das Grid rendert nur die Zeilen, die in den
 * nächsten Rahmen mit Bildlauf (hier der Tabellenbehälter) passen. Ohne Höhenbegrenzung wäre dieser Rahmen so hoch wie alle
 * Zeilen, es wären immer alle sichtbar und es würde sofort alles geladen. Die Kopfzeile bleibt oben stehen (sticky).
 */
.uvst-grid .mud-table-container {
  /* Kopf, Filterleiste und Zählzeile über der Tabelle brauchen etwa 26 rem; die Summenkarte darunter bleibt mit Bildlauf der Seite erreichbar. */
  max-height: max(20rem, calc(100vh - 32rem));
  overflow-y: auto;
}

/*
 * Gleich hohe Zeilen: Blazors Virtualize schätzt die Höhe der noch nicht gezeigten Zeilen aus den gezeigten. Mit unterschiedlich
 * hohen Zeilen (z. B. eine mit Knopf, eine ohne) springt die Bildlaufleiste beim Nachladen. Mindesthöhe über der höchsten Zeile
 * (Symbolknopf 28 px + Zellenabstand).
 */
.uvst-grid tbody .mud-table-row {
  height: 2.75rem;
}

/*
 * Sortieren: Ein Klick auf eine Spaltenüberschrift sortiert. Die Tabellen, die seitenweise nachladen (Abrechnung, Aktivität, ERV-Nachrichten),
 * laden dazu alle Zeilen bis zu einem Deckel und sortieren im Speicher, denn die API sortiert nicht. Das Grid des Frameworks zeigt auf jeder
 * Spaltenüberschrift einen Sortierknopf (die Einstellung IsSortable beachtet es nicht); Spalten, die nur einen Symbolknopf tragen (Info,
 * Herunterladen, Löschen, Anzeigen), lassen sich nicht sortieren, deshalb ist er dort stillgelegt. Die Zahl dieser Symbolspalten am Ende der
 * Tabelle steht als Klasse am Grid (uvst-grid-icons-1 oder uvst-grid-icons-2).
 */
.uvst-grid-icons-1 thead th:last-child .mud-table-sort-label,
.uvst-grid-icons-2 thead th:nth-last-child(-n + 2) .mud-table-sort-label {
  pointer-events: none;
  cursor: default;
}

.uvst-grid-icons-1 thead th:last-child .mud-table-sort-label .mud-table-sort-label-icon,
.uvst-grid-icons-2 thead th:nth-last-child(-n + 2) .mud-table-sort-label .mud-table-sort-label-icon {
  display: none;
}

/*
 * Elektronische Akteneinsicht (/app/eae): Hinweise, Aktenzeichen in einer Zeile und der Baum der Dokumente. Der Baum ist eine
 * verschachtelte Liste mit details/summary (klappt ohne Skript, mit der Tastatur bedienbar); Dokumente tragen rechts den Knopf "Abrufen".
 */
.uvst-hint {
  margin: var(--uvst-space-2) 0 0;
  color: var(--uvst-muted);
  font-size: var(--uvst-text-sm);
}

.uvst-disclist {
  margin: var(--uvst-space-3) 0;
  padding-left: 1.25rem;
}

.uvst-disclist li {
  margin: var(--uvst-space-1) 0;
}

.uvst-btn-sm {
  min-height: 2rem;
  padding: var(--uvst-space-1) var(--uvst-space-3);
  font-size: var(--uvst-text-sm);
}

.uvst-eae-tree,
.uvst-eae-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uvst-eae-tree ul {
  margin-left: var(--uvst-space-4);
  padding-left: var(--uvst-space-3);
  border-left: 1px solid var(--uvst-line);
}

.uvst-eae-branch > details > summary,
.uvst-eae-leaf {
  display: flex;
  align-items: center;
  gap: var(--uvst-space-2);
  min-height: 2.5rem;
  padding: var(--uvst-space-1) 0;
}

.uvst-eae-branch > details > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.uvst-eae-branch > details > summary::-webkit-details-marker {
  display: none;
}

/* Pfeil statt des Standardzeichens (das display: flex entfernt): zeigt, dass sich der Ordner aufklappen lässt. */
.uvst-eae-branch > details > summary::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 var(--uvst-space-1) 0 var(--uvst-space-1);
  border-right: 2px solid var(--uvst-muted);
  border-bottom: 2px solid var(--uvst-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.uvst-eae-branch > details[open] > summary::before {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .uvst-eae-branch > details > summary::before {
    transition: none;
  }
}

.uvst-eae-leaf {
  border-bottom: 1px solid var(--uvst-line);
}

.uvst-eae-icon {
  flex: none;
  display: inline-flex;
  color: var(--uvst-muted);
}

.uvst-eae-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

.uvst-eae-meta {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-sm);
  font-weight: 400;
}

.uvst-eae-leaf .uvst-btn {
  flex: none;
}

/*
 * Rahmen für Webanwendungen der Justiz (Firmenbuch, /app/firmenbuch). Die Anwendung bringt ihr eigenes Aussehen mit; hier steht
 * nur der Rahmen, in dem sie sitzt.
 *
 * Das eingebettete Fenster bekommt eine feste Höhe statt einer mitwachsenden: Die Anwendung liegt zwar auf demselben Ursprung, ihre
 * Höhe ließe sich also auslesen, aber sie lädt Inhalte über Dojo nach, und eine nachgeführte Höhe springt bei jedem Schritt. Eine
 * ruhige Fläche mit eigenem Bildlauf ist das kleinere Übel.
 */
.uvst-portal-page {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius-sm);
  background: #fff;
}

/*
 * Leiste am oberen Rand des Rahmens: Navigation links, Werkzeuge für den Inhalt des Rahmens rechts. Sie gehört zum Rahmen (Rand und Rundung
 * hat die Seite um beide), damit klar ist, dass Kopieren und Drucken nur den Inhalt darunter betreffen.
 */
.uvst-portal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--uvst-space-1) var(--uvst-space-3);
  min-height: 2.5rem;
  padding: var(--uvst-space-1) var(--uvst-space-2);
  border-bottom: 1px solid var(--uvst-line);
  background: var(--uvst-surface-2);
}

.uvst-portal-bar-end {
  display: flex;
  align-items: center;
  gap: var(--uvst-space-1);
  margin-left: auto;
}

/* Meldung zum Kopieren; steht links von den Werkzeugen und schiebt sie nicht weg. */
.uvst-portal-note {
  margin-right: var(--uvst-space-2);
  color: var(--uvst-muted);
  font-size: 0.875rem;
}

/* Flacher Knopf der Leiste: Symbol, mit Text bei "Zur Startseite", sonst nur Symbol (Hinweis über title und aria-label). */
.uvst-portal-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--uvst-space-2);
  min-height: 2rem;
  padding: var(--uvst-space-1) var(--uvst-space-2);
  border: 0;
  border-radius: var(--uvst-radius-sm);
  background: transparent;
  color: var(--uvst-ink-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--uvst-text-sm);
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease;
}

.uvst-portal-tool-icon {
  width: 2rem;
  padding: 0;
}

.uvst-portal-tool:hover:not(:disabled) {
  background: var(--uvst-line);
  color: var(--uvst-ink);
}

/*
 * Fokusrahmen der Tastatur. Der globale (:focus-visible) liegt außen und würde vom Rand der Seite (overflow: hidden) abgeschnitten, deshalb hier nach
 * innen; und vollständig gesetzt, weil MudBlazor mit "button:focus { outline: none }" (höhere Spezifität) den globalen Rahmen auslöscht.
 */
.uvst-portal-tool:focus-visible {
  outline: 2px solid var(--uvst-primary);
  outline-offset: -2px;
}

.uvst-portal-tool:disabled {
  opacity: 0.45;
}

.uvst-portal-frame {
  display: block;
  width: 100%;
  height: max(32rem, calc(100vh - 17rem));
  border: 0;
  background: #fff;
}

/* Liegt über dem noch leeren Rahmen, damit dieser beim Verschwinden des Textes nicht springt. */
.uvst-portal-loading {
  position: absolute;
  inset: 3rem 0 auto;
  z-index: 1;
  padding: var(--uvst-space-5);
  text-align: center;
  color: var(--uvst-muted);
  pointer-events: none;
}

.uvst-portal-status {
  color: var(--uvst-muted);
}

/*
 * Druck der Seite mit einem Rahmen der Justiz über das Menü des Browsers. Strg+P und der Knopf "Drucken" drucken den Rahmen selbst (uvst-web.js) und
 * brauchen das nicht. Hier: ohne Kopfleiste, Navigation, Seitenkopf und Knöpfe, der Rahmen ohne Rand und am Seitenrand. Die Höhe des Rahmens setzt
 * uvst-web.js vor dem Druck auf die seines Inhalts (beforeprint), sonst käme nur der Ausschnitt aufs Papier. Nur Seiten mit Rahmen (:has), alle
 * anderen Seiten drucken wie bisher.
 */
@media print {
  body:has(.uvst-portal-frame) .mud-appbar,
  body:has(.uvst-portal-frame) .mud-drawer,
  body:has(.uvst-portal-frame) .uvst-page-hero,
  body:has(.uvst-portal-frame) .uvst-portal-bar,
  body:has(.uvst-portal-frame) .uvst-portal-loading {
    display: none !important;
  }

  body:has(.uvst-portal-frame) .mud-main-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Das Layout des Frameworks rollt in einem Bereich mit fester Höhe, und html steht auf overflow: hidden; gedruckt würde nur die erste Seite. */
  html:has(.uvst-portal-frame),
  body:has(.uvst-portal-frame),
  body:has(.uvst-portal-frame) .mud-layout,
  body:has(.uvst-portal-frame) .mud-main-content,
  body:has(.uvst-portal-frame) .ps-page-content {
    height: auto !important;
    overflow: visible !important;
  }

  /* Die Seite um den Rahmen (Rand, Rundung, abgeschnittener Rest) fällt weg; sonst bliebe der Rand um das Ergebnis, und overflow: hidden schnitte ab. */
  body:has(.uvst-portal-frame) .uvst-portal-page {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
}

/*
 * Schmale Bildschirme: MudBlazor stapelt die Zellen jeder Zeile untereinander und blendet die Spaltenüberschriften aus;
 * die Beschriftung der Zellen (data-label) setzt das Framework-Grid nicht, die Werte stünden also ohne Namen da.
 * Deshalb bleibt es eine Tabelle, die seitlich gewischt wird. Die Selektoren sind so spezifisch wie die von MudBlazor.
 */
@media (max-width: 600px) {
  .uvst-grid .mud-xs-table .mud-table-container {
    overflow-x: auto;
  }

  .uvst-grid .mud-xs-table .mud-table-root {
    min-width: 40rem;
  }

  .uvst-grid-log .mud-xs-table .mud-table-root {
    min-width: 30rem;
  }

  /* Ergebnis und Rohdaten einer Abfrage: höchstens vier Spalten (Rolle, Name, Größe, Symbole). Sie passen auch auf dem Telefon nebeneinander (der Name bricht um), die Symbole liegen nicht außerhalb. */
  .uvst-grid-result .mud-xs-table .mud-table-root {
    min-width: 0;
  }

  .uvst-grid-result .mud-xs-table .mud-table-cell {
    overflow-wrap: anywhere;
  }

  .uvst-grid .mud-xs-table .mud-table-root .mud-table-head .mud-table-row {
    display: table-row;
  }

  .uvst-grid .mud-xs-table .mud-table-row {
    display: table-row;
  }

  .uvst-grid .mud-xs-table .mud-table-cell {
    display: table-cell;
    border-bottom: 1px solid var(--uvst-line);
  }

  .uvst-grid .mud-xs-table .mud-table-cell::before {
    content: none;
  }

  .uvst-grid .mud-xs-table .mud-table-root colgroup {
    display: table-column-group;
  }
}

/* Liste aus Bezeichnung und Wert (Profil) */
.uvst-dl {
  margin: 0;
}

.uvst-dl > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uvst-space-1);
  padding: var(--uvst-space-2p5) 0;
  border-bottom: 1px solid var(--uvst-line);
}

.uvst-dl > div:last-child {
  border-bottom: 0;
}

.uvst-dl dt {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-md);
}

.uvst-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 600px) {
  .uvst-dl > div {
    grid-template-columns: 14rem 1fr;
    gap: var(--uvst-space-4);
  }
}

/*
 * Angaben nebeneinander (Summe der Abrechnung, Kosten, Ergebnis, Person und Meldeadresse einer Abfrage): je Angabe eine Spalte mit der Bezeichnung oben
 * und dem Wert darunter. Die Spalten brechen auf schmalen Bildschirmen um (mindestens 10 rem breit, Beträge 8 rem). Text steht linksbündig, Beträge
 * (uvst-dl-amounts) rechtsbündig wie in der Tabelle.
 */
.uvst-dl.uvst-dl-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--uvst-space-4);
}

.uvst-dl.uvst-dl-row.uvst-dl-amounts {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.uvst-dl.uvst-dl-row > div {
  grid-template-columns: 1fr;
  gap: var(--uvst-space-1);
  padding: 0;
  border-bottom: 0;
  text-align: left;
}

.uvst-dl.uvst-dl-amounts > div {
  text-align: right;
}

/*
 * Karte mit Gruppen (Daten im ERV): Unterüberschrift je Gruppe (die erste ohne Abstand nach oben), eine Gruppe ohne Zeilen zeigt ihren Hinweis, und
 * Absätze mit Verweis stehen unter den Zeilen.
 */
.uvst-card > .uvst-dl-group-title {
  font-size: var(--uvst-text-lg);
  font-weight: 600;
  color: var(--uvst-ink);
  margin: var(--uvst-space-6) 0 var(--uvst-space-1);
}

.uvst-card > .uvst-section-title + .uvst-dl-group-title {
  margin-top: 0;
}

.uvst-card > .uvst-dl-group-empty {
  margin: 0;
  padding: var(--uvst-space-2p5) 0;
  color: var(--uvst-muted);
}

.uvst-card > .uvst-dl-note {
  margin: var(--uvst-space-4) 0 0;
  color: var(--uvst-muted);
  font-size: var(--uvst-text-md);
}

.uvst-card > .uvst-dl-note a {
  color: inherit;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .uvst-navcards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .uvst-navcards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sprungmarken in den Inhaltsseiten: die klebende Kopfzeile (72 px) darf die Überschrift nicht verdecken. */
.uvst-content [id] {
  scroll-margin-top: 88px;
}

/* ═══════════════════════════════════════════════════════ Breitenabhängig */
@media (min-width: 768px) {
  .uvst-foot-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }

  .uvst-svcs,
  .uvst-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .uvst-duo {
    grid-template-columns: 1fr 1fr;
  }

  .uvst-avail {
    grid-template-columns: repeat(3, 1fr);
  }

  .uvst-egov-item ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .uvst-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .uvst-svcs {
    grid-template-columns: repeat(3, 1fr);
  }

  .uvst-cards-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Unter 900 px klappt das Menü unter dem Kopf auf (per Kontrollkästchen, ohne Skript). */
@media (max-width: 900px) {
  .uvst-mainnav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    margin-left: 0;
    background: var(--uvst-surface);
    border-bottom: 1px solid var(--uvst-line);
    padding: var(--uvst-space-3) var(--uvst-space-5) var(--uvst-space-4);
  }

  .uvst-mainnav ul {
    flex-direction: column;
    align-items: stretch;
  }

  .uvst-mainnav a {
    padding: var(--uvst-space-3) var(--uvst-space-2p5);
  }

  .uvst-menu-check:checked ~ .uvst-mainnav {
    display: block;
  }

  /* Das ausgeblendete Menü schob die Knöpfe sonst direkt hinter das Logo statt an den rechten Rand. */
  .uvst-head-actions {
    margin-left: auto;
  }

  .uvst-menu-btn {
    display: flex;
  }

  .uvst-menu-check:checked ~ .uvst-head-actions .uvst-menu-icon-open {
    display: none;
  }

  .uvst-menu-check:checked ~ .uvst-head-actions .uvst-menu-icon-close {
    display: inline;
  }

  .uvst-head-actions .uvst-head-login {
    display: none;
  }

  .uvst-mainnav-login {
    display: block;
    margin-top: var(--uvst-space-2);
    padding-top: var(--uvst-space-2);
    border-top: 1px solid var(--uvst-line);
  }

  .uvst-mainnav-login a {
    color: var(--uvst-primary);
    font-weight: 600;
  }

  .uvst-brand img {
    height: 32px;
  }

  .uvst-container {
    padding: 0 var(--uvst-space-5);
  }

  .uvst-readable-card {
    padding: var(--uvst-space-5);
  }

  .uvst-content table.tarife col.tarife-col-fee {
    width: 8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uvst-svc,
  .uvst-accordion-chevron,
  .uvst-message-chevron {
    transition: none;
  }

  .uvst-svc:hover {
    transform: none;
  }
}

/*
 * Code-Block im Dialog "Abfrageparameter": Festbreitenschrift, Zeilenumbrüche bleiben, lange Zeilen brechen um (kein seitliches Wischen), bei viel Text scrollt der Block.
 * Der Dialog liegt im Dialog-Anbieter von MudBlazor außerhalb des Inhalts der Seite, deshalb gilt die Regel global.
 */
.uvst-code {
  margin: 0;
  padding: var(--uvst-space-3) var(--uvst-space-4);
  max-height: 60vh;
  overflow: auto;
  background: var(--uvst-surface-2);
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius-sm);
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--uvst-text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.uvst-code code {
  font: inherit;
}

.uvst-code-note {
  margin: var(--uvst-space-3) 0 0;
  color: var(--uvst-muted);
}

/* Ergebnis einer Abfrage, das nicht (mehr) abrufbar ist: dasselbe Symbol wie die Lupe, ausgegraut und ohne Handzeiger; der Hinweis steht am Symbol. */
.uvst-option-gone,
.uvst-option-gone * {
  cursor: default;
}

.uvst-option-gone {
  opacity: 0.35;
}

/* ═══════════════════════════════════════ Gruppen der Abrechnung (aufklappbar) */
/*
 * Tabelle der Gruppen je Monat, Produkt und Produkttyp unter der Karte "Summe": natives details/summary ohne Skript, Pfeil wie im Aktenbaum.
 * Die Spalten ab der vierten (Anzahl und Beträge) stehen rechtsbündig wie in der Tabelle der Positionen; auf dem Telefon scrollt die Tabelle.
 */
.uvst-groups > details > summary {
  display: flex;
  align-items: center;
  gap: var(--uvst-space-2);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--uvst-text-lg);
  color: var(--uvst-ink);
}

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

.uvst-groups > details > summary::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 var(--uvst-space-1);
  border-right: 2px solid var(--uvst-muted);
  border-bottom: 2px solid var(--uvst-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.uvst-groups > details[open] > summary::before {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .uvst-groups > details > summary::before {
    transition: none;
  }
}

.uvst-groups-scroll {
  margin-top: var(--uvst-space-4);
  overflow-x: auto;
}

.uvst-groups-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--uvst-text-md);
}

.uvst-groups-table th,
.uvst-groups-table td {
  padding: 0.4rem 0.75rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--uvst-line);
}

.uvst-groups-table th {
  font-weight: 600;
  color: var(--uvst-muted);
}

.uvst-groups-table th:nth-child(n + 4),
.uvst-groups-table td:nth-child(n + 4) {
  text-align: right;
}

/* ═══════════════════════════════════ Baum einer Datei (Abfrageergebnis) */
/*
 * Lesbare Ansicht einer XML- oder JSON-Datei: Container klappen auf (details/summary, ohne Skript), Werte stehen als Text; lange Werte sind gekürzt und lassen
 * sich aufklappen. Der Aufbau folgt dem Aktenbaum (uvst-eae-*), die Werte brechen um, damit nichts über den Rand läuft.
 */
.uvst-rtree,
.uvst-rtree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uvst-rtree ul {
  margin-left: var(--uvst-space-4);
  padding-left: var(--uvst-space-3);
  border-left: 1px solid var(--uvst-line);
}

.uvst-rnode > details > summary,
.uvst-rleaf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--uvst-space-1) var(--uvst-space-3);
  padding: var(--uvst-space-1) 0;
  min-height: 2rem;
}

.uvst-rnode > details > summary {
  cursor: pointer;
  list-style: none;
}

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

.uvst-rnode > details > summary::before {
  content: "";
  flex: none;
  align-self: center;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 var(--uvst-space-1);
  border-right: 2px solid var(--uvst-muted);
  border-bottom: 2px solid var(--uvst-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.uvst-rnode > details[open] > summary::before {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .uvst-rnode > details > summary::before {
    transition: none;
  }
}

.uvst-rleaf {
  border-bottom: 1px solid var(--uvst-line);
}

.uvst-rname {
  font-weight: 600;
  color: var(--uvst-ink);
  overflow-wrap: anywhere;
}

.uvst-rvalue {
  flex: 1 1 12rem;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.uvst-rcount {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-sm);
}

.uvst-rmore {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--uvst-primary);
  font: inherit;
  font-size: var(--uvst-text-sm);
  text-decoration: underline;
  cursor: pointer;
}

/* Dateiliste der Abfrage: Spalte "Optionen" mit zwei Knöpfen nebeneinander (Öffnen, Herunterladen). */
.uvst-grid-files .uvst-grid-options {
  gap: var(--uvst-space-3);
}

/*
 * Karte mit Schalter (Rohdaten, Inhalt der Rohdaten): Titel links, kleiner Schalter rechts; auf dem Telefon bricht der Schalter unter den Titel. Ist die Karte zu,
 * bleibt nur die Kopfzeile, die Karte braucht dann keinen Abstand nach unten.
 */
.uvst-toggle-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--uvst-space-1) var(--uvst-space-4);
}

.uvst-toggle-head .uvst-form-card-title {
  margin-bottom: 0;
}

.uvst-toggle-head + * {
  margin-top: var(--uvst-space-3);
}

/* Auswahl der Datei über dem Baum: Knöpfe mit dem Dateinamen, der Name bricht um. */
.uvst-rchoices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uvst-space-2);
  margin-bottom: var(--uvst-space-3);
}

.uvst-rchoices .uvst-btn {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.uvst-rfile {
  margin: 0 0 var(--uvst-space-3);
  color: var(--uvst-muted);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════ Kundenbereich schlanker */
/*
 * Gilt nur im Rahmen des Frameworks (.mud-layout: Kopfleiste, Menü und Inhalt des Kundenbereichs), nicht für die
 * öffentlichen Seiten. Auswahllisten und Dialoge hängt das Framework außerhalb davon ein; sie behalten ihre Schrift.
 *
 * Die Schriftfamilie und die Gewichte setzt PS.Core fest mit !important (PSApplication.razor). Ohne Änderung am Framework
 * lassen sie sich nur mit gleich starken Regeln und höherer Spezifität (.mud-layout davor) übersteuern; deshalb stehen
 * hier !important und die Selektoren des Frameworks. Größen und Abstände dagegen laufen über die Token von oben.
 */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.mud-layout {
  --font-sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Schriftgrößen: Grundschrift 14 statt 15 bis 16 px */
  --uvst-text-xs: 0.6875rem;
  --uvst-text-sm: 0.75rem;
  --uvst-text-md: 0.8125rem;
  --uvst-text-base: 0.875rem;
  --uvst-text-lg: 0.9375rem;
  --uvst-text-xl: 1.0625rem;
  --uvst-text-2xl: 1.1875rem;

  /* Abstände und Bedienelemente rund ein Fünftel enger */
  --uvst-space-1p5: 0.3125rem;
  --uvst-space-2: 0.4375rem;
  --uvst-space-2p5: 0.5rem;
  --uvst-space-3: 0.625rem;
  --uvst-space-3p5: 0.75rem;
  --uvst-space-4: 0.875rem;
  --uvst-space-5: 1rem;
  --uvst-space-6: 1.25rem;
  --uvst-space-8: 1.5rem;
  --uvst-space-10: 2rem;
  --uvst-space-12: 2.5rem;
  --uvst-control-height: 2rem;

  /* MudBlazor liest seine Größen aus diesen Variablen */
  --mud-typography-body1-size: 0.875rem;
  --mud-typography-body2-size: 0.8125rem;
  --mud-typography-subtitle1-size: 0.9375rem;
  --mud-typography-subtitle2-size: 0.8125rem;
  --mud-typography-button-size: 0.8125rem;
  --mud-typography-caption-size: 0.75rem;
  --mud-typography-default-family: var(--font-sans);
  --mud-typography-body1-family: var(--font-sans);
  --mud-typography-body2-family: var(--font-sans);
  --mud-typography-subtitle1-family: var(--font-sans);
  --mud-typography-subtitle2-family: var(--font-sans);
  --mud-typography-button-family: var(--font-sans);
  --mud-typography-caption-family: var(--font-sans);
  --mud-typography-overline-family: var(--font-sans);

  font-family: var(--font-sans) !important;
  font-size: var(--uvst-text-base);
  line-height: 1.45;
}

.mud-layout .mud-typography-body1,
.mud-layout .mud-typography-body2,
.mud-layout .mud-typography-subtitle1,
.mud-layout .mud-typography-subtitle2,
.mud-layout .mud-typography-caption,
.mud-layout .mud-typography-overline {
  font-family: var(--font-sans) !important;
}

/* Überschriften und Knöpfe: Inter Tight in leichteren Gewichten statt Raleway 700 */
.mud-layout h1,
.mud-layout h2,
.mud-layout h3,
.mud-layout h4,
.mud-layout h5,
.mud-layout h6,
.mud-layout .mud-typography-h1,
.mud-layout .mud-typography-h2,
.mud-layout .mud-typography-h3,
.mud-layout .mud-typography-h4,
.mud-layout .mud-typography-h5,
.mud-layout .mud-typography-h6 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

.mud-layout .mud-button,
.mud-layout .mud-button-label {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}

/* Die Beschriftung der Eingaben hat bei MudBlazor eine feste Größe (1rem) */
.mud-layout .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
  font-size: var(--uvst-text-base);
  line-height: 1.0625rem;
}

/*
 * ZMR-Batch (/app/zmr-batch): Die Aufträge kommen auf einmal und werden seitenweise gezeigt (höchstens 48 Zeilen), das Grid bekommt also keinen
 * Rahmen mit Bildlauf und keine feste Zeilenhöhe (die Zeilen sind durch die Spalte "Details" und die Knöpfe unterschiedlich hoch). Sortieren im
 * Grid ordnete nur die Seite und nicht die Liste: Der Sortierknopf der Überschriften ist stillgelegt. Die Abrechnung (ein paar Monate) behält ihn.
 */
.uvst-grid-batch .mud-table-container,
.uvst-grid-batch-billing .mud-table-container {
  max-height: none;
  overflow-y: visible;
}

.uvst-grid-batch tbody .mud-table-row,
.uvst-grid-batch-billing tbody .mud-table-row {
  height: auto;
}

.uvst-grid-batch thead .mud-table-sort-label {
  pointer-events: none;
  cursor: default;
}

.uvst-grid-batch thead .mud-table-sort-label .mud-table-sort-label-icon {
  display: none;
}

.uvst-grid-batch-billing thead th:nth-child(n + 2) {
  text-align: right;
}

/* Spalte "Details": drei Zeilen untereinander, eine vierte bei einer Fehlermeldung des Auftrags. */
.uvst-batch-details {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: var(--uvst-text-sm);
}

/* Spalte "Optionen": kleine Textknöpfe mit Symbol, brechen bei schmaler Spalte um. */
.uvst-batch-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--uvst-space-1);
}

.uvst-batch-actions .mud-button-root {
  font-size: var(--uvst-text-sm);
  text-transform: none;
  white-space: nowrap;
}

/*
 * ZMR-Batch, Auftragsliste: Kopf mit der Überschrift links und dem kleinen Symbol zum Aktualisieren rechts; Fußzeile unter der Tabelle mit der
 * Zahl der Aufträge links und den Pfeilen rechts (die Pfeile erscheinen erst bei mehr als einer Seite, die Seitengröße ist fest).
 */
.uvst-batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uvst-space-2);
}

.uvst-batch-head > :first-child {
  flex: 1 1 auto;
}

.uvst-batch-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uvst-space-3);
  padding-top: var(--uvst-space-2);
}

.uvst-batch-foot-count {
  color: var(--uvst-muted);
  font-size: var(--uvst-text-sm);
}

.uvst-batch-foot-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/*
 * Statusspalte der ZMR-Batch-Aufträge: Etikett (Badge) mit optionalem Kreisel, darunter der Fortschrittsbalken (bestimmt oder unbestimmt) und die
 * Fehlermeldung des Auftrags. Die Farben folgen denen der Hinweise (.uvst-alert-*), in Arbeit ist blau.
 */
.uvst-batch-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--uvst-space-1p5);
  min-width: 11rem;
}

.uvst-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--uvst-space-1p5);
  padding: var(--uvst-space-0p5) var(--uvst-space-2);
  border-radius: var(--uvst-radius-pill);
  font-size: var(--uvst-text-xs);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  background: #eceef2;
  color: #3c414b;
}

.uvst-badge-info {
  background: #d9e9f8;
  color: #0c3d6b;
}

.uvst-badge-success {
  background: #d4edda;
  color: #155724;
}

.uvst-badge-warning {
  background: #fff3cd;
  color: #664d03;
}

.uvst-badge-error {
  background: #f8d7da;
  color: #721c24;
}

.uvst-badge-spinner {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: uvst-spin 0.8s linear infinite;
}

@keyframes uvst-spin {
  to {
    transform: rotate(360deg);
  }
}

.uvst-progress {
  width: 100%;
  min-width: 10rem;
}

.uvst-progress-track {
  position: relative;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--uvst-radius-pill);
  background: #dfe3ea;
}

.uvst-progress-fill {
  height: 100%;
  border-radius: var(--uvst-radius-pill);
  background: #1f6fb8;
  transition: width 0.4s ease;
}

/* Unbestimmt: Ein Streifen läuft über die Schiene, solange die Gesamtzahl noch nicht bekannt ist. */
.uvst-progress-indeterminate {
  position: absolute;
  width: 40%;
  animation: uvst-slide 1.4s ease-in-out infinite;
}

@keyframes uvst-slide {
  0% {
    left: -40%;
  }

  100% {
    left: 100%;
  }
}

.uvst-progress-text {
  margin-top: var(--uvst-space-1);
  color: var(--uvst-muted);
  font-size: var(--uvst-text-xs);
}

.uvst-batch-error {
  color: #a8121c;
  font-size: var(--uvst-text-xs);
  max-width: 16rem;
}

.uvst-batch-error:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .uvst-badge-spinner,
  .uvst-progress-indeterminate {
    animation-duration: 3s;
  }

  .uvst-progress-fill {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════ Kopfleiste: Sitzungsbezeichnung / Kostenstelle */
/*
 * Der Kopf ist bei beiden Marken dunkel (UVS rot, OGZ blau): helle Schrift auf durchscheinender Fläche, das Bearbeiten als weißes Feld, dessen
 * Speichern-Knopf die Markenfarbe trägt. Ohne Wert steht eine gestrichelte Fläche "Kostenstelle" da, damit sich der Wert auch im Kopf setzen lässt.
 */
.uvst-label {
  position: relative;
  align-items: center;
  margin-right: var(--uvst-space-2);
}

.uvst-label-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--uvst-space-1p5);
  max-width: 16rem;
  height: 2rem;
  padding: 0 var(--uvst-space-3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--uvst-radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-size: var(--uvst-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
}

.uvst-label-pill:hover {
  background: rgba(255, 255, 255, 0.26);
}

.uvst-label-pill:focus-visible,
.uvst-label-action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.uvst-label-pill .mud-icon-root {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.uvst-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uvst-label-empty {
  border-style: dashed;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
}

.uvst-label-edit-icon {
  opacity: 0.7;
}

.uvst-label-pill:hover .uvst-label-edit-icon {
  opacity: 1;
}

.uvst-label-form {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 var(--uvst-space-1) 0 var(--uvst-space-3);
  border: 1px solid #fff;
  border-radius: var(--uvst-radius-pill);
  background: #fff;
  color: var(--uvst-ink);
}

.uvst-label-invalid {
  box-shadow: 0 0 0 3px #f8d7da;
}

.uvst-label-input {
  width: 14rem;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--uvst-text-sm);
}

.uvst-label-input::placeholder {
  color: var(--uvst-muted);
}

.uvst-label-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--uvst-muted);
  cursor: pointer;
}

.uvst-label-action:hover {
  background: var(--uvst-surface-2);
  color: var(--uvst-ink);
}

.uvst-label-save {
  color: var(--uvst-primary-deep);
}

/* Fehler und Hinweis unter der Kopfleiste, rechtsbündig zum Feld */
.uvst-label-error {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  z-index: 1300;
  padding: var(--uvst-space-2) var(--uvst-space-3);
  border-radius: var(--uvst-radius-sm);
  background: #f8d7da;
  color: #721c24;
  font-size: var(--uvst-text-sm);
  box-shadow: var(--uvst-shadow-md);
  white-space: nowrap;
}

@media (max-width: 960px) {
  .uvst-label-error {
    width: max-content;
    max-width: calc(100vw - 2rem);
    white-space: normal;
  }
}

/* Hinweis, dessen Text nicht umbrechen soll (auf schmalen Seiten bricht er wieder um, statt über den Rand zu laufen) */
.uvst-alert-nowrap .uvst-alert-body {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .uvst-alert-nowrap .uvst-alert-body {
    white-space: normal;
  }
}