/* Agency OS — Grundformen. Tokens kommen aus `tokens.css`. */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--groesse);
  line-height: 1.5;
  color: var(--farbe-text);
  background: var(--farbe-grund);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: var(--groesse-hero); }
h2 { font-size: var(--groesse-titel); }
h3 { font-size: var(--groesse-gross); }
p { margin: 0; }

a { color: var(--farbe-akzent-hell); }
a:hover { color: var(--farbe-akzent); }

/* --- Knöpfe ------------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--abstand-2);
  padding: 9px 16px;
  font: inherit; font-weight: 600;
  color: var(--farbe-text);
  background: var(--farbe-flaeche-2);
  border: 1px solid var(--farbe-rand-hell);
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.knopf:hover { background: var(--farbe-rand); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .55; cursor: not-allowed; }
.knopf:focus-visible { outline: none; box-shadow: var(--ring); }

.knopf-primaer {
  color: #fff;
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
}
.knopf-primaer:hover { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent-hell); }

.knopf-leise { background: transparent; border-color: transparent; color: var(--farbe-text-leise); }
.knopf-leise:hover { background: var(--farbe-flaeche-2); color: var(--farbe-text); }

.knopf-gefahr { color: var(--farbe-fehler); border-color: rgba(241,32,74,.4); background: transparent; }

/* --- Eingaben ---------------------------------------------------------- */
label { display: block; font-size: var(--groesse-klein); color: var(--farbe-text-leise); }

input, select, textarea {
  width: 100%;
  margin-top: var(--abstand-1);
  padding: 9px 12px;
  font: inherit;
  color: var(--farbe-text);
  background: var(--farbe-flaeche-2);
  border: 1px solid var(--farbe-rand-hell);
  border-radius: var(--radius-klein);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--farbe-akzent); box-shadow: var(--ring);
}
input::placeholder { color: var(--farbe-text-still); }
textarea { min-height: 90px; resize: vertical; }

.feld { margin-bottom: var(--abstand-4); }

/* --- Karten und Flächen ------------------------------------------------ */
.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten-klein);
}

.etikett {
  display: inline-block; padding: 2px 9px;
  font-size: var(--groesse-klein); font-weight: 600;
  border-radius: 999px;
  background: var(--farbe-flaeche-2); color: var(--farbe-text-leise);
  border: 1px solid var(--farbe-rand);
}
.etikett-ok   { color: var(--farbe-ok);     border-color: rgba(47,191,113,.4);  background: rgba(47,191,113,.12); }
.etikett-warn { color: var(--farbe-warn);   border-color: rgba(232,163,61,.4);  background: rgba(232,163,61,.12); }
.etikett-info { color: var(--farbe-info);   border-color: rgba(76,141,246,.4);  background: rgba(76,141,246,.12); }
.etikett-zu   { color: var(--farbe-fehler); border-color: rgba(241,32,74,.4);   background: var(--farbe-akzent-still); }

/* --- Tabellen ---------------------------------------------------------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--groesse); }
.tabelle th {
  text-align: left; font-size: var(--groesse-klein); font-weight: 600;
  color: var(--farbe-text-still); text-transform: uppercase; letter-spacing: .04em;
  padding: var(--abstand-3) var(--abstand-4);
  border-bottom: 1px solid var(--farbe-rand);
}
.tabelle td { padding: var(--abstand-3) var(--abstand-4); border-bottom: 1px solid var(--farbe-rand); }
.tabelle tbody tr:hover { background: var(--farbe-flaeche-2); }
.tabelle tbody tr:last-child td { border-bottom: none; }

/* --- Hilfsklassen ------------------------------------------------------ */
.leise { color: var(--farbe-text-leise); }
.still { color: var(--farbe-text-still); }
.klein { font-size: var(--groesse-klein); }
.reihe { display: flex; align-items: center; gap: var(--abstand-3); }
.reihe-verteilt { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); }
.wickeln { flex-wrap: wrap; }
.rechts { margin-left: auto; }
.versteckt { display: none !important; }
.mono { font-family: var(--schrift-mono); font-size: var(--groesse-klein); }

.meldung {
  padding: var(--abstand-3) var(--abstand-4);
  border-radius: var(--radius-klein);
  border: 1px solid var(--farbe-rand-hell);
  background: var(--farbe-flaeche-2);
}
.meldung-fehler { color: var(--farbe-fehler); border-color: rgba(241,32,74,.4); background: var(--farbe-akzent-still); }
.meldung-ok { color: var(--farbe-ok); border-color: rgba(47,191,113,.4); background: rgba(47,191,113,.12); }

.leerzustand {
  padding: var(--abstand-7) var(--abstand-4);
  text-align: center; color: var(--farbe-text-still);
}

/* Rückmeldung für Hilfstechnik: sichtbar, wenn die Seite vorgelesen wird. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}