/* ──────────────────────────────────────────────────────────────
   SWISSCAN Mitgliederbereich — Design-System v1
   Leitgedanke: business-like, ruhig, schweizerisch zurückhaltend.
   Brand-Rot ist Akzent, nicht Fläche. Hierarchie über Typo & Whitespace.
   ────────────────────────────────────────────────────────────── */

:root {
  --brand: #b90003;
  --brand-tint: #fbf0f0;
  --brand-ink: #8a0002;

  --ink: #1c2128;
  --ink-soft: #3d4350;
  --muted: #6b7280;
  --line: #e3e6ea;
  --line-soft: #eef0f3;
  --surface: #f7f8fa;
  --bg: #ffffff;

  --slate: #3a4a63; /* dezente Sekundärfarbe */
  --slate-tint: #eef1f6;

  --ok: #1b5e20;
  --ok-tint: #e8f5e9;
  --warn: #7c5d00;
  --warn-tint: #fff8e1;

  --radius: 0; /* Boxen (Karten, Kacheln, Verzeichnis, Login, Leerzustand) mit rechten Winkeln */
  --radius-sm: 5px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --maxw: 1140px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Anwendungsfenster statt Dokument: Die Höhe ist das Fenster, gescrollt wird
     eine Etage tiefer. 100dvh statt 100vh wegen der ein- und ausfahrenden
     Leisten auf Mobilgeräten. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
a {
  color: var(--brand-ink);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.4em;
}
h1 {
  font-size: 26px;
  letter-spacing: -0.01em;
}
h2 {
  font-size: 19px;
}
h3 {
  font-size: 16px;
}
p {
  margin: 0 0 0.8em;
}
small {
  font-size: 12px;
}

/* ── Topbar ───────────────────────────────────────────── */
.topbar {
  background: var(--ink);
  border-bottom: 2px solid var(--brand);
  color: #fff;
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-mark {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.brand-mark .kicker {
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.brand-mark .title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.topbar .user {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #c9cdd4;
}

/* Globales Suchfeld in der Kopfzeile */
.topsearch {
  flex: 1;
  max-width: 380px;
  margin: 0 24px;
  position: relative;
}
/* Zeichen für die KI-Suche, rechts im Feld. Es sitzt bewusst im Feld und nicht
   daneben: Es soll die Eigenschaft des Feldes benennen, nicht wie ein zweiter
   Knopf aussehen. pointer-events:none, damit ein Klick darauf ins Feld geht. */
.topsearch-ai {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--brand);
  opacity: 0.85;
  pointer-events: none;
}
/* Die Kopfzeile ist dunkel, deshalb muss die Schrift hier weiss bleiben.
   Der Selektor führt den Typ mit, sonst gewinnt die allgemeine Formularregel
   weiter unten (gleiche Spezifität, später im Dokument) und färbt die Schrift
   dunkel auf dunkel. */
.topsearch input[type="text"] {
  width: 100%;
  font-size: 13px;
  /* rechts mehr Luft, dort sitzt das KI-Zeichen */
  padding: 6px 32px 6px 12px;
  border-radius: 999px;
  border: 1px solid #3a4350;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.topsearch input[type="text"]::placeholder {
  color: #8b929e;
}
.topsearch input[type="text"]:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: none;
}
/* Die Autovervollständigung des Browsers setzt sonst eigene Farben (heller
   Hintergrund, dunkle Schrift) und macht das Feld unlesbar. */
.topsearch input[type="text"]:-webkit-autofill,
.topsearch input[type="text"]:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 40px #2b3240 inset;
  caret-color: #fff;
}
@media (max-width: 820px) {
  .topsearch {
    display: none;
  }
}
.topbar .user .role {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #3a4350;
  border-radius: 999px;
  padding: 2px 9px;
}
/* Status-Link zum Checkly-Status-Board (Monitoring #35) — sichtbar für alle. */
.topbar .user .status-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c9cdd4;
  text-decoration: none;
  font-size: 12px;
  transition: color 0.12s ease;
}
.topbar .user .status-link:hover {
  color: #fff;
}
.topbar .user .status-link .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}

/* ── Shell: Sidebar + Content ─────────────────────────── */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 28px 24px 0;
  /* Der Rumpf füllt, was die Kopfzeile übrig lässt. min-height:0 ist nötig,
     sonst wächst er über das Fenster hinaus und nichts scrollt. */
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}
/* Die Navigation steht fest, gescrollt wird ausschliesslich der Inhalt.
   Dafür trägt nicht mehr das Dokument die Bildlaufleiste, sondern die rechte
   Spalte: Fenster in drei Etagen (Kopfzeile, Rumpf, darin Navigation und
   Inhalt), und nur der Inhalt läuft über.
   Der frühere Versuch mit position:sticky liess die Navigation zwar oben
   stehen, sie wanderte aber bis dahin mit und bekam bei knappem Platz eine
   eigene Bildlaufleiste. Beides fällt hiermit weg. */
.shell > aside {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Die Leiste erscheint nur, wenn die Liste wirklich höher ist als das
     Fenster. Im Normalfall ist hier nichts zu sehen und nichts zu bewegen. */
  scrollbar-width: thin;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Gruppentitel in normaler Schreibweise statt Kapitälchen, dafür auf einem
   leichten Grau: die Trennung der Bereiche kommt so über die Fläche und nicht
   über die Schriftauszeichnung. */
.nav .group {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  /* Knapper als zuvor: Die Liste soll auch mit Vorstandsrechten in ein
     bildschirmfuellendes Fenster passen, ohne eigene Bildlaufleiste. */
  margin: 12px 0 4px;
}
.nav .group:first-child {
  margin-top: 0;
}
.nav a {
  color: var(--ink-soft);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav a:hover {
  background: var(--line-soft);
  text-decoration: none;
}
.nav a.active {
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-weight: 600;
}
/* Vorstandsbereich: dezent abgesetzt über die Sekundärfarbe, damit man auf
   einen Blick sieht, dass man sich in den Verwaltungsseiten bewegt. Bewusst
   nicht in Rot, denn Rot markiert in dieser Navigation die aktive Seite. */
.nav .group-vorstand {
  background: var(--slate-tint);
  color: var(--slate);
}
.nav a.nav-vorstand {
  border-left: 2px solid var(--slate-tint);
  padding-left: 10px;
}
.nav a.nav-vorstand:hover {
  border-left-color: var(--slate);
  background: var(--slate-tint);
}
.nav a.nav-vorstand.active {
  border-left-color: var(--brand);
}
.content {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  /* Luft unten, damit der letzte Kasten nicht am Fensterrand klebt. */
  padding-bottom: 40px;
}
.nav-icon {
  display: flex;
  opacity: 0.55;
}
.nav a.active .nav-icon {
  opacity: 1;
}

/* ── Bereichswechsel innerhalb einer Seite (Einstellungen) ── */
.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 20px;
}
.subtabs a {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subtabs a:hover {
  background: var(--line-soft);
  text-decoration: none;
}
.subtabs a.active {
  color: var(--brand-ink);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

/* ── Card ─────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}
.card .sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: -2px;
}

.grid {
  display: grid;
  gap: 16px;
}
/* Raster-Kinder dürfen unter ihre Inhaltsbreite schrumpfen. Ohne das gilt
   `min-width: auto`, und ein einziger langer Code-Block sprengt die Spalte und
   damit die ganze Seite in die Breite, obwohl der Block selbst scrollen könnte. */
.grid > * {
  min-width: 0;
}
.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Stat tiles ───────────────────────────────────────── */
.stat {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat .n {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.stat .l {
  color: var(--muted);
  font-size: 13px;
}

/* ── Pills / Tags (dezent, business-like) ─────────────── */
.pill {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--bg);
}
.pill.brand {
  border-color: #ecc9ca;
  color: var(--brand-ink);
  background: var(--brand-tint);
}
.pill.slate {
  border-color: #cdd6e4;
  color: var(--slate);
  background: var(--slate-tint);
}
.pill.ok {
  border-color: #bfe0c2;
  color: var(--ok);
  background: var(--ok-tint);
}
.tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover {
  background: var(--brand-ink);
  text-decoration: none;
}
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--muted);
  text-decoration: none;
}
.btn-link {
  background: none;
  border: none;
  color: var(--brand-ink);
  padding: 0;
}
.btn-link:hover {
  text-decoration: underline;
}

/* ── Forms ────────────────────────────────────────────── */
label.field {
  display: block;
  margin-bottom: 14px;
}
label.field .lbl {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
/* Hilfetext gehört unter das Feld, nicht daneben. */
label.field > small {
  display: block;
  margin-top: 5px;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--slate);
  box-shadow: 0 0 0 3px var(--slate-tint);
}
textarea {
  min-height: 84px;
  resize: vertical;
}
textarea.lg {
  min-height: 252px;
}

/* ── Table ────────────────────────────────────────────── */
/* Fängt zu breite Tabellen ab: sie scrollen innerhalb der Karte, statt rechts
   aus dem weissen Kasten zu laufen. Um jede Tabelle in einer Karte legen. */
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
thead th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
tbody tr:hover {
  background: var(--surface);
}

/* ── Directory cards ─────────────────────────────────── */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.dir-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.dir-card .co {
  font-weight: 600;
  font-size: 15px;
}
.dir-card .meta {
  color: var(--muted);
  font-size: 13px;
  margin: 2px 0 10px;
}

/* ── Auth ─────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}
.auth-card .kicker {
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.btn-oauth {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

/* ── Misc ─────────────────────────────────────────────── */
.banner {
  background: var(--warn-tint);
  border: 1px solid #ecdca6;
  color: var(--warn);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 18px;
}
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar .spacer {
  flex: 1;
}
.footer {
  margin: 40px 0 0;
  padding: 20px 0 0;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--line);
}
.footer a {
  color: var(--muted);
  text-decoration: underline;
}
.footer a:hover {
  color: var(--brand);
}
.empty {
  color: var(--muted);
  font-size: 14px;
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

@media (max-width: 820px) {
  .shell {
    grid-template-columns: 1fr;
  }
  /* Einspaltig gibt es keine feste Seitenleiste, die Navigation steht oben in
     der Zeile. Deshalb zurück zum gewöhnlichen Dokument-Scrollen: ein
     Anwendungsfenster mit eigener Bildlaufleiste fühlt sich auf einem
     Mobilgerät falsch an und bricht die Wischgesten. */
  body {
    height: auto;
    display: block;
    overflow: visible;
  }
  .shell {
    min-height: 0;
    padding-bottom: 40px;
  }
  .shell > aside {
    overflow: visible;
  }
  .content {
    overflow: visible;
    padding-bottom: 0;
  }
  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .nav .group {
    display: none;
  }
  .grid.cols-2,
  .grid.cols-3 {
    grid-template-columns: 1fr;
  }
}

/* ── SWISSCAN-Label (Kap. 4.9) ────────────────────────── */
.label-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
.label-preview-item {
  background: repeating-linear-gradient(
    45deg,
    var(--surface),
    var(--surface) 10px,
    #f1f3f6 10px,
    #f1f3f6 20px
  );
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}
.label-preview-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.snippet {
  position: relative;
}
/* Leiste über dem Code statt Knopf im Code: dort verdeckte er die erste Zeile
   und blieb beim seitlichen Scrollen im Weg. */
.snippet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #2b3240;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 6px 8px 6px 14px;
}
.snippet-kind {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa3b2;
}
.snippet-code {
  margin: 0;
  max-width: 100%;
  padding: 12px 14px;
  background: var(--ink);
  color: #e6e8ec;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: "SF Mono", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}
.btn-copy {
  padding: 3px 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.btn-copy:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.5);
}
.ruleset {
  margin: 8px 0 0;
  padding-left: 18px;
}
.ruleset li {
  margin-bottom: 10px;
  line-height: 1.55;
}
.ruleset code {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}
.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  vertical-align: middle;
  margin-right: 2px;
}

/* ── Gefahrenzone ─────────────────────────────────────── */
/* Für Handlungen, die eine Mitgliedschaft oder Daten endgültig beenden. Sie
   sollen sich optisch klar vom Rest der Seite abheben, damit niemand sie
   nebenbei auslöst. */
.danger-zone {
  border: 2px solid var(--brand);
  background: #b900030a;
  padding: 18px 20px;
  margin-top: 28px;
}
.danger-zone h2,
.danger-zone h3 {
  margin: 0 0 8px;
  color: var(--brand);
}
.danger-zone .lead {
  margin: 0 0 12px;
  line-height: 1.6;
  font-size: 14px;
}
.danger-zone ul {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
}
.danger-zone .confirm {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--brand);
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}
.danger-zone .confirm input[type="checkbox"] {
  margin-top: 2px;
  flex: 0 0 auto;
}
.btn-danger {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
}
.btn-danger:hover {
  background: #8f0002;
  border-color: #8f0002;
}

/* ── Wirkungsbelege (Impact-Profil) ───────────────────── */
/* Drei Felder je Beleg im Muster Kontext → Massnahme → Ergebnis. Auf breiten
   Schirmen nebeneinander, damit das Muster sichtbar wird; auf schmalen
   untereinander. */
.anchor-row {
  display: grid;
  grid-template-columns: 22px 1fr 1fr 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.anchor-row .anchor-no {
  color: var(--muted);
  font-size: 13px;
  padding-top: 22px;
}
.anchor-row label {
  display: block;
  margin: 0;
}
.anchor-row .lbl {
  display: block;
  margin-bottom: 4px;
}
@media (max-width: 760px) {
  .anchor-row {
    grid-template-columns: 1fr;
  }
  .anchor-row .anchor-no {
    padding-top: 0;
    font-weight: 600;
  }
}

/* ── Beispielkasten ───────────────────────────────────── */
/* Muss auf den ersten Blick als Beispiel lesbar sein und nicht als Teil des
   Formulars: abgesetzter Grund, Akzentkante links, kursiver Inhalt. */
.example-box {
  max-width: 720px;
  margin: 0 0 18px;
  background: var(--slate-tint);
  border: 1px solid #cdd6e4;
  border-left: 4px solid var(--brand);
  padding: 14px 18px;
}
.example-box > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 10px;
}
.example-box > summary::marker {
  color: var(--muted);
}
.example-box[open] > summary {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #b9c4d6;
}
.example-body {
  font-style: italic;
  color: var(--ink-soft);
}
.example-body p {
  margin: 2px 0 14px;
  line-height: 1.55;
  font-size: 14px;
}
.example-body p.last {
  margin-bottom: 0;
}
.example-body .lbl {
  font-style: normal;
  color: var(--slate);
}
.example-body .table-wrap {
  margin: 6px 0 14px;
  background: var(--bg);
  border: 1px dashed #b9c4d6;
}
.example-body table td,
.example-body table th {
  font-style: normal;
}
.example-body .note {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed #b9c4d6;
}

/* ── Arbeitszustand für lange Aktionen ────────────────── */
/* KI-Aufrufe dauern zehn bis zwanzig Sekunden. Ohne Rückmeldung wirkt die
   Seite tot und man klickt ein zweites Mal, was den Aufruf verdoppelt. */
.btn[data-busy="1"] {
  opacity: 0.75;
  cursor: progress;
}
.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.4s;
  }
}
.busy-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Beitragsart als Bildband (Showcase) ──────────────── */
/* Je Art ein fester Bildausschnitt. Der Verlauf darüber ist kein Effekt,
   sondern Voraussetzung: er hält die weisse Schrift auf jedem Motiv lesbar. */
.type-cover {
  position: relative;
  height: 112px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--slate);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.type-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16, 20, 26, 0.82) 0%, rgba(16, 20, 26, 0.35) 45%, rgba(16, 20, 26, 0.1) 100%);
}
.type-cover > span {
  position: relative;
  z-index: 1;
  padding: 0 14px 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.type-cover.type-intro {
  background-image: url("/static/showcase/intro.jpg");
}
.type-cover.type-case {
  background-image: url("/static/showcase/case.jpg");
}
.type-cover.type-story {
  background-image: url("/static/showcase/story.jpg");
}
.type-cover.type-usecase {
  background-image: url("/static/showcase/usecase.jpg");
}