/* Farben und Schriften aus dem VISOP-Brandboard (assets/css/tokens.css der
   Hauptseite), damit die Verwaltung nicht wie ein Fremdkörper wirkt. */
:root {
  --dark: #0b1320;
  --blue: #1166ff;
  --blue-hell: #4da3ff;
  --neutral: #6f7280;
  --light: #e5e7eb;
  --weiss: #ffffff;
  --grund: #f6f7f9;
  --warnung: #b42318;
  --ok: #0f6b45;
  --radius: .25rem;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--dark);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

h1 {
  margin: 0 0 .25rem;
  font-family: 'Exo 2', system-ui, sans-serif;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .9em;
  background: color-mix(in srgb, var(--light), transparent 40%);
  padding: .1em .35em;
  border-radius: 3px;
}

a { color: var(--blue); }

.schale { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }

/* Kopf */
.kopf { background: var(--dark); color: var(--weiss); }
.kopf__inhalt { display: flex; align-items: center; gap: 1rem; padding-block: .9rem; }
.wortmarke {
  font-family: 'Exo 2', system-ui, sans-serif;
  font-weight: 600; letter-spacing: .16em; font-size: 1.05rem;
}
.kopf__titel { color: color-mix(in srgb, var(--weiss), transparent 35%); font-size: .9rem; }
.kopf__aktion { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.kopf__aktion a.knopf { text-decoration: none; }
.kopf .knopf--leise {
  background: transparent; color: var(--weiss);
  border-color: color-mix(in srgb, var(--weiss), transparent 70%);
}
.kopf .knopf--leise:hover { background: color-mix(in srgb, var(--weiss), transparent 88%); }

main { padding-block: 1.5rem 3rem; display: flex; flex-direction: column; gap: 1rem; }

/* Karten */
.karte {
  background: var(--weiss);
  border: 1px solid var(--light);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.karte--schmal { max-width: 26rem; }

.fliess { margin: 0 0 1rem; color: var(--neutral); }
.leise { color: var(--neutral); }
.zaehler {
  display: inline-block; margin-left: .35rem; padding: .05rem .45rem;
  background: var(--light); border-radius: 999px;
  font-family: Inter, sans-serif; font-size: .75rem; color: var(--neutral);
}

/* Formulare */
.formular { display: flex; flex-direction: column; gap: .35rem; }
.formular--reihe { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.formular--reihe > div { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 14rem; }

label { font-size: .85rem; font-weight: 500; }

input[type="text"], input[type="password"] {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--light);
  border-radius: var(--radius);
  font: inherit;
  background: var(--weiss);
  color: inherit;
}
input:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.knopf {
  padding: .55rem 1rem;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--weiss);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.knopf:hover { background: #0d55d6; border-color: #0d55d6; }
.knopf--klein { padding: .3rem .6rem; font-size: .85rem; }
.knopf--leise { background: var(--weiss); color: var(--dark); border-color: var(--light); }
.knopf--leise:hover { background: var(--grund); }
.knopf--warnung { background: var(--warnung); border-color: var(--warnung); }
.knopf--warnung:hover { background: #8f1c13; border-color: #8f1c13; }

/* Hinweise */
.hinweis { padding: .9rem 1.1rem; border-radius: var(--radius); border: 1px solid; }
.hinweis p { margin: 0; }
.hinweis--ok { background: #eef7f2; border-color: #bfe0d0; color: var(--ok); }
.hinweis--fehler { background: #fdf0ef; border-color: #f2c9c5; color: var(--warnung); }

.zugang { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: .75rem 0 .35rem; color: var(--dark); }
.zugang dt { font-size: .85rem; color: var(--neutral); }
.zugang dd { margin: 0; }
.zugang__warnung { font-size: .85rem; color: var(--neutral); }

/* Tabelle */
.tabelle-huelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--neutral); font-weight: 600; padding: 0 .6rem .4rem 0;
  border-bottom: 1px solid var(--light);
}
.tabelle td { padding: .6rem .6rem .6rem 0; border-bottom: 1px solid var(--light); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.zahl { font-variant-numeric: tabular-nums; color: var(--neutral); white-space: nowrap; }
.projektname { font-weight: 600; text-decoration: none; }
.projektname:hover { text-decoration: underline; }

.marke { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; }
.marke--offen { background: #eef7f2; color: var(--ok); }
.marke--zu { background: #fdf0ef; color: var(--warnung); }

.aktionen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.aktionen form { margin: 0; }

.loeschen summary {
  cursor: pointer; font-size: .85rem; color: var(--warnung);
  padding: .3rem .25rem; list-style: none;
}
.loeschen summary::-webkit-details-marker { display: none; }
.loeschen__formular {
  margin-top: .5rem; padding: .75rem; background: var(--grund);
  border: 1px solid var(--light); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: .5rem; min-width: 15rem;
}
.loeschen__formular p { margin: 0; font-size: .85rem; color: var(--neutral); }

.hochladen { margin: 1rem 0 0; font-size: .85rem; }

/* Datenbank-Spalte: zugeklappt nur der Name, aufgeklappt die Zugangsdaten.
   Die stehen bewusst im Klartext da - sie sollen nachschlagbar sein. */
.db summary { cursor: pointer; list-style: none; }
.db summary::-webkit-details-marker { display: none; }
.db__inhalt {
  margin-top: .5rem; padding: .7rem; background: var(--grund);
  border: 1px solid var(--light); border-radius: var(--radius); min-width: 17rem;
}
.zugang--eng { gap: .1rem .6rem; margin: 0 0 .6rem; font-size: .85rem; }
.db__aktionen { display: flex; flex-direction: column; gap: .5rem; }
.db__loeschen { display: flex; flex-direction: column; gap: .35rem; }
.db__loeschen input { font-size: .85rem; padding: .35rem .5rem; }

@media (max-width: 40rem) {
  .kopf__titel { display: none; }
  .formular--reihe { flex-direction: column; align-items: stretch; }
  .aktionen { flex-direction: column; align-items: stretch; }
}