/* Farmisto Verzeichnis – eigene Stilvorlage, nichts von aussen. */
:root {
  --navy: #00173F; --teal: #1B5C72; --grau: #667; --rand: #d4dce5;
  --flaeche: #fff; --grund: #f2f5f8; --text: #1e293b; --gut: #1a5c18;
}
@media (prefers-color-scheme: dark) {
  :root { --flaeche: #141b25; --grund: #0b1017; --text: #e2e8f0;
          --rand: #2b3746; --grau: #8a98ab; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text);
       font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
         padding: 14px 24px; background: var(--navy); color: #fff; }
.marke { color: #fff; font-size: 20px; font-weight: 700; text-decoration: none; letter-spacing: .3px; }
header .unter { color: #a9bdd6; font-size: 14px; }
header nav { margin-left: auto; display: flex; gap: 18px; }
header nav a { color: #cfe0f0; text-decoration: none; font-size: 15px; }
header nav a:hover { color: #fff; text-decoration: underline; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; }
h1 { font-size: 26px; margin: 0 0 6px; color: var(--text); }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .6px;
     color: var(--grau); margin: 26px 0 10px; }
.fuehrung { color: var(--grau); margin: 0 0 22px; max-width: 70ch; }
form.suche { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
input[type=search], select {
  font: inherit; padding: 10px 12px; border: 1px solid var(--rand);
  border-radius: 6px; background: var(--flaeche); color: var(--text); }
input[type=search] { flex: 1 1 260px; }
button { font: inherit; padding: 10px 18px; border-radius: 6px; cursor: pointer;
         border: 1px solid var(--teal); background: var(--teal); color: #fff; font-weight: 600; }
button.still { background: var(--flaeche); color: var(--text); border-color: var(--rand); }
.liste { display: grid; gap: 14px; }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px;
         padding: 16px 18px; }
.karte a.titel { font-size: 19px; font-weight: 700; color: var(--teal); text-decoration: none; }
.karte a.titel:hover { text-decoration: underline; }
.marken { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.marke-klein { font-size: 12px; padding: 3px 9px; border-radius: 12px;
               background: var(--grund); border: 1px solid var(--rand); color: var(--grau); }
.kacheln { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.kachel { background: var(--grund); border-radius: 6px; padding: 8px 14px; min-width: 110px; }
.kachel .wert { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kachel .name { font-size: 12px; color: var(--grau); }
.zeile { color: var(--grau); font-size: 14px; }
.leer { color: var(--grau); }
code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
       background: var(--grund); padding: 2px 6px; border-radius: 4px; word-break: break-all; }
pre { background: var(--grund); border: 1px solid var(--rand); border-radius: 6px;
      padding: 12px 14px; overflow-x: auto; font-size: 13px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--rand); font-size: 15px; }
th { color: var(--grau); font-size: 13px; font-weight: 600; }
footer { border-top: 1px solid var(--rand); margin-top: 40px; padding: 20px 16px 36px; }
footer p { max-width: 70ch; margin: 0 auto 8px; color: var(--grau); font-size: 14px; }
footer .klein { font-size: 12px; }