/*
 * Bausteine des Admin. Alle Werte kommen aus dem Theme (themes/aurora.css), hier steht keine Farbe,
 * kein Schatten und kein Radius als fester Wert. Ein Test prüft das.
 *
 * Abschnitte: Grundlagen · Rahmen · Bedienelemente · Inhalte · Bibliothek · Anfragen und Tracking ·
 * Suche · Meldungen · Chat · Dashboard · Anmeldung · Kleine Bildschirme
 */

/* Grundlagen ------------------------------------------------------------------ */

* {
  box-sizing: border-box;
  border-color: var(--color-line);
  scrollbar-color: var(--color-line-strong) transparent;
  scrollbar-width: thin;
}

html {
  accent-color: var(--color-accent);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--color-sidebar);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading);
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: 0;
}

h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

h3,
h4 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

::selection {
  background: var(--color-accent-soft);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.leise {
  color: var(--color-muted);
}

.code,
.pfad {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.warnung {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

.still,
.dash-still,
caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  flex: none;
  width: var(--size-icon);
  height: var(--size-icon);
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.verlaufstext {
  background: var(--gradient-text);
  background-clip: text;
  color: transparent;
}

.oberzeile {
  color: var(--color-faint);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  padding: 0 var(--space-1);
  border: var(--border-width) solid var(--color-line-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  line-height: 1.6;
}

/* Einspaltige Raster: Ohne diese Regel wird die Spalte so breit wie der breiteste Inhalt, und lange Pfade,
   Befehle oder Tabellen laufen aus Karte, Sprechblase oder Bildschirm. */
:is(
  .sprechblase,
  .md,
  .kachel,
  .abschnitt,
  .dash,
  .ablage,
  .anfragen,
  .schublade-inhalt,
  .eintrag-formular,
  .formular-seite,
  .formular-karten,
  .vorschlaege,
  .eintraege,
  .held,
  .aufgabe-text,
  .website,
  .websites,
  .nav-gruppe,
  .nav-fuss,
  .freigabe-text
) {
  grid-template-columns: minmax(0, 1fr);
}

/* Zustände: Punkte, Ringe und Marken lesen ihre Farbe aus --zustand. */
[data-art="bereit"],
[data-art="gut"],
[data-art="erfolg"] {
  --zustand: var(--color-success);
  --zustand-weich: var(--color-success-soft);
}

[data-art="arbeitet"],
[data-art="werkzeug"],
[data-art="wartet"],
[data-art="warnung"] {
  --zustand: var(--color-working);
  --zustand-weich: var(--color-warning-soft);
}

[data-art="denkt"] {
  --zustand: var(--color-thinking);
  --zustand-weich: var(--color-accent-soft);
}

[data-art="schreibt"],
[data-art="akzent"],
[data-art="info"] {
  --zustand: var(--color-writing);
  --zustand-weich: var(--color-accent-soft);
}

[data-art="fehler"],
[data-art="gefahr"] {
  --zustand: var(--color-danger);
  --zustand-weich: var(--color-danger-soft);
}

[data-art="schlaeft"],
[data-art="ruhig"] {
  --zustand: var(--color-faint);
  --zustand-weich: var(--color-hover);
}

.punkt {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--zustand, var(--color-faint));
}

.punkt[data-art="arbeitet"],
[data-art="arbeitet"] > .punkt,
[data-art="denkt"] > .punkt,
[data-art="schreibt"] > .punkt,
[data-art="werkzeug"] > .punkt {
  animation: pulsieren var(--duration-slow) var(--ease-out) infinite;
}

@keyframes pulsieren {
  0% {
    box-shadow: 0 0 0 0 var(--zustand);
  }
  80%,
  100% {
    box-shadow: 0 0 0 6px transparent;
  }
}

@keyframes drehen {
  to {
    transform: rotate(1turn);
  }
}

@keyframes auftauchen {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

@keyframes einblenden {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes schimmern {
  to {
    background-position: -200% 0;
  }
}

/* Rahmen ---------------------------------------------------------------------- */

.rahmen {
  display: grid;
  grid-template-columns: var(--size-sidebar) minmax(0, 1fr);
  height: 100dvh;
}

.seitenleiste {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1-5);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.logo-zeichen {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-glow);
  color: var(--color-on-accent);
}

.suchknopf {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: var(--size-control);
  padding-inline: var(--space-2-5) var(--space-1-5);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-faint);
  cursor: pointer;
  transition: border-color var(--duration-fast);

  & span {
    flex: 1;
    text-align: left;
  }

  &:hover {
    border-color: var(--color-accent);
  }
}

.nav-gruppe {
  display: grid;
  gap: var(--space-0-5);
}

.nav-gruppe:empty {
  display: none;
}

.nav-titel {
  padding: var(--space-1) var(--space-2);
  color: var(--color-faint);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.nav-punkt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control);
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition:
    background var(--duration-fast),
    color var(--duration-fast);

  /* Deckend wie auf einer Fläche: Halbdurchsichtig verlöre die Zahl auf dem ausgewählten Punkt an Kontrast. */
  & > .zaehler {
    background:
      linear-gradient(var(--zustand-weich), var(--zustand-weich)),
      var(--color-surface);
  }

  & > span:not(.punkt, .avatar, .zaehler) {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &:hover {
    background: var(--color-hover);
    color: var(--color-text);
  }

  &[aria-current="page"] {
    background: var(--color-selected);
    color: var(--color-text);

    &::before {
      position: absolute;
      inset-block: 22%;
      left: 0;
      width: 3px;
      border-radius: var(--radius-full);
      background: var(--gradient-brand);
      content: "";
    }
  }
}

.wechsler {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1-5);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast);

  &:hover {
    border-color: var(--color-accent);
  }

  & > .icon {
    color: var(--color-faint);
  }
}

.wechsler-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.wechsler-titel {
  overflow: hidden;
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wechsler-unter {
  color: var(--color-faint);
  font-size: var(--text-xs);
}

.nav-fuss {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}

.abgleich {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-2);
  color: var(--color-faint);
  font-size: var(--text-xs);
}

.abgleich[data-art="fehler"] {
  color: var(--color-danger);
}

.abgleich[data-art="bereit"] .punkt {
  animation: pulsieren var(--duration-slow) var(--ease-out) infinite;
}

.nutzer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5);
  border-radius: var(--radius-lg);
  background: var(--color-hover);
  font-size: var(--text-sm);
}

.nutzer-mail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hauptfläche: schwebt als Panel neben der Seitenleiste. */
.buehne {
  display: grid;
  grid-template-rows: var(--size-topbar) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  margin: var(--space-2) var(--space-2) var(--space-2) 0;
  overflow: hidden;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--backdrop), var(--color-canvas);
  box-shadow: var(--shadow-md);
}

.kopfleiste {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding-inline: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-line);
}

.krumen ol {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  list-style: none;

  & li {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    min-width: 0;
  }

  & .icon {
    width: var(--size-icon-sm);
    color: var(--color-faint);
  }

  & a {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: var(--color-text);
    }
  }

  & [aria-current="page"] {
    overflow: hidden;
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.inhalt {
  --breite-inhalt: var(--size-content);

  /* Sonst hängen sich unsichtbare Texte für Screenreader ans Dokument, und die ganze Seite scrollt mit. */
  position: relative;

  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-content: start;
  min-width: 0;
  overflow-y: auto;
  /* Unten Platz für den Chat-Knopf, sonst läge er über dem Ende der Seite. */
  padding-block: var(--space-6) calc(var(--size-bubble) + var(--space-8));
  padding-inline: max(var(--space-8), calc((100% - var(--breite-inhalt)) / 2));
  outline: none;

  &[data-breite="breit"] {
    --breite-inhalt: var(--size-wide);
  }

  &[data-breite="schmal"] {
    --breite-inhalt: var(--size-narrow);
  }
}

/* Bedienelemente --------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  height: var(--size-control);
  padding-inline: var(--space-3);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--duration-fast),
    border-color var(--duration-fast),
    color var(--duration-fast),
    filter var(--duration-fast),
    transform var(--duration-fast);

  &:hover {
    background: var(--color-hover);
    color: var(--color-text);
  }

  &:active {
    transform: translateY(1px);
  }

  &:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  &[data-art="haupt"] {
    background: var(--gradient-brand) border-box;
    box-shadow: var(--shadow-glow);
    color: var(--color-on-accent);

    &:hover {
      filter: brightness(1.12);
    }
  }

  &[data-art="rand"] {
    border-color: var(--color-line-strong);
    background: var(--color-surface);
    color: var(--color-text);

    &:hover {
      border-color: var(--color-accent);
    }
  }

  &[data-art="gefahr"] {
    background: var(--color-danger-soft);
    color: var(--color-danger);

    &:hover {
      filter: saturate(1.3);
    }
  }
}

.knopf-icon {
  width: var(--size-control);
  padding: 0;
}

.knopf-klein {
  height: var(--size-control-sm);
  padding-inline: var(--space-2);
  font-size: var(--text-xs);

  &.knopf-icon {
    width: var(--size-control-sm);
    padding: 0;
  }
}

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.eingabe,
.dash-filter select {
  width: 100%;
  min-width: 0;
  min-height: var(--size-control);
  padding: var(--space-1-5) var(--space-2-5);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast);

  &::placeholder {
    color: var(--color-faint);
  }

  &:focus-visible {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
    outline: none;
  }
}

textarea.eingabe {
  field-sizing: content;
  min-height: 4.5rem;
  resize: vertical;
}

.eingabe-schmal {
  width: auto;
  max-width: 14rem;
}

.suchfeld {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(100%, 22rem);
  min-height: var(--size-control);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-faint);
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast);

  & .eingabe {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    box-shadow: none;
    outline: none;
  }

  &:focus-within {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
  }
}

.suchfeld-breit {
  width: min(100%, 28rem);
}

.feld {
  display: grid;
  gap: var(--space-1-5);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;

  & > label,
  & > legend {
    padding: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }
}

.hilfe {
  color: var(--color-faint);
  font-size: var(--text-xs);
}

.haken {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

input[type="checkbox"] {
  display: inline-grid;
  flex: none;
  place-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  appearance: none;
  transition:
    background var(--duration-fast),
    border-color var(--duration-fast);

  &::before {
    width: 0.625rem;
    height: 0.625rem;
    background: var(--color-on-accent);
    clip-path: polygon(12% 48%, 0 62%, 40% 100%, 100% 18%, 86% 6%, 38% 72%);
    content: "";
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-spring);
  }

  &:checked {
    border-color: transparent;
    background: var(--gradient-brand) border-box;

    &::before {
      transform: scale(1);
    }
  }
}

.chips-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.chip-wahl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2-5);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  cursor: pointer;

  &:has(:checked) {
    border-color: transparent;
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }

  & input {
    width: 0.875rem;
    height: 0.875rem;
  }
}

.segmente,
.reiter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-0-5);
  padding: var(--space-0-5);
  border-radius: var(--radius-lg);
  background: var(--color-hover);
}

.segment,
.reiter-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: calc(var(--size-control) - var(--space-1));
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition:
    background var(--duration-fast),
    color var(--duration-fast);

  &:hover {
    color: var(--color-text);
  }

  &[aria-pressed="true"],
  &[aria-current="page"] {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
  }
}

.reiter {
  justify-self: start;
}

.reiter-knopf {
  min-height: var(--size-control);
  padding-inline: var(--space-4);
  text-decoration: none;
}

/* Zustand und Hinweis nebeneinander, auf schmalen Schirmen untereinander. */
.zelle-marken {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.zaehler {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.25rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--zustand-weich, var(--color-hover));
  color: var(--zustand, var(--color-muted));
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

a.zaehler {
  text-decoration: none;
  transition: filter var(--duration-fast);

  &:hover {
    filter: brightness(0.92);
  }
}

.zaehler .icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-0-5) var(--space-2-5);
  border-radius: var(--radius-full);
  background: var(--zustand-weich, var(--color-hover));
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--size-avatar);
  height: var(--size-avatar);
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    oklch(var(--avatar-lightness) var(--avatar-chroma) var(--farbton, 270)),
    oklch(
      var(--avatar-lightness) var(--avatar-chroma)
        calc(var(--farbton, 270) + var(--avatar-hue-shift))
    )
  );
  color: var(--color-on-accent);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.avatar-klein {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
}

.avatar-gross {
  width: var(--size-avatar-lg);
  height: var(--size-avatar-lg);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  box-shadow: var(--shadow-md);
}

/* Das Logo aus den Grunddaten statt der Initialen. */
.avatar-logo {
  padding: var(--space-0-5);
  border: var(--border-width) solid var(--color-line);
  background: var(--color-logo-flaeche);

  & img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.avatar-leer {
  background: var(--color-hover);
  color: var(--color-muted);
}

/* Inhalte -------------------------------------------------------------------- */

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.seitenkopf-text {
  display: grid;
  flex: 1;
  gap: var(--space-1);
  min-width: min(100%, 18rem);
}

.seitenkopf-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.held {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);

  & h1 {
    max-width: 40rem;
    font-size: var(--text-3xl);
  }
}

.live-hinweis {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.abschnitt {
  display: grid;
  gap: var(--space-3);
}

.abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.abschnitt-titel {
  font-size: var(--text-lg);
}

.karte {
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
}

/* Anfragen und Guthaben eines Workspace auf seiner Kachel, vor den Marken der Agents. */
.kachel-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);

  & .leise {
    font-weight: var(--font-weight-normal, 400);
  }
}

/* Zahlen in benannten Gruppen, etwa Geld und Werbung bei den Anzeigen. */
.kennzahl-gruppen {
  display: grid;
  gap: var(--space-5);
}

.kennzahl-gruppe {
  display: grid;
  gap: var(--space-2);

  & .gruppe-titel {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }
}

/* Sechs Zahlen mit langen Titeln, etwa die der Anzeigen: zwei Reihen zu drei, auf schmalen Schirmen wie gewohnt. */
.kennzahlen[data-spalten="3"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));

  @media (width >= 75rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

a.kennzahl {
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast);

  &:hover {
    border-color: var(--color-accent);
  }
}

.kennzahl {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.kennzahl-icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: var(--size-avatar-lg);
  height: var(--size-avatar-lg);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.kennzahl-wert {
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.kennzahl-titel {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.aufgaben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}

.aufgabe {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  animation: einblenden var(--duration-medium) var(--ease-out) backwards;

  & > :is(.fortschritt, .aufgabe-liste, .knopf) {
    grid-column: 1 / -1;
  }

  & > .knopf {
    justify-self: start;
  }

  &[data-erledigt="ja"] {
    background:
      linear-gradient(var(--color-success-soft), var(--color-success-soft)),
      var(--color-surface);
  }
}

.aufgabe:nth-child(2) {
  animation-delay: 60ms;
}

.aufgabe:nth-child(3) {
  animation-delay: 120ms;
}

.aufgabe:nth-child(4) {
  animation-delay: 180ms;
}

.aufgabe-icon {
  display: grid;
  place-items: center;
  width: var(--size-avatar);
  height: var(--size-avatar);
  border-radius: var(--radius-md);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-glow);
  color: var(--color-on-accent);

  [data-erledigt="ja"] > & {
    background: var(--color-success);
    box-shadow: none;
  }
}

.aufgabe-text {
  display: grid;
  gap: var(--space-0-5);
  font-size: var(--text-sm);
}

.aufgabe-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);

  /* Titel aus der Bibliothek können lang sein. */
  & .knopf {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  & .knopf span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.fortschritt {
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-hover);

  & span {
    display: block;
    width: var(--anteil);
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-progress);
    transition: width var(--duration-medium) var(--ease-out);
  }
}

.fortschritt-ring {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.ring {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background:
    radial-gradient(
      closest-side,
      var(--color-surface) 76%,
      transparent 78% 100%
    ),
    conic-gradient(var(--color-success) var(--anteil, 0%), var(--color-hover) 0);
  transition: background var(--duration-medium);
}

.ring-wert {
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-bold);
}

.ring-text {
  display: grid;
  font-size: var(--text-sm);

  & .leise {
    font-size: var(--text-xs);
  }
}

.ws-gruppen {
  display: grid;
  gap: var(--space-6);
}

.ws-gruppe {
  display: grid;
  gap: var(--space-3);
}

.gruppe-titel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-3);
}

.kachel {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast),
    transform var(--duration-fast) var(--ease-out);

  &:hover,
  &:focus-within {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.kachel-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.kachel-name {
  min-width: 0;

  & p {
    overflow: hidden;
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.kachel-link {
  color: var(--color-text);
  text-decoration: none;

  &::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
  }
}

.kachel-sites {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
}

/* Ein Agent der Website: Klick öffnet seinen Chat. Liegt über dem Link, der die ganze Kachel klickbar macht. */
.site-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-0-5) var(--space-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-full);
  background: var(--color-hover);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast);

  & .icon {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    color: var(--color-faint);
  }

  &:hover {
    border-color: var(--color-accent);

    & .icon {
      color: var(--color-accent);
    }
  }

  &:focus-visible {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
    outline: none;
  }
}

.kachel-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Über dem Link, der die ganze Kachel klickbar macht. */
.kachel-zaehler {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.kachel-aktionen {
  position: relative;
  display: flex;
  gap: var(--space-0-5);
  margin-left: auto;
}

.website,
.websites {
  display: grid;
  gap: var(--space-4);
}

.website-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.website-icon {
  display: grid;
  place-items: center;
  width: var(--size-avatar-lg);
  height: var(--size-avatar-lg);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.website-name {
  min-width: 0;
}

.website-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

/* Stand einer Website gegenüber live, mit dem Knopf zum Veröffentlichen. */
.freigabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--zustand-weich);

  & > .knopf {
    margin-left: auto;
  }
}

.freigabe-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--size-avatar);
  height: var(--size-avatar);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--zustand);

  [data-art="arbeitet"] > & .icon {
    animation: pulsieren var(--duration-slow) var(--ease-out) infinite;
  }
}

.freigabe-text {
  display: grid;
  flex: 1 1 16rem;
  gap: var(--space-0-5);
  min-width: 0;
  font-size: var(--text-sm);

  & p {
    overflow-wrap: anywhere;
  }
}

.freigabe-titel {
  font-weight: var(--font-weight-bold);
}

.freigabe-fehler {
  color: var(--color-danger);
}

.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.werkzeug-abstand {
  flex: 1;
}

.tabelle {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

td {
  overflow-wrap: break-word;
}

th {
  border-top: 0;
  color: var(--color-faint);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

tbody tr {
  transition: background var(--duration-fast);
}

tbody tr:hover {
  background: var(--color-hover);
}

td a {
  text-decoration-color: var(--color-accent-soft);

  &:hover {
    text-decoration-color: currentcolor;
  }
}

.pfad {
  white-space: nowrap;
}

th.zahl,
td.zahl {
  padding-right: var(--space-5);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.leer {
  display: grid;
  justify-items: center;
  gap: var(--space-1-5);
  padding: var(--space-8) var(--space-4);
  color: var(--color-muted);
  text-align: center;
}

.leer-icon {
  display: grid;
  place-items: center;
  width: var(--size-avatar-lg);
  height: var(--size-avatar-lg);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.leer-titel {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.mitte-text {
  text-align: center;
}

.hinweis {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  font-size: var(--text-sm);

  & .icon {
    flex: none;
    margin-top: 0.15em;
    color: var(--color-accent);
  }

  /* Lange Werte wie die UTM zum Wiedereintragen brechen um, statt die Seite am Handy zu verbreitern. */
  & code {
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
  }

  /* Mit Zustand, etwa gut oder warnung, in dessen Farben. */
  &[data-art] {
    background: var(--zustand-weich);

    & .icon {
      color: var(--zustand);
    }
  }
}

/* Grunddaten: Öffnungszeiten, Logo und Farben. */
.zeiten {
  display: grid;
  gap: var(--space-2);
}

.zeiten-zeile {
  display: grid;
  grid-template-columns: 4rem minmax(0, 8rem) auto minmax(0, 8rem);
  gap: var(--space-2);
  align-items: center;
}

.logo-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.logo-vorschau {
  max-width: 12rem;
  height: var(--space-12);
  object-fit: contain;
  padding: var(--space-1);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.farbe-zeile {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.farbwahl {
  flex: none;
  width: var(--size-control);
  height: var(--size-control);
  padding: var(--space-0-5);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.skelett {
  min-height: 7rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    90deg,
    var(--color-hover) 30%,
    var(--color-selected) 50%,
    var(--color-hover) 70%
  );
  background-size: 200% 100%;
  animation: schimmern var(--duration-slow) linear infinite;
}

.liste-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

/* Bibliothek ----------------------------------------------------------------- */

.ablage {
  display: grid;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
  transition: outline-color var(--duration-fast);

  &[data-ziel] {
    outline: 2px dashed var(--color-accent);
    outline-offset: var(--space-2);
  }
}

.hochladen-stand {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  font-size: var(--text-sm);
}

.eintraege {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;

  &[data-typ="foto"] {
    grid-template-columns: repeat(auto-fill, minmax(var(--size-thumb), 1fr));
    gap: var(--space-3);
  }
}

.leer-zeile {
  grid-column: 1 / -1;
}

.foto-kachel {
  width: 100%;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast),
    transform var(--duration-fast) var(--ease-out);

  &:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

/* Fakten als Tabelle: viele auf einen Blick, Details in der Schublade. */
.tabelle-rahmen {
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.fakten-tabelle {
  & :is(th, td) {
    padding: var(--space-1-5) var(--space-3);
    vertical-align: middle;
  }

  /* Deckend, sonst schiene die stehende Titelspalte beim Scrollen durch. */
  & thead th,
  & tbody tr:hover .zelle-titel {
    background:
      linear-gradient(var(--color-hover), var(--color-hover)),
      var(--color-surface);
  }

  & thead th {
    border-top: 0;
  }

  & tbody tr:first-child td {
    border-top: 0;
  }

  /* Der Titel bleibt beim seitlichen Scrollen stehen, wie in der Wissensplattform. */
  & .zelle-titel {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 14rem;
    max-width: 22rem;
    padding: 0;
    background: var(--color-surface);
  }

  & thead .zelle-titel {
    padding-inline: var(--space-3);
    background:
      linear-gradient(var(--color-hover), var(--color-hover)),
      var(--color-surface);
  }
}

.sortieren {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;

  &:hover {
    color: var(--color-text);
  }
}

.sortier-pfeil .icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);

  [aria-sort="ascending"] & {
    rotate: 180deg;
  }
}

.eintrag-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--size-row);
  padding-inline: var(--space-3);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.zeile-oeffnen {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-1-5);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-xs);
  opacity: 0;
  transition: opacity var(--duration-fast);

  & .icon {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }

  tr:hover &,
  .eintrag-zeile:focus-visible & {
    opacity: 1;
  }

  @media (hover: none) {
    opacity: 1;
  }
}

.zelle-wahl {
  min-width: 10rem;
  height: var(--size-control-sm);
  padding-inline: var(--space-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;

  &:hover,
  &:focus-visible {
    border-color: var(--color-line-strong);
    background: var(--color-surface);
  }
}

.zelle-inhalt {
  min-width: 18rem;

  & span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

.zelle-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 11rem;
}

.zelle-datum {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.eintrag-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.eintrag-titel {
  overflow: hidden;
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eintrag-marken {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.foto-kachel {
  display: grid;
  gap: var(--space-2);
  overflow: hidden;
  padding: 0 0 var(--space-3);

  & .eintrag-text,
  & .eintrag-marken {
    padding-inline: var(--space-3);
    justify-content: flex-start;
  }
}

.foto-bild {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-hover);
  color: var(--color-faint);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-medium) var(--ease-out);
  }
}

.foto-kachel:hover .foto-bild img {
  transform: scale(1.04);
}

/* Mehrfachauswahl: Haken oben links auf der Kachel, die Leiste klebt unten. */
.foto-platz {
  position: relative;

  &[data-gewaehlt="true"] .foto-kachel {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
  }
}

.foto-wahl {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: grid;
  place-items: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;

  & input {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    margin: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
  }
}

.eintrag-verweise {
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
}

.auswahl-leiste {
  position: sticky;
  bottom: var(--space-3);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);

  &[hidden] {
    display: none;
  }
}

.auswahl-zahl {
  margin-right: var(--space-2);
}

.schublade {
  width: min(var(--size-drawer), 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  overflow-y: auto;
  border: 0;
  border-left: var(--border-width) solid var(--color-line);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  color: var(--color-text);

  &[open] {
    animation: hereinschieben var(--duration-medium) var(--ease-out);
  }

  &::backdrop {
    background: var(--color-overlay);
    backdrop-filter: blur(2px);
  }
}

@keyframes hereinschieben {
  from {
    transform: translateX(var(--space-8));
    opacity: 0;
  }
}

.schublade-kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-line);
  background: var(--color-raised);
  backdrop-filter: blur(var(--glass-blur));

  & > div {
    flex: 1;
    min-width: 0;
  }

  & h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.schublade-icon {
  display: grid;
  place-items: center;
  width: var(--size-avatar);
  height: var(--size-avatar);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.schublade-inhalt {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.schublade-bild {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.eintrag-formular {
  display: grid;
  gap: var(--space-4);
}

.eintrag-felder {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Verweise auf andere Einträge: gewählte als Chips, darunter die Auswahl zum Hinzufügen. */
.verweis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin: 0;
  padding: 0;
  list-style: none;

  &:empty {
    display: none;
  }
}

.verweis-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-0-5) var(--space-0-5) var(--space-2-5);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--text-sm);
}

.verweis-weg {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: inherit;
  cursor: pointer;

  &:hover {
    background: var(--color-hover);
  }

  & .icon {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }
}

.verknuepft {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-line);

  & h3 {
    font-size: var(--text-sm);
  }

  & ul {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
  }
}

.verknuepft-gruppe {
  display: grid;
  gap: var(--space-1);
}

.verknuepft .verknuepft-bilder {
  grid-template-columns: repeat(auto-fill, minmax(var(--size-avatar-lg), 1fr));
  gap: var(--space-2);

  & a {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-hover);
  }

  & img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
}

/* Anfragen und Tracking -------------------------------------------------------- */

.anfragen {
  display: grid;
  gap: var(--space-2);
}

.anfrage {
  padding: 0;

  & summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: inherit;
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &:hover {
      background: var(--color-hover);
    }

    & > .icon {
      margin-left: auto;
      color: var(--color-faint);
      transition: transform var(--duration-fast);
    }
  }

  &[open] summary > .icon {
    transform: rotate(180deg);
  }

  & > .fakten,
  & > .knoepfe,
  & > .hinweis,
  & > form {
    margin: 0 var(--space-4) var(--space-4);
  }
}

.anfrage-name {
  display: grid;
  min-width: 0;

  & .leise {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }
}

.fakten {
  display: grid;
  gap: var(--space-1-5);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-hover);
  font-size: var(--text-sm);

  & > div {
    display: grid;
    grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr);
    column-gap: var(--space-4);
  }

  & dt {
    color: var(--color-muted);
  }

  & dd {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }
}

/* Formulare aus Karten: Tracking und Grunddaten. */
.formular-seite {
  display: grid;
  gap: var(--space-4);
}

.formular-karten {
  display: grid;
  gap: var(--space-4);
}

.formular-karte {
  display: grid;
  gap: var(--space-4);
  margin: 0;

  & legend {
    float: left;
    width: 100%;
    font-weight: var(--font-weight-bold);
  }
}

/* Suche ------------------------------------------------------------------------ */

.palette {
  width: min(var(--size-palette), calc(100vw - var(--space-6)));
  max-height: 70dvh;
  margin: 12dvh auto auto;
  padding: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-xl);
  background: var(--color-raised);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-xl);
  color: var(--color-text);

  &[open] {
    display: flex;
    flex-direction: column;
    animation: auftauchen var(--duration-medium) var(--ease-spring);
  }

  &::backdrop {
    background: var(--color-overlay);
    backdrop-filter: blur(3px);
  }
}

.palette-feld {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-line);
  color: var(--color-faint);

  & input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-lg);
    outline: none;
  }
}

#palette-liste {
  display: grid;
  gap: var(--space-0-5);
  margin: 0;
  padding: var(--space-2);
  overflow-y: auto;
  list-style: none;
}

.palette-treffer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;

  &[aria-selected="true"] {
    background: var(--color-selected);
  }
}

.palette-icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-muted);
}

.palette-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.palette-titel,
.palette-unter {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-unter {
  color: var(--color-faint);
  font-size: var(--text-xs);
}

.palette-leer {
  padding: var(--space-6);
  color: var(--color-muted);
  text-align: center;
}

.palette-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-width) solid var(--color-line);
  color: var(--color-faint);
  font-size: var(--text-xs);

  & kbd + kbd {
    margin-left: var(--space-0-5);
  }
}

/* Meldungen ---------------------------------------------------------------------- */

/* Oben, nicht unten: Unten stehen die Knöpfe eines Formulars, eine Meldung „Gespeichert.“ lag sonst über „Speichern“. */
.meldungen {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  z-index: 40;
  display: grid;
  gap: var(--space-2);
  width: min(28rem, calc(100vw - var(--space-8)));
  transform: translateX(-50%);
  pointer-events: none;
}

.meldung {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: var(--color-raised);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  pointer-events: auto;
  animation: auftauchen var(--duration-medium) var(--ease-spring);

  & > .icon {
    margin-top: 0.15em;
    color: var(--zustand);
  }

  & p {
    flex: 1;
  }
}

.meldung-zu {
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  padding: 0;
}

.konfetti {
  position: fixed;
  top: 30%;
  left: 50%;
  z-index: 50;
  pointer-events: none;

  & span {
    position: absolute;
    width: 0.5rem;
    height: 0.75rem;
    border-radius: var(--radius-sm);
    animation: konfetti 1.6s var(--ease-out) forwards;
  }
}

.konfetti-0 {
  background: var(--color-accent);
}

.konfetti-1 {
  background: var(--color-thinking);
}

.konfetti-2 {
  background: var(--color-success);
}

.konfetti-3 {
  background: var(--color-warning);
}

@keyframes konfetti {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--x) * 40vw), calc(var(--hoch) * 50vh))
      rotate(var(--dreh));
  }
}

/* Chat --------------------------------------------------------------------------- */

.chat-ebene {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.chat-dock {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.chat-starter,
.chat-blase,
.chatfenster {
  pointer-events: auto;
}

.chat-starter {
  display: grid;
  place-items: center;
  width: var(--size-bubble);
  height: var(--size-bubble);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
  color: var(--color-on-accent);
  cursor: pointer;
  transition: transform var(--duration-medium) var(--ease-spring);

  & .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  &:hover {
    transform: scale(1.08) rotate(-8deg);
  }
}

.chat-blase {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size-bubble);
  height: var(--size-bubble);
  padding: 0;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: linear-gradient(
    135deg,
    oklch(var(--avatar-lightness) var(--avatar-chroma) var(--farbton, 270)),
    oklch(
      var(--avatar-lightness) var(--avatar-chroma)
        calc(var(--farbton, 270) + var(--avatar-hue-shift))
    )
  );
  box-shadow: var(--shadow-lg);
  color: var(--color-on-accent);
  font-weight: var(--font-weight-bold);
  cursor: grab;
  touch-action: none;
  animation: auftauchen var(--duration-medium) var(--ease-spring);
  transition: transform var(--duration-fast) var(--ease-spring);

  &:hover {
    transform: scale(1.06);
  }

  &[data-frei] {
    position: fixed;
    top: var(--y);
    left: var(--x);
  }

  &[data-zieht] {
    cursor: grabbing;
    transform: scale(1.1);
    transition: none;
  }

  &::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-full);
    background: var(--zustand);
    content: "";
  }
}

.blase-ring {
  position: absolute;
  inset: -6px;
  border: 3px solid transparent;
  border-radius: var(--radius-full);
}

:is([data-art="denkt"], [data-art="schreibt"], [data-art="werkzeug"])
  > .blase-ring {
  border-top-color: var(--zustand);
  border-right-color: var(--zustand);
  animation: drehen 1s linear infinite;
}

.blase-zaehler {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-on-accent);
  font-size: var(--text-2xs);
  animation: auftauchen var(--duration-medium) var(--ease-spring);
}

.chatfenster {
  position: absolute;
  top: var(--y, auto);
  left: var(--x, auto);
  z-index: var(--ebene, 20);
  display: flex;
  flex-direction: column;
  width: var(--size-chat-width);
  height: min(var(--size-chat-height), calc(100dvh - var(--space-12)));
  min-width: 20rem;
  max-width: calc(100vw - var(--space-4));
  min-height: 22rem;
  max-height: calc(100dvh - var(--space-4));
  overflow: hidden;
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-xl);
  background: var(--color-raised);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-xl);
  resize: both;
  animation: auftauchen var(--duration-medium) var(--ease-spring);

  &[data-zieht] {
    box-shadow: var(--shadow-xl), var(--shadow-glow);
    user-select: none;
  }

  &[data-gross] {
    inset: var(--space-4)
      calc(var(--space-6) + var(--size-bubble) + var(--space-4)) var(--space-4)
      calc(var(--size-sidebar) + var(--space-4));
    width: auto;
    height: auto;
    resize: none;

    & .verlauf {
      padding-inline: max(
        var(--space-4),
        calc((100% - var(--size-narrow)) / 2)
      );
    }

    & .chat-eingabe,
    & .chat-status {
      margin-inline: max(var(--space-3), calc((100% - var(--size-narrow)) / 2));
    }
  }
}

.chat-kopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-line);
  cursor: grab;
  touch-action: none;
  user-select: none;

  [data-zieht] > & {
    cursor: grabbing;
  }

  & h2 {
    overflow: hidden;
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.chat-titel {
  display: grid;
  flex: 1;
  min-width: 0;
}

/* Die Zeile unter dem Kopf: welches Modell antwortet, die Vorschau. */
.chat-leiste {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2) var(--space-1-5) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-line);
}

.chat-modell {
  flex: 1;
  min-width: 0;
  height: var(--size-control-sm);
  padding-inline: var(--space-2);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast);

  &:hover {
    border-color: var(--color-accent);
  }

  &:focus-visible {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
    outline: none;
  }
}

.chat-unter {
  overflow: hidden;
  color: var(--color-faint);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Was Veröffentlichen live bringt, mit dem Knopf daneben. */
.chat-freigabe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2) var(--space-1-5) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-line);
  background: var(--color-warning-soft);
  font-size: var(--text-xs);

  & > .icon {
    color: var(--color-working);
  }
}

.chat-freigabe-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.chat-aktionen {
  display: flex;
  gap: 0;

  & .knopf-icon {
    width: var(--size-control-sm);
    height: var(--size-control-sm);
  }
}

.agent-avatar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--size-avatar);
  height: var(--size-avatar);
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: var(--color-on-accent);

  &::after {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-full);
    background: var(--zustand, var(--color-success));
    content: "";
  }

  &:is([data-art="denkt"], [data-art="schreibt"], [data-art="werkzeug"]) {
    animation: leuchten var(--duration-slow) ease-in-out infinite;
  }
}

@keyframes leuchten {
  50% {
    box-shadow: var(--shadow-glow);
    transform: scale(1.06);
  }
}

.agent-avatar-klein {
  width: 1.625rem;
  height: 1.625rem;

  & .icon {
    width: var(--size-icon-sm);
  }

  &::after {
    display: none;
  }
}

.agent-avatar-gross {
  width: 3.5rem;
  height: 3.5rem;
  box-shadow: var(--shadow-glow);

  & .icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  &::after {
    display: none;
  }
}

.chat-meldung {
  padding: var(--space-1-5) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;

  &[data-art="fehler"] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  &:empty {
    display: none;
  }
}

.verlauf-rahmen {
  position: relative;
  flex: 1;
  min-height: 0;
}

.verlauf {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  overflow-y: auto;
  padding: var(--space-4);
}

.chat-runter {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  animation: auftauchen var(--duration-medium) var(--ease-spring);
}

.nachricht {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  animation: einblenden var(--duration-medium) var(--ease-out);

  &[data-von="nutzer"] {
    justify-content: flex-end;
  }

  &[data-ruhig] {
    animation: none;
  }
}

/* OpenCode schickt eine Antwort oft als mehrere Nachrichten. Sie stehen als Gruppe: ein Name oben, ein Bild unten. */
.nachricht[data-von="agent"] + .nachricht[data-von="agent"] {
  margin-top: calc(var(--space-3) * -1);

  & .absender {
    display: none;
  }
}

.nachricht[data-von="agent"]:has(+ .nachricht[data-von="agent"])
  > .agent-avatar {
  visibility: hidden;
}

.sprechblase {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  max-width: min(88%, 46rem);
  padding: var(--space-2-5) var(--space-3);
  overflow-wrap: anywhere;

  [data-von="agent"] > & {
    border: var(--border-width) solid var(--color-line);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg)
      var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  [data-von="nutzer"] > & {
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm)
      var(--radius-lg);
    background: var(--gradient-brand);
    box-shadow: var(--shadow-glow);
    color: var(--color-on-accent);
  }
}

.absender {
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  color: var(--color-faint);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-medium);

  [data-von="nutzer"] & {
    color: inherit;
    opacity: 0.8;
  }
}

.text {
  white-space: pre-wrap;
}

.nachricht-fehler {
  display: flex;
  gap: var(--space-1-5);
  align-items: center;
  color: var(--color-danger);
  font-size: var(--text-sm);
}

/* Markdown in Antworten */
.md {
  display: grid;
  gap: var(--space-2);
  line-height: 1.6;

  & ul,
  & ol {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding-left: var(--space-5);
  }

  & li > :is(ul, ol, p) {
    margin-top: var(--space-1);
  }

  & code {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    background: var(--color-hover);
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  & a {
    font-weight: var(--font-weight-medium);
  }

  & blockquote {
    margin: 0;
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-accent);
    color: var(--color-muted);
  }

  & hr {
    width: 100%;
    margin: var(--space-1) 0;
    border: 0;
    border-top: var(--border-width) solid var(--color-line-strong);
  }

  & table {
    font-size: var(--text-xs);
  }

  & th,
  & td {
    padding: var(--space-1) var(--space-2);
    border: var(--border-width) solid var(--color-line);
  }
}

.md-titel {
  font-weight: var(--font-weight-bold);
}

.md-titel-1 {
  font-size: var(--text-lg);
}

.md-titel-2 {
  font-size: var(--text-base);
}

.md-mitte {
  text-align: center !important;
}

.md-rechts {
  text-align: right !important;
}

.md-aufgabe {
  color: var(--color-accent);
}

.md-tabelle {
  max-width: 100%;
  overflow-x: auto;
}

.md-code {
  position: relative;

  & pre {
    margin: 0;
    padding: var(--space-3);
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: var(--color-sidebar);
    font-size: var(--text-xs);
    line-height: 1.55;

    & code {
      padding: 0;
      background: none;
    }
  }
}

.md-kopieren {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  opacity: 0;

  .md-code:hover &,
  &:focus-visible {
    opacity: 1;
  }
}

.schritte,
.gedanke {
  border-radius: var(--radius-md);
  background: var(--color-hover);
  font-size: var(--text-xs);

  & summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-2);
    color: var(--color-muted);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }
}

.schritt-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);

  & .icon {
    width: 0.75rem;
  }

  [data-laeuft] & {
    color: var(--color-working);
    animation: leuchten var(--duration-slow) ease-in-out infinite;
  }
}

.schritt-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schritte ol {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0 var(--space-2) var(--space-2) var(--space-2);
  list-style: none;

  & li {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    color: var(--color-muted);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;

    & .icon {
      width: 0.75rem;
    }

    &[data-status="error"] {
      color: var(--color-danger);
    }

    &:is([data-status="running"], [data-status="pending"]) {
      color: var(--color-working);
    }
  }
}

.gedanke {
  & summary .icon {
    width: 0.75rem;
    color: var(--color-thinking);
  }

  & .md {
    padding: 0 var(--space-3) var(--space-2);
    color: var(--color-muted);
    font-style: italic;
  }
}

.chat-willkommen {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin: auto 0;
  padding: var(--space-4) var(--space-2);
  text-align: center;
}

.chat-willkommen-titel {
  max-width: 20rem;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

.vorschlaege {
  display: grid;
  gap: var(--space-1-5);
  width: 100%;
  margin-top: var(--space-2);
}

.vorschlag {
  justify-content: flex-start;
  height: auto;
  min-height: var(--size-control);
  padding-block: var(--space-1-5);
  white-space: normal;
  text-align: left;
}

.chat-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  color: var(--zustand);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.chat-status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tipp-punkte {
  display: none;
  gap: 3px;

  [data-art="denkt"] > &,
  [data-art="schreibt"] > &,
  [data-art="werkzeug"] > & {
    display: inline-flex;
  }

  & span {
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background: currentcolor;
    animation: huepfen 1.1s ease-in-out infinite;
  }

  & span:nth-child(2) {
    animation-delay: 0.15s;
  }

  & span:nth-child(3) {
    animation-delay: 0.3s;
  }
}

@keyframes huepfen {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.chat-eingabe {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin: 0 var(--space-3) var(--space-3);
  padding: var(--space-1-5) var(--space-1-5) var(--space-1-5) var(--space-3);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast);

  &:focus-within {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
  }
}

.chat-feld {
  flex: 1;
  min-width: 0;
  min-height: var(--size-control-sm);
  max-height: 10rem;
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
  font-size: var(--text-sm);
  field-sizing: content;
  outline: none;
  resize: none;
}

.chat-senden {
  width: var(--size-control);
  border-radius: var(--radius-full);
}

/* Dashboard ---------------------------------------------------------------------- */

.dash {
  display: grid;
  gap: var(--space-6);
}

.dash-filter {
  position: sticky;
  top: calc(var(--space-6) * -1);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-raised);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-sm);

  & > .icon {
    color: var(--color-faint);
  }

  & select {
    width: auto;
    max-width: 14rem;
  }
}

.dash-raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
}

.dash-raster > .dash-karte {
  grid-column: span var(--breite);
  min-width: 0;
  margin: 0;
  transition: opacity var(--duration-medium);
}

.dash-karte {
  display: grid;
  gap: var(--space-2);
  align-content: start;

  & h3 {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  &[data-typ="zahl"] {
    background: var(--backdrop), var(--color-surface);
  }
}

.dash-rechnet {
  opacity: 0.6;
}

.dash-zahl {
  font-size: var(--text-3xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

.dash-hinweis {
  font-size: var(--text-xs);
}

.dash-hinweis:empty {
  display: none;
}

.dash-wert {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-soft);
  text-underline-offset: 0.2em;
  cursor: pointer;

  &:hover {
    text-decoration-color: currentcolor;
  }
}

.dash-balken {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;

  & li {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    gap: var(--space-3);
    align-items: center;
  }
}

.dash-titel {
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}

.dash-spur {
  display: block;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-series-track);
}

.dash-fuellung {
  display: block;
  width: var(--anteil);
  min-width: 2px;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-series-0);
}

.dash-flaeche {
  position: relative;
}

.dash-linie {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;

  & text {
    fill: var(--color-muted);
    font-size: 12px;
  }
}

.dash-raster-linie {
  stroke: var(--color-line);
  stroke-width: 1;
}

.dash-kreuz {
  stroke: var(--color-faint);
  stroke-width: 1;
}

.dash-reihe {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-reihe-0 {
  stroke: var(--color-series-0);
}

.dash-reihe-1 {
  stroke: var(--color-series-1);
}

.dash-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-sm);

  & span {
    padding-left: var(--space-5);
    background: linear-gradient(var(--color-series-0), var(--color-series-0))
      left center / 0.875rem 2px no-repeat;
  }

  & .dash-schluessel-1 {
    background-image: linear-gradient(
      var(--color-series-1),
      var(--color-series-1)
    );
  }
}

.dash-tipp {
  position: absolute;
  top: 0;
  left: var(--links);
  display: grid;
  gap: var(--space-0-5);
  padding: var(--space-1-5) var(--space-2);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-raised);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.dash-matrix {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: var(--text-xs);

  & th,
  & td {
    padding: 0;
    border: 0;
    color: var(--color-muted);
    font-weight: var(--font-weight-normal);
    text-align: left;
  }

  & tr > :first-child {
    width: 1.75rem;
  }

  & tbody tr:hover {
    background: none;
  }

  & .dash-zelle {
    height: 1rem;
    border-radius: var(--radius-xs);
    background: color-mix(
      in oklch,
      var(--color-series-0) var(--anteil),
      var(--color-series-track)
    );
  }
}

/* Anmeldung ------------------------------------------------------------------------ */

.anmelde-seite {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--space-6);
  background: var(--backdrop-strong), var(--color-sidebar);
}

.anmeldung {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 24rem;
  padding: var(--space-8);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-raised);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-lg);
  animation: auftauchen var(--duration-medium) var(--ease-spring);

  & .logo {
    padding: 0;
  }

  & .knopf {
    width: 100%;
  }
}

.fehler {
  min-height: 1.25rem;
  color: var(--color-danger);
  font-size: var(--text-sm);
}

/* Kleine Bildschirme ---------------------------------------------------------------- */

@media (width < 60rem) {
  .chatfenster[data-gross] {
    inset: var(--space-2);
  }
}

@media (width < 48rem) {
  .rahmen {
    display: block;
    height: auto;
  }

  .seitenleiste {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-2);
    background: var(--color-sidebar);
    scrollbar-width: none;
  }

  .nav-gruppe,
  .nav-fuss {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-1);
    margin-top: 0;
  }

  #nav-zuletzt,
  .nav-titel,
  .logo-name,
  .suchknopf span,
  .suchknopf kbd,
  .nutzer-mail,
  .abgleich,
  .wechsler-unter,
  .wechsler > .icon {
    display: none;
  }

  .suchknopf {
    flex: none;
    width: var(--size-control);
    padding: 0;
    justify-content: center;
  }

  .kennzahl {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .kennzahl-icon {
    grid-row: auto;
  }

  .wechsler {
    width: auto;
    max-width: 11rem;
    padding: var(--space-1);
  }

  .nav-punkt {
    flex: none;
    white-space: nowrap;
  }

  .nutzer {
    padding: var(--space-1);
  }

  .buehne {
    display: block;
    margin: 0;
    overflow: visible;
    border-width: var(--border-width) 0 0;
    border-radius: 0;
  }

  .kopfleiste {
    min-height: 2.75rem;
    padding-inline: var(--space-4);
  }

  .inhalt {
    overflow: visible;
    padding: var(--space-4) var(--space-4)
      calc(var(--size-bubble) + var(--space-8));
  }

  .held h1 {
    font-size: var(--text-2xl);
  }

  .dash-raster > .dash-karte {
    grid-column: 1 / -1;
  }

  .dash-filter {
    position: static;
  }

  .chat-dock {
    right: var(--space-4);
    bottom: var(--space-4);
  }

  /* Auf dem Handy füllt ein offener Chat den Bildschirm. Lage und Größe gelten erst wieder am großen Bildschirm. */
  .chatfenster,
  .chatfenster[data-gross] {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    border-radius: 0;
    resize: none;
  }

  .chat-kopf {
    cursor: default;
  }

  .fakten > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation: none !important;
    transition: none !important;
  }
}