/* ==========================================================================
   Bausteine: Schaltflaechen, Karten, Tabellen, Marken, Dialoge, Reiter
   ========================================================================== */

/* -------------------------------------------------------------- Schaltflächen */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding: 0 var(--sp-4);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--dauer) var(--ease),
              border-color var(--dauer) var(--ease),
              color var(--dauer) var(--ease),
              box-shadow var(--dauer) var(--ease),
              transform var(--dauer-feder) var(--ease-feder);
}

.btn:hover:not(:disabled) { background: var(--c-surface-2); border-color: var(--c-muted); }

/* Der Druckpunkt.
   Entscheidend ist "transition-duration: 0s": Das Nachgeben passiert
   SOFORT, nur das Zurueckfedern wird animiert. Andersherum - beide Wege
   animiert - fuehlt sich jeder Klick um 100 ms verzoegert an, obwohl
   nichts langsamer geworden ist. */
.btn:active:not(:disabled) {
  transform: scale(var(--druck));
  transition-duration: 0s;
}
.btn-klein:active:not(:disabled),
.btn-symbol:active:not(:disabled) { transform: scale(var(--druck-klein)); }

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

.btn svg { flex: none; }

/* Primär: schwarz, wie in Personio */
.btn-haupt {
  color: var(--c-accent-ink);
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.btn-haupt:hover:not(:disabled) {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}

.btn-still {
  background: transparent;
  border-color: transparent;
  color: var(--c-body);
}
.btn-still:hover:not(:disabled) { background: var(--c-surface-2); border-color: transparent; }

.btn-gefahr {
  color: var(--c-err-ink);
  border-color: color-mix(in srgb, var(--c-err-ink) 30%, var(--c-line));
}
.btn-gefahr:hover:not(:disabled) { background: var(--c-err-bg); border-color: var(--c-err-ink); }

.btn-klein { min-height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-md); }
.btn-gross { min-height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-lg); }
.btn-breit { width: 100%; }

.btn-symbol {
  min-height: 34px; width: 34px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--c-muted);
}
.btn-symbol:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-ink); }

.btn-gruppe { display: inline-flex; gap: var(--sp-2); }

/* Ladezustand */
.btn[data-laedt="1"] { color: transparent !important; position: relative; pointer-events: none; }
.btn[data-laedt="1"]::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--c-accent-ink);
  animation: dreh .6s linear infinite;
}
.btn:not(.btn-haupt)[data-laedt="1"]::after { color: var(--c-ink); }

@keyframes dreh { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------- Karten */

.karte {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.karte-kopf {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
.karte-kopf h2, .karte-kopf h3 { font-size: var(--fs-lg); }

.karte-koerper { padding: var(--sp-5); }
.karte-fuss {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.karte-eng .karte-koerper { padding: var(--sp-4); }

/* Kachelraster wie auf der Einstellungsseite */
.kachel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.kachel {
  display: block;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  color: inherit;
  transition: border-color var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.kachel:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-2); text-decoration: none; }
.kachel h3 { margin-bottom: var(--sp-3); font-size: var(--fs-lg); }
.kachel ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.kachel ul a {
  display: block;
  padding: 5px 0;
  font-size: var(--fs-base);
  color: var(--c-link);
}

/* ------------------------------------------------------------------ Tabellen */

.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

table.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

table.tabelle thead th {
  position: sticky; top: 0; z-index: 2;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}

table.tabelle tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
  color: var(--c-body);
}

table.tabelle tbody tr:last-child td { border-bottom: 0; }
table.tabelle tbody tr:hover td { background: var(--c-surface-2); }

table.tabelle tbody tr[data-klickbar] { cursor: pointer; }
/* Eine Tabellenzeile laesst sich nicht skalieren, ohne dass das Raster
   verrutscht - hier gibt stattdessen die Flaeche kurz nach. */
table.tabelle tbody tr[data-klickbar]:active td {
  background: var(--c-surface-3);
  transition-duration: 0s;
}
table.tabelle .spalte-eng { width: 1%; white-space: nowrap; }
table.tabelle td.zahl, table.tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Am Handy engere Zellen. Zusammen mit den ausgeblendeten Spalten
   (.nur-breit) passt die Monatstabelle damit ohne Querwischen auf den
   Schirm - sonst laege ausgerechnet der Saldo ausserhalb. */
@media (max-width: 700px) {
  table.tabelle thead th { padding: var(--sp-2) var(--sp-3); }
  table.tabelle tbody td { padding: var(--sp-3) var(--sp-3); }
  table.tabelle { font-size: var(--fs-sm); }
  /* Die Aktionsspalte ganz rechts braucht nur so viel Platz wie ihr Knopf. */
  table.tabelle .spalte-eng { padding-left: var(--sp-1); padding-right: var(--sp-2); }
  table.tabelle .spalte-eng .btn-symbol { width: 30px; min-height: 30px; }
}

.tabelle-leer {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------- Marken */

.marke {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--r-pill);
  background: var(--c-neutral-bg);
  color: var(--c-neutral-ink);
  white-space: nowrap;
}

.marke-ok    { background: var(--c-ok-bg);    color: var(--c-ok-ink); }
.marke-warn  { background: var(--c-warn-bg);  color: var(--c-warn-ink); }
.marke-fehler{ background: var(--c-err-bg);   color: var(--c-err-ink); }
.marke-info  { background: var(--c-info-bg);  color: var(--c-info-ink); }

.marke-punkt::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* -------------------------------------------------------------------- Avatare */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  color: #4a4139;
  background: var(--c-surface-3);
  overflow: hidden;
  user-select: none;
}
.avatar-xs { width: 20px; height: 20px; font-size: 9px; }
.avatar-sm { width: 24px; height: 24px; font-size: var(--fs-xs); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--fs-lg); }
.avatar-xl { width: 76px; height: 76px; font-size: var(--fs-2xl); }

.person-zeile { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.person-zeile .name { font-weight: 500; color: var(--c-ink); }
.person-zeile .rolle { font-size: var(--fs-sm); color: var(--c-muted); }

/* --------------------------------------------------------------------- Reiter */

.reiter {
  display: flex;
  gap: var(--sp-5);
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }

.reiter a, .reiter button {
  position: relative;
  padding: var(--sp-3) 2px;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-muted);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dauer) var(--ease);
}
.reiter a:hover, .reiter button:hover { color: var(--c-ink); text-decoration: none; }
.reiter a:active, .reiter button:active { opacity: .6; transition-duration: 0s; }

.reiter [aria-selected="true"], .reiter .aktiv { color: var(--c-ink); }
.reiter [aria-selected="true"]::after, .reiter .aktiv::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--c-ink);
  border-radius: 2px 2px 0 0;
}

/* -------------------------------------------------------------------- Dialoge */

dialog.dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  background: var(--c-surface);
  color: var(--c-body);
}
dialog.dialog-breit { width: min(860px, calc(100vw - 32px)); }

/* Aufziehen statt Aufspringen.
   Wie beim Seitenwechsel bewusst NUR transform, keine Deckkraft: Friert die
   Animation ein (nicht dargestellte Registerkarte), stuende der Dialog sonst
   auf unsichtbar - und weil er modal ist, waere die Anwendung blockiert.
   So steht er im schlimmsten Fall 4 % zu klein da. */
dialog.dialog { animation: dialog-ein 200ms var(--ease-feder); }
@keyframes dialog-ein {
  from { transform: scale(.96) translateY(10px); }
  to   { transform: none; }
}

dialog.dialog::backdrop {
  background: var(--c-overlay);
  backdrop-filter: blur(2px);
  /* Hier ist Deckkraft unbedenklich: bleibt sie stehen, fehlt nur die
     Abdunklung - der Dialog selbst ist unabhaengig davon sichtbar. */
  animation: abdunkeln 200ms var(--ease);
}
@keyframes abdunkeln { from { opacity: 0; } to { opacity: 1; } }

/* ---- Am Handy als Blatt von unten ----
   Ein mittiger Kasten zwingt den Daumen quer ueber den Bildschirm. Ein von
   unten einfahrendes Blatt liegt dort, wo die Hand ohnehin ist - und die
   Schaltflaechen darunter sind ohne Umgreifen erreichbar. */
@media (max-width: 640px) {
  dialog.dialog, dialog.dialog-breit {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    /* margin: auto auto 0 dockt das Element unten an, statt es zu zentrieren. */
    margin: auto auto 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
    animation: blatt-ein 240ms var(--ease);
  }
  /* Bewusst nur 34 px statt der ueblichen vollen Blatthoehe (100%).
     Ein modaler Dialog sperrt die Bedienung dahinter. Friert die Animation
     bei ihrem ersten Bild ein - was Browser in nicht dargestellten
     Registerkarten tun -, stuende er bei 100% vollstaendig ausserhalb des
     Bildschirms: unsichtbar, aber blockierend. Bei 34 px steht er
     stattdessen ein Stueck zu tief und bleibt bedienbar.
     Die Bewegung liest sich trotzdem als "kommt von unten". */
  @keyframes blatt-ein {
    from { transform: translateY(34px); }
    to   { transform: none; }
  }

  .dialog-koerper { max-height: none; }
  /* Platz fuer den Streifen am unteren iPhone-Rand. */
  .dialog-fuss {
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
  }
  /* Volle Breite fuer die Knoepfe: am Handy sind zwei nebeneinander
     stehende kleine Schaltflaechen unnoetig schwer zu treffen. */
  .dialog-fuss .btn { flex: 1; min-height: 44px; }
}

.dialog-kopf {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.dialog-kopf h2 { flex: 1; font-size: var(--fs-xl); }
.dialog-koerper { padding: 0 var(--sp-5) var(--sp-5); max-height: 68vh; overflow-y: auto; }
.dialog-fuss {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

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

.hinweis {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  font-size: var(--fs-base);
  background: var(--c-info-bg);
  color: var(--c-info-ink);
}
.hinweis-warn   { background: var(--c-warn-bg); color: var(--c-warn-ink); }
.hinweis-fehler { background: var(--c-err-bg);  color: var(--c-err-ink); }
.hinweis-ok     { background: var(--c-ok-bg);   color: var(--c-ok-ink); }
.hinweis svg { flex: none; margin-top: 1px; }

/* Kurzmeldungen unten rechts */
#meldungen {
  position: fixed;
  right: var(--sp-4); bottom: var(--sp-4);
  z-index: 90;
  display: flex; flex-direction: column-reverse; gap: var(--sp-2);
  pointer-events: none;
}
.meldung {
  display: flex; align-items: center; gap: var(--sp-3);
  min-width: 260px; max-width: 420px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r);
  background: var(--c-ink);
  color: #fff;
  font-size: var(--fs-base);
  box-shadow: var(--sh-3);
  pointer-events: auto;
  animation: meldung-ein 200ms var(--ease);
}
.meldung-ok     { background: #1e6440; }
.meldung-fehler { background: #9c2f38; }

@keyframes meldung-ein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Leerzustände */

.leer {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--c-muted);
}
.leer-symbol {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--c-surface-3);
  color: var(--c-muted);
}
.leer h3 { color: var(--c-ink); }
.leer p { max-width: 44ch; }

/* ------------------------------------------------------------- Fortschritt */

.balken {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  overflow: hidden;
}
.balken > span {
  display: block; height: 100%;
  border-radius: inherit;
  background: var(--c-accent);
  transition: width var(--dauer) var(--ease);
}
.balken-ok   > span { background: var(--c-ok-ink); }
.balken-warn > span { background: var(--c-warn-ink); }

/* ------------------------------------------------------------------ Skelett */

.skelett {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-surface-3) 37%, var(--c-surface-2) 63%);
  background-size: 400% 100%;
  animation: skelett 1.2s ease-in-out infinite;
}
@keyframes skelett { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ------------------------------------------------------------------ Trenner */

.abschnitt-titel {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.definitionen {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
}
.definitionen dt { color: var(--c-muted); }
.definitionen dd { margin: 0; color: var(--c-ink); }

@media (max-width: 560px) {
  .definitionen { grid-template-columns: 1fr; gap: 2px var(--sp-4); }
  .definitionen dd { margin-bottom: var(--sp-3); }
}