/*
 * 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);
}

/* ── 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. */
.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;
}

.uvst-portal-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--uvst-space-3);
}

.uvst-portal-frame {
  display: block;
  width: 100%;
  height: max(32rem, calc(100vh - 17rem));
  border: 1px solid var(--uvst-line);
  border-radius: var(--uvst-radius-sm);
  background: #fff;
}

/* Liegt über dem noch leeren Rahmen, damit dieser beim Verschwinden des Textes nicht springt. */
.uvst-portal-loading {
  position: absolute;
  inset: 4rem 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);
}

/*
 * 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;
  }

  .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;
  }
}

/* ═══════════════════════════════════════════════ 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;
  }
}