/* Schlicht, kontraststark, grosse Bedienelemente.
   Clemi soll wenig klicken und wenig tippen muessen - deshalb sind Knopf- und
   Trefferflaechen bewusst gross (mindestens 48 Pixel hoch), Eingabefelder
   breit, und die Schrift gross genug zum Lesen ohne Zoom. */

:root {
  --grund: #f5f5f4;
  --karte: #ffffff;
  --rand: #d6d3d1;
  --text: #1c1917;
  --gedimmt: #57534e;
  --akzent: #1d4ed8;
  --akzent-text: #ffffff;
  --warn: #b45309;
  --warn-grund: #fef3c7;
  --gut: #15803d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #1c1917;
    --karte: #292524;
    --rand: #57534e;
    --text: #f5f5f4;
    --gedimmt: #a8a29e;
    --akzent: #60a5fa;
    --akzent-text: #0c0a09;
    --warn: #fbbf24;
    --warn-grund: #451a03;
    --gut: #4ade80;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.kopf {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center;
  padding: .9rem 1.25rem;
  background: var(--karte);
  border-bottom: 2px solid var(--rand);
  position: sticky; top: 0; z-index: 10;
}
.marke { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--text); }
.kopf nav { display: flex; gap: .5rem; }
.kopf nav a {
  padding: .6rem 1rem; border-radius: .5rem; text-decoration: none;
  color: var(--text); border: 2px solid var(--rand); font-weight: 600;
}
.kopf nav a:hover { border-color: var(--akzent); }
.kopf nav a.warn { background: var(--warn-grund); border-color: var(--warn); color: var(--warn); }
.zaehler { margin-left: auto; color: var(--gedimmt); font-size: .95rem; }

main { max-width: 1200px; margin: 0 auto; padding: 1.25rem; }

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }

/* -------------------------------------------------- Formulare und Knoepfe */

label { display: block; font-weight: 600; margin: .85rem 0 .3rem; }
input[type=text], input[type=search], select, textarea {
  width: 100%; padding: .7rem .8rem; font-size: 1.05rem;
  border: 2px solid var(--rand); border-radius: .5rem;
  background: var(--karte); color: var(--text); min-height: 48px;
}
textarea { min-height: 5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--akzent); outline-offset: 1px; }

.knopf, button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .8rem 1.4rem;
  font-size: 1.05rem; font-weight: 700; cursor: pointer;
  border: 2px solid var(--rand); border-radius: .6rem;
  background: var(--karte); color: var(--text); text-decoration: none;
}
.knopf:hover, button:hover { border-color: var(--akzent); }
.knopf.haupt, button.haupt {
  background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent);
  min-height: 64px; font-size: 1.15rem; padding: 1rem 2rem;
}
.knopf.schmal { min-height: 44px; padding: .5rem 1rem; font-size: .95rem; }

.knopfzeile { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* Kontrollkaestchen deutlich groesser als der Vorgabewert */
input[type=checkbox] { width: 26px; height: 26px; vertical-align: middle; }
.kasten { display: flex; align-items: center; gap: .6rem; font-weight: 600; margin: 1rem 0; }

/* --------------------------------------------------------------- Bausteine */

.karte {
  background: var(--karte); border: 2px solid var(--rand);
  border-radius: .75rem; padding: 1.1rem; margin-bottom: 1rem;
}

.filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem 1rem; align-items: end; }
.filter label { margin: 0 0 .3rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gedimmt); }
tbody tr:hover { background: color-mix(in srgb, var(--akzent) 8%, transparent); }
td a { color: var(--akzent); font-weight: 600; }
.tabelle-huelle { overflow-x: auto; }

.marke-review { display: inline-block; padding: .2rem .55rem; border-radius: .35rem;
  background: var(--warn-grund); color: var(--warn); font-weight: 700; font-size: .85rem; }
.marke-frei { color: var(--gedimmt); font-size: .9rem; }
.gut { color: var(--gut); font-weight: 700; }

.mini { width: 64px; height: 64px; object-fit: cover; border-radius: .35rem; border: 1px solid var(--rand); }

.fotos { display: flex; flex-wrap: wrap; gap: .75rem; }
.fotos img { max-width: 100%; border-radius: .5rem; border: 2px solid var(--rand); }
.foto-gross img { width: 100%; max-height: 62vh; object-fit: contain; background: var(--grund); }

dl.daten { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: .5rem 1rem; margin: 0; }
dl.daten dt { font-weight: 700; color: var(--gedimmt); }
dl.daten dd { margin: 0; }

.hinweis { padding: .9rem 1.1rem; border-radius: .6rem; border: 2px solid var(--rand);
  background: var(--karte); color: var(--gedimmt); }
.hinweis.gut { border-color: var(--gut); color: var(--gut); }

.fortschritt { color: var(--gedimmt); font-weight: 600; margin-bottom: .75rem; }

/* -------------------------------------------------------- Anmeldeseite --- */

.anmelde-seite {
  max-width: 26rem;
  margin: 8vh auto;
  padding: 1.25rem;
}
.anmelde-seite h1 { font-size: 2rem; text-align: center; margin-bottom: 1.25rem; }
.anmelde-seite .knopfzeile button { width: 100%; }
.hinweis.warnung { border-color: var(--warn); color: var(--warn); background: var(--warn-grund); }

/* Abmelden sitzt in der Kopfzeile rechts und darf klein sein. */
.abmelden { margin-left: .5rem; }
.abmelden button { min-height: 40px; padding: .4rem .9rem; font-size: .9rem; font-weight: 600; }

@media (max-width: 640px) {
  dl.daten { grid-template-columns: 1fr; }
  .zaehler { margin-left: 0; width: 100%; }
}