Reisacher-Forderung/static/assets/css/app.css

/* Shared application theme and navigation. CoreUI remains the component base. */
:root {
  --gc-header-height: 64px;
  --gc-context-height: 130px;
  --gc-brand-header: #c3ccd4;
  --gc-brand-section: #cdd4da;
  --gc-brand-border: #b1bcc7;
  --gc-brand-action: #72889b;
  --gc-brand-ink: #182630;
  --gc-brand-mark: #b30808;
}
body {
  --cui-body-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cui-heading-font-family: var(--cui-body-font-family);
  font-family: var(--cui-body-font-family);
}
.gc-app-header { font-family: var(--cui-body-font-family); font-size: 1.125rem; }
.gc-app-header.header {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 0;
  margin: 0;
  background: var(--gc-brand-header);
  border-bottom: 1px solid var(--gc-brand-border);
  filter: drop-shadow(0 2px 4px #1826300a);
}
/* Extend only the background, keeping navigation aligned with the content. */
.gc-app-header.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gc-brand-header);
  box-shadow: 0 0 0 100vmax var(--gc-brand-header);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}
.gc-app-header.header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--gc-brand-border);
  box-shadow: 0 0 0 100vmax var(--gc-brand-border);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}
.gc-app-header .gc-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  min-height: 64px;
  padding: .65rem 1.25rem;
}
.gc-header-brand { flex: 0 1 180px; min-width: 0; }
.gc-header-brand img { display: block; width: 100%; max-width: 180px; height: auto; }
.gc-app-header .header-nav { flex-wrap: wrap; gap: .25rem; }
.gc-app-header .nav-link { font-size: inherit; color: var(--gc-brand-ink); border-radius: 6px; }
.gc-app-header .nav-link:hover { background: #ffffff70; }
.gc-header-account { flex-wrap: wrap; min-width: 0; }
.gc-header-account span { overflow-wrap: anywhere; }
.gc-section-title { margin: 0; padding: .8rem 1rem; background: var(--gc-brand-section); border-radius: 9px 9px 0 0; font-size: 1.125rem; font-weight: 700; line-height: 1.5; display: flex; align-items: center; gap: .6rem; font-family: inherit; }
.gc-section-description { padding: .75rem 1rem 0; margin: 0; font-size: 1.0625rem; color: #52616f; }
.gc-document-badge { display: inline-flex; justify-content: center; width: 3.25rem; padding: .15rem .5rem; border: 1px solid transparent; border-radius: 5px; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; color: #000; }
.gc-document-badge--M1 { background: #ffe97e; border-color: #c8af45; }
.gc-document-badge--M2 { background: #f7d8bf; border-color: #e98751; }
.gc-document-badge--M3 { background: #f5dddd; border-color: #b30808; }
.gc-section-title .icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; font-size: 1.25rem; vertical-align: -.1em; }

html, body { min-height: 100%; background: #f4f6fb; color: #111827; }
body { overflow-y: auto; }
.gc-page { flex: 1; width: 100%; max-width: 1840px; margin: 0 auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; min-height: calc(100vh - 72px); }
.gc-card { background: #fff; border: 1px solid #dce2e7; border-radius: 10px; box-shadow: 0 2px 6px #18263004; }
:is(.gc-detail-page, .gc-list-page, .gc-list-summary) :is(a, button, input, select, summary, [tabindex]):focus-visible,
.gc-app-header :is(a, button):focus-visible { outline: 3px solid #354f63; outline-offset: 3px; }
@media (max-width: 575.98px) {
  .gc-app-header .gc-header-inner { padding: .5rem .75rem; gap: .25rem .65rem; }
  .gc-header-brand { flex-basis: 140px; }
  .gc-app-header .gc-header-tools { width: 100%; margin-left: 0 !important; }
  .gc-header-account { flex: 1; justify-content: flex-end; font-size: 1rem; }
}