/* Inserat123 design system v2: Apple-style product surfaces in a dark and a light theme. One blue for action, motion on transform and opacity only. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-variable-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  /* Colour tokens of the dark theme. Every colour of the panel is one of these; the light theme below redefines the
     same names and nothing else, so a component never asks which theme it is in. The test ThemeCssTests lists every
     hard-coded colour in the panel's stylesheets and fails on it; tools/pruefung/ansichten.mjs takes the pictures. */
  --bg: #000000;
  --bg-1: #1d1d1f;
  --bg-2: #2c2c2e;
  --bg-3: #3a3a3c;
  --bg-4: #48484a;
  --sunk: #161618;
  --pop: #242426;
  --pop-2: #2c2c2e;
  --stage: #0b0b0c;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.12);
  --fg: #f5f5f7;
  --fg-1: #d2d2d7;
  --fg-2: #a1a1a6;
  --fg-3: #86868b;
  --blue: #2997ff;
  --blue-fill: #0071e3;
  --blue-fill-hover: #0077ed;
  --blue-deep: #0a58ca;
  --blue-soft: rgba(41, 151, 255, 0.14);
  --green: #30d158;
  --orange: #ff9f0a;
  --red: #ff453a;
  --teal: #64d2ff;
  --on-accent: #ffffff;
  --on-tone: #000000;
  --knob: #ffffff;
  --paper: #ffffff;
  --tint-02: rgba(255, 255, 255, 0.02);
  --tint-03: rgba(255, 255, 255, 0.03);
  --tint-04: rgba(255, 255, 255, 0.04);
  --tint-05: rgba(255, 255, 255, 0.05);
  --tint-06: rgba(255, 255, 255, 0.06);
  --tint-07: rgba(255, 255, 255, 0.07);
  --tint-08: rgba(255, 255, 255, 0.08);
  --tint-09: rgba(255, 255, 255, 0.09);
  --tint-10: rgba(255, 255, 255, 0.1);
  --tint-12: rgba(255, 255, 255, 0.12);
  --tint-14: rgba(255, 255, 255, 0.14);
  --tint-16: rgba(255, 255, 255, 0.16);
  --tint-18: rgba(255, 255, 255, 0.18);
  --tint-24: rgba(255, 255, 255, 0.24);
  --tint-35: rgba(255, 255, 255, 0.35);
  --tint-45: rgba(255, 255, 255, 0.45);
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-soft: rgba(0, 0, 0, 0.35);
  --shadow-mid: rgba(0, 0, 0, 0.6);
  --shadow-strong: rgba(0, 0, 0, 0.8);
  --shadow-deep: rgba(0, 0, 0, 0.9);
  --shadow-tile: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
  --elevation: none;
  --focus-ring: rgba(41, 151, 255, 0.4);
  --selection-bg: rgba(41, 151, 255, 0.45);
  --selection-fg: #ffffff;
  --scrollbar: #3a3a3c;
  --map-filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.92) saturate(0.35);
  --map-credit-bg: rgba(0, 0, 0, 0.6);
  --theme-color: #0a0c10;
  --chart-7: #10357a;
  --chart-6: #8c95a6;
  --chart-5: #c9cfd9;
  --chart-4: #f2b441;
  --chart-3: #34c38f;
  --chart-2: #2563eb;
  --chart-1: #5b9bff;
  --raised: #3a3a3c;
  /* Derived names for what the steps mean. */
  --surface-1: var(--tint-03);
  --surface-2: var(--tint-05);
  --surface-3: var(--tint-07);
  --surface-hover: var(--tint-08);
  --chip-bg: var(--tint-10);
  --field-bg: var(--bg-2);
  --skeleton: var(--tint-06);
  --shadow-sm: 0 2px 8px -2px var(--shadow-mid);
  --shadow-md: 0 18px 44px -12px var(--shadow-strong);
  --shadow-lg: 0 50px 100px -30px var(--shadow-deep);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --pill: 980px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Motion of everything that appears: a soft settle without overshoot, exits faster than entrances. */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 260ms;
  --dur-exit: 150ms;
  --container: 1200px;
  --gutter: 24px;
}

/* The light theme: a near-white canvas, white sheets that rise by a soft shadow and a hairline instead of a lighter
   fill, dark text, the same blue tuned for contrast on white. It applies when the person chose "Hell", or follows the
   system under "System". Pages that keep their own look carry data-fixed-theme on their frame (the landing page). The
   two blocks below must stay identical; ThemeCssTests compares them. */
:root[data-theme="light"]:not(:has([data-fixed-theme])) {
  color-scheme: light;
  --bg: #f5f5f7;
  --bg-1: #ffffff;
  --bg-2: #f0f0f3;
  --bg-3: #e4e4e9;
  --bg-4: #d8d8de;
  --sunk: #fbfbfd;
  --pop: #ffffff;
  --pop-2: #ffffff;
  --stage: #ececf0;
  --line: rgba(0, 0, 0, 0.1);
  --line-strong: rgba(0, 0, 0, 0.18);
  --hairline: rgba(0, 0, 0, 0.1);
  --hairline-strong: rgba(0, 0, 0, 0.14);
  --fg: #1d1d1f;
  --fg-1: #2f2f33;
  --fg-2: #515156;
  --fg-3: #5f5f64;
  --blue: #005fc0;
  --blue-fill: #0071e3;
  --blue-fill-hover: #0077ed;
  --blue-deep: #0a58ca;
  --blue-soft: rgba(0, 95, 192, 0.1);
  --green: #146c2e;
  --orange: #8f4700;
  --red: #b71c12;
  --teal: #00709e;
  --on-accent: #ffffff;
  --on-tone: #ffffff;
  --knob: #ffffff;
  --paper: #ffffff;
  --tint-02: rgba(0, 0, 0, 0.02);
  --tint-03: rgba(0, 0, 0, 0.028);
  --tint-04: rgba(0, 0, 0, 0.035);
  --tint-05: rgba(0, 0, 0, 0.042);
  --tint-06: rgba(0, 0, 0, 0.05);
  --tint-07: rgba(0, 0, 0, 0.057);
  --tint-08: rgba(0, 0, 0, 0.065);
  --tint-09: rgba(0, 0, 0, 0.072);
  --tint-10: rgba(0, 0, 0, 0.08);
  --tint-12: rgba(0, 0, 0, 0.095);
  --tint-14: rgba(0, 0, 0, 0.11);
  --tint-16: rgba(0, 0, 0, 0.125);
  --tint-18: rgba(0, 0, 0, 0.14);
  --tint-24: rgba(0, 0, 0, 0.18);
  --tint-35: rgba(0, 0, 0, 0.28);
  --tint-45: rgba(0, 0, 0, 0.42);
  --scrim: rgba(22, 22, 28, 0.32);
  --shadow-soft: rgba(15, 20, 40, 0.08);
  --shadow-mid: rgba(15, 20, 40, 0.12);
  --shadow-strong: rgba(15, 20, 40, 0.16);
  --shadow-deep: rgba(15, 20, 40, 0.22);
  --shadow-tile: 0 1px 2px rgba(15, 20, 40, 0.04), 0 14px 36px -18px rgba(15, 20, 40, 0.16);
  --elevation: 0 0 0 1px rgba(15, 20, 40, 0.1), 0 1px 2px rgba(15, 20, 40, 0.06), 0 12px 28px -16px rgba(15, 20, 40, 0.16);
  --focus-ring: rgba(0, 113, 227, 0.32);
  --selection-bg: rgba(0, 113, 227, 0.2);
  --selection-fg: #1d1d1f;
  --scrollbar: #c7c7cd;
  --map-filter: saturate(0.7) contrast(0.96);
  --map-credit-bg: rgba(255, 255, 255, 0.78);
  --theme-color: #f5f5f7;
  --chart-7: #10357a;
  --chart-6: #6b7486;
  --chart-5: #9aa3b2;
  --chart-4: #d9920a;
  --chart-3: #1f9d6f;
  --chart-2: #2563eb;
  --chart-1: #2f7de1;
  --raised: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="light"], [data-theme="dark"]):not(:has([data-fixed-theme])) {
    color-scheme: light;
    --bg: #f5f5f7;
    --bg-1: #ffffff;
    --bg-2: #f0f0f3;
    --bg-3: #e4e4e9;
    --bg-4: #d8d8de;
    --sunk: #fbfbfd;
    --pop: #ffffff;
    --pop-2: #ffffff;
    --stage: #ececf0;
    --line: rgba(0, 0, 0, 0.1);
    --line-strong: rgba(0, 0, 0, 0.18);
    --hairline: rgba(0, 0, 0, 0.1);
    --hairline-strong: rgba(0, 0, 0, 0.14);
    --fg: #1d1d1f;
    --fg-1: #2f2f33;
    --fg-2: #515156;
    --fg-3: #5f5f64;
    --blue: #005fc0;
    --blue-fill: #0071e3;
    --blue-fill-hover: #0077ed;
    --blue-deep: #0a58ca;
    --blue-soft: rgba(0, 95, 192, 0.1);
    --green: #146c2e;
    --orange: #8f4700;
    --red: #b71c12;
    --teal: #00709e;
    --on-accent: #ffffff;
    --on-tone: #ffffff;
    --knob: #ffffff;
    --paper: #ffffff;
    --tint-02: rgba(0, 0, 0, 0.02);
    --tint-03: rgba(0, 0, 0, 0.028);
    --tint-04: rgba(0, 0, 0, 0.035);
    --tint-05: rgba(0, 0, 0, 0.042);
    --tint-06: rgba(0, 0, 0, 0.05);
    --tint-07: rgba(0, 0, 0, 0.057);
    --tint-08: rgba(0, 0, 0, 0.065);
    --tint-09: rgba(0, 0, 0, 0.072);
    --tint-10: rgba(0, 0, 0, 0.08);
    --tint-12: rgba(0, 0, 0, 0.095);
    --tint-14: rgba(0, 0, 0, 0.11);
    --tint-16: rgba(0, 0, 0, 0.125);
    --tint-18: rgba(0, 0, 0, 0.14);
    --tint-24: rgba(0, 0, 0, 0.18);
    --tint-35: rgba(0, 0, 0, 0.28);
    --tint-45: rgba(0, 0, 0, 0.42);
    --scrim: rgba(22, 22, 28, 0.32);
    --shadow-soft: rgba(15, 20, 40, 0.08);
    --shadow-mid: rgba(15, 20, 40, 0.12);
    --shadow-strong: rgba(15, 20, 40, 0.16);
    --shadow-deep: rgba(15, 20, 40, 0.22);
    --shadow-tile: 0 1px 2px rgba(15, 20, 40, 0.04), 0 14px 36px -18px rgba(15, 20, 40, 0.16);
    --elevation: 0 0 0 1px rgba(15, 20, 40, 0.1), 0 1px 2px rgba(15, 20, 40, 0.06), 0 12px 28px -16px rgba(15, 20, 40, 0.16);
    --focus-ring: rgba(0, 113, 227, 0.32);
    --selection-bg: rgba(0, 113, 227, 0.2);
    --selection-fg: #1d1d1f;
    --scrollbar: #c7c7cd;
    --map-filter: saturate(0.7) contrast(0.96);
    --map-credit-bg: rgba(255, 255, 255, 0.78);
    --theme-color: #f5f5f7;
    --chart-7: #10357a;
    --chart-6: #6b7486;
    --chart-5: #9aa3b2;
    --chart-4: #d9920a;
    --chart-3: #1f9d6f;
    --chart-2: #2563eb;
    --chart-1: #2f7de1;
    --raised: #ffffff;
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--blue);
  scrollbar-color: var(--scrollbar) transparent;
  scrollbar-width: thin;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 8px;
  border: 2px solid var(--bg);
}

:is(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Blazor moves focus to the heading after navigation; that focus must stay invisible. */
h1:focus,
h1:focus-visible,
[tabindex="-1"]:focus {
  outline: none;
}

h1,
h2,
h3,
h4 {
  color: var(--fg);
  margin: 0 0 0.45em;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.75rem);
  letter-spacing: -0.025em;
}

h3 {
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
  max-width: 66ch;
}

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

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }
}

strong {
  color: var(--fg);
  font-weight: 600;
}

small {
  font-size: 0.85em;
}

code {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  color: var(--fg);
}

.num,
.tabular,
td.num,
th.num {
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--fg-3);
}

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

.label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-3);
}

.label-code {
  display: inline-block;
  min-width: 2.2em;
  margin-right: 0.5em;
  color: var(--blue);
  font-weight: 600;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* Links with the Apple chevron */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: 1.05rem;
  font-weight: 400;
}

.link-arrow::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 3px;
  transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover::after {
    transform: rotate(45deg) translate(2px, -2px);
  }
}

/* Buttons: pills that respond on press. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--pill);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}

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

.btn:active {
  transform: scale(0.97);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--blue-fill);
  color: var(--on-accent);
}

.btn-ghost {
  background: var(--tint-10);
  color: var(--fg);
}

.btn-quiet {
  background: var(--tint-06);
  color: var(--fg-1);
}

.btn-danger {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--blue-fill-hover);
  }

  .btn-ghost:hover {
    background: var(--tint-16);
  }

  .btn-quiet:hover {
    background: var(--tint-12);
    color: var(--fg);
  }

  .btn-danger:hover {
    background: color-mix(in srgb, var(--red) 24%, transparent);
  }
}

.btn-sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.85rem;
}

.btn-lg {
  min-height: 50px;
  padding: 0 26px;
  font-size: 1.02rem;
}

.btn-icon {
  min-width: 32px;
  padding: 0 7px;
}

.btn.w-100,
.w-100 {
  width: 100%;
}

/* Forms */
label,
.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--fg-3);
  margin-bottom: 6px;
}

input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="time"],
select,
textarea,
.form-control,
.form-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  background: var(--bg-2);
  color: var(--fg);
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
  transition: box-shadow 160ms var(--ease-out), background-color 160ms ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--fg-3);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* Häkchen und Auswahlpunkt behalten ihr Maß, egal in welcher Zeile sie stehen: eine Regel für Textfelder
   (Breite, Mindesthöhe, Innenabstand) darf aus ihnen keine Pille machen. */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  border-radius: 6px;
  background: var(--tint-12);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 120ms var(--ease-out);
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--on-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 160ms var(--ease-out), opacity 120ms var(--ease-out);
}

input[type="radio"]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--on-accent);
  transform: scale(0.6);
  opacity: 0;
  transition: transform 160ms var(--ease-out), opacity 120ms var(--ease-out);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--blue-fill);
  box-shadow: none;
}

input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after {
  transform: none;
  opacity: 1;
}

input[type="checkbox"]:active,
input[type="radio"]:active {
  transform: scale(0.92);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a1a1a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  font-weight: 500;
}

textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 16px;
}

.field-hint {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--fg-3);
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--fg-1);
  cursor: pointer;
  margin-bottom: 0;
}

/* Choice chips: a hidden checkbox or radio inside a pill. Selected = blue on blue-soft, like the product's chips. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 13px;
  border-radius: var(--pill);
  background: var(--tint-07);
  color: var(--fg-1);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  margin: 0;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}

.chip-check-lg {
  min-height: 40px;
  padding: 0 16px 0 12px;
  font-size: 0.92rem;
}

.chip-check .icon {
  opacity: 0;
  width: 0;
  transition: opacity 160ms var(--ease-out), width 160ms var(--ease-out);
}

.chip-check:has(input:checked) .icon {
  opacity: 1;
  width: 14px;
}

.chip-check.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chip-check input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  border-radius: inherit;
  cursor: pointer;
}

.chip-check:has(input:checked) {
  background: var(--blue-soft);
  color: var(--blue);
}

.chip-check:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.chip-check:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .chip-check:hover {
    background: var(--tint-12);
    color: var(--fg);
  }

  .chip-check:has(input:checked):hover {
    background: color-mix(in srgb, var(--blue) 22%, transparent);
    color: var(--blue);
  }
}

/* Set by an overlay component (e.g. the demo in fullscreen) so the page behind does not scroll. */
html.is-locked,
html.is-locked body,
html.has-dialog,
html.has-dialog body {
  overflow: hidden;
}

/* iOS-style switch: the input itself is the track, its pseudo-element the knob. Transform and color only. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--fg-1);
  cursor: pointer;
  user-select: none;
}

.switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: block;
  flex: none;
  width: 44px;
  min-width: 44px;
  height: 26px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 13px;
  background: var(--tint-16);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out);
}

/* Der Knopf ist ein Kreis. Maske, Deckkraft und Skalierung des gewöhnlichen Häkchens gelten hier nicht:
   sonst ist er ausgeschaltet unsichtbar und eingeschaltet ein Haken. */
.switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--knob);
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  transform: none;
  box-shadow: 0 2px 6px var(--shadow-soft);
  transition: transform 220ms var(--ease-out);
}

.switch input[type="checkbox"]:active {
  transform: none;
}

.switch input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.switch:has(input:disabled) {
  cursor: not-allowed;
}

.switch input[type="checkbox"]:checked {
  background: var(--green);
}

.switch input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}

.switch input[type="checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.validation-message,
.text-danger {
  display: block;
  color: var(--red);
  font-size: 0.8rem;
  margin-top: 6px;
}

.validation-summary-errors {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--fg);
  font-size: 0.9rem;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 18px;
}

.invalid {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 45%, transparent) !important;
}

/* Template compatibility for the Identity manage pages. */
.form-floating {
  position: relative;
  margin-bottom: 16px;
}

.form-floating > .form-control {
  padding-top: 20px;
  padding-bottom: 6px;
  min-height: 52px;
}

.form-floating > label {
  position: absolute;
  left: 14px;
  top: 7px;
  margin: 0;
  font-size: 0.7rem;
  color: var(--fg-3);
  pointer-events: none;
}

.checkbox,
.form-check {
  margin-bottom: 16px;
}

.form-check-input {
  margin-right: 8px;
}

.alert {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--fg);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.alert-danger {
  background: color-mix(in srgb, var(--red) 14%, transparent);
}

.alert-success {
  background: color-mix(in srgb, var(--green) 14%, transparent);
}

.text-secondary {
  color: var(--fg-3);
}

.mb-3 {
  margin-bottom: 16px;
}

.mt-2 {
  margin-top: 8px;
}

.row {
  display: block;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}

.nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin: 0 0 20px;
  list-style: none;
  background: var(--bg-2);
  border-radius: var(--pill);
  width: fit-content;
}

.nav-pills .nav-link {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--pill);
  color: var(--fg-1);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease;
}

.nav-pills .nav-link.active {
  background: var(--fg);
  color: var(--bg);
}

.h1,
.h2,
.h3 {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.4em;
}

.h2 {
  font-size: 1.9rem;
}

/* Notices */
.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--bg-1);
  color: var(--fg-1);
  font-size: 0.92rem;
  margin-bottom: 18px;
  animation: notice-in var(--dur-base) var(--ease-spring);
}

/* A message that appears after an action comes down a few pixels and settles; it never moves what is below it twice. */
@keyframes notice-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notice {
    animation: none;
  }
}

.notice-error {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--fg);
}

.notice-success {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--fg);
}

.notice-info {
  background: var(--blue-soft);
  color: var(--fg);
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table th {
  text-align: left;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  color: var(--fg-1);
}

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

@media (hover: hover) and (pointer: fine) {
  .table tr:hover td {
    background: var(--tint-03);
  }
}

.table .num {
  text-align: right;
  white-space: nowrap;
}

/* Capsules */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--pill);
  background: var(--tint-10);
  color: var(--fg-1);
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
}

.chip-blue {
  background: var(--blue-soft);
  color: var(--blue);
}

.chip-green {
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
}

.chip-amber {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange);
}

.chip-red {
  background: color-mix(in srgb, var(--red) 16%, transparent);
  color: var(--red);
}

.chip-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.8s ease-in-out infinite;
}

.margin-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.margin-value.is-good {
  color: var(--green);
}

.margin-value.is-strong {
  color: var(--blue);
}

.margin-value.is-bad {
  color: var(--red);
}

.margin-value.is-unknown {
  color: var(--fg-3);
  font-weight: 400;
}

/* Tiles: the one container of the product. */
.sheet {
  background: var(--bg-1);
  border-radius: var(--radius-lg);
  /* Nothing on the dark ground; on the light one a sheet rises by a hairline and a soft shadow. */
  box-shadow: var(--elevation);
}

.sheet-pad {
  padding: 22px 24px;
}

.sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 0;
}

.sheet-head h2,
.sheet-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.sheet-head .muted {
  font-size: 0.85rem;
}

/* Page header of panel pages: one row. Title and lead on the left, actions on the right in a 40 px line that the
   notification bell shares (the layout reserves its slot), so every page starts on the same rhythm. */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  min-height: 40px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.page-head > :first-child {
  flex: 1 1 320px;
  min-width: 0;
}

/* The line of the title is centred on the 40 px of the action row. */
.page-head h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 32px;
  margin: 4px 0;
}

.page-head p {
  margin: 0;
  color: var(--fg-3);
  font-size: 0.92rem;
}

.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  min-height: 40px;
  margin-left: auto;
}

.page-head-center {
  justify-content: center;
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
}

/* Instrument tiles used by the smaller pages. */
.instruments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.instrument {
  background: var(--bg-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation);
  padding: 18px 20px 16px;
  min-width: 0;
}

.instrument .label {
  display: block;
  margin-bottom: 10px;
}

.instrument-value {
  display: block;
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.instrument-value.is-blue {
  color: var(--blue);
}

.instrument-value.is-green {
  color: var(--green);
}

.instrument-sub {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--fg-3);
}

/* Empty, loading, error states: one centred column, an icon in a soft disc, a title, one line, one action. */
.state,
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 320px;
  padding: 56px 24px;
  color: var(--fg-2);
  background: var(--bg-1);
  border-radius: var(--radius-lg);
}

.empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 18px;
}

.state h3,
.empty h3 {
  font-size: 1.25rem;
  margin: 0 0 6px;
  color: var(--fg);
}

.state p,
.empty p {
  max-width: 44ch;
  margin: 0 auto 20px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* A choice that belongs to the action of an empty state, such as the car a first invoice is for. */
.empty-field {
  width: min(360px, 100%);
  margin: 0 auto 16px;
  text-align: left;
}

.empty-steps {
  list-style: none;
  margin: 4px 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.empty-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--pill);
  background: var(--tint-06);
  color: var(--fg-1);
  font-size: 0.86rem;
}

.empty-step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 600;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border-radius: 8px;
  min-height: 16px;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--tint-06), transparent);
  animation: shimmer 1.4s infinite;
}

/* Legal pages */
.legal {
  max-width: 72ch;
  margin: 0 auto;
  padding: 72px var(--gutter) 40px;
}

.legal h1 {
  font-size: 2.4rem;
}

.legal h2 {
  font-size: 1.35rem;
  margin-top: 2.2em;
}

.legal p,
.legal li {
  color: var(--fg-1);
  font-size: 1rem;
}

.legal-table-wrap {
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.legal-table th,
.legal-table td {
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--fg-1);
}

.legal-table th {
  color: var(--fg-3);
  font-size: 0.8rem;
  font-weight: 500;
}

.legal-table td:first-child {
  width: 42%;
}

/* Reveal motion for marketing surfaces: visible without JS, entering once with a strong ease-out. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 700px) {
  :root {
    --gutter: 18px;
  }

  body {
    font-size: 16px;
  }

  /* Phone: the title first, then the actions as one row that scrolls sideways instead of stacking pills. */
  .page-head {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
  }

  .page-head > :first-child {
    flex: none;
  }

  .page-head h1 {
    font-size: 1.6rem;
    margin-top: 0;
  }

  .page-head-center {
    align-items: center;
  }

  .page-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .page-actions::-webkit-scrollbar {
    display: none;
  }

  .page-actions > * {
    flex: none;
  }

  .page-actions .btn-sm {
    min-height: 40px;
    padding: 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal] {
    transform: none;
    transition: opacity 300ms ease;
  }

  .chip-live::before {
    animation: none;
  }

  .btn,
  .chip-check,
  .switch input[type="checkbox"],
  .switch input[type="checkbox"]::after,
  input[type="checkbox"],
  input[type="radio"],
  input[type="checkbox"]::after,
  input[type="radio"]::after {
    transition-duration: 1ms;
  }

  .btn:active,
  .chip-check:active,
  input[type="checkbox"]:active,
  input[type="radio"]:active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-nav,
  .panel-side {
    backdrop-filter: none !important;
  }
}

/* Eine Auswahl als Etikett: die Schrift richtet sich nach dem Etikett, nicht nach dem Knopf, der sie trägt. */
.dd-chip .dd-trigger.chip {
  font-size: 0.78rem;
  line-height: 1.2;
  min-height: 26px;
}

/* A page head whose actions are all hidden for this person (read-only member) leaves no empty row behind. */
.page-actions:not(:has(*)) {
  display: none;
}