/* ==========================================================
   Toycards — Verwaltung
   Bewusst nüchtern gehalten: gut lesbar, grosse Klickflächen,
   funktioniert auch auf dem Handy.
   ========================================================== */

:root {
  --kachel:      #12294D;   /* Tiefblau: Kopf, Knoepfe */
  --kachel2:     #1B3A6B;
  --kachel-hell: #9DB4D8;
  --marine:      #070E1C;
  --creme:       #F2F5FA;
  --papier:      #FFFFFF;
  --tinte:       #16203040;
  --tinte:       #1A2334;
  --grau:        #5B6980;
  --grau-hell:   #DFE5EE;
  --eiche:       #A67C1E;   /* Gold */
  --rot:         #A63D3D;
  --gruen:       #2F6B4F;
  --radius:      4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #F2F4F6;
  color: var(--tinte);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Kopf ---------- */
.kopf {
  background: var(--kachel);
  color: var(--creme);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  padding: .9rem 1.6rem;
  position: sticky; top: 0; z-index: 20;
}
.marke {
  font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.35rem;
  color: var(--creme);
  text-decoration: none;
  letter-spacing: .03em;
  white-space: nowrap;
}
.marke em { font-style: italic; color: #E8CFA2; }
.marke span {
  font-family: inherit;
  display: inline-block;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .75;
  margin-left: .5rem;
  vertical-align: middle;
}
.kopf-nav { display: flex; flex-wrap: wrap; gap: .3rem; margin-right: auto; }
.kopf-nav a {
  color: rgba(247,242,233,.85);
  text-decoration: none;
  font-size: .88rem;
  padding: .45rem .85rem;
  border-radius: var(--radius);
}
.kopf-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.kopf-nav a.aktiv { background: rgba(255,255,255,.18); color: #fff; font-weight: 500; }
.kopf-rechts { display: flex; gap: 1.2rem; font-size: .82rem; }
.kopf-rechts a { color: rgba(247,242,233,.8); text-decoration: none; }
.kopf-rechts a:hover { color: #fff; text-decoration: underline; }

/* ---------- Inhalt ---------- */
.inhalt {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.2rem 1.4rem 8rem;
}
h1 {
  font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: .3rem;
}
.untertitel { color: var(--grau); margin-bottom: 2rem; max-width: 60ch; }
h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .1rem; }

/* ---------- Meldungen ---------- */
.meldung {
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 1.6rem;
  font-size: .92rem;
}
.meldung.gut { background: #E4F1E9; color: var(--gruen); border: 1px solid #BEDCCB; }
.meldung.schlecht { background: #FAE7E7; color: var(--rot); border: 1px solid #E8C4C4; }
.hinweis {
  background: #FFF8EA;
  border: 1px solid #EBDCBE;
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  font-size: .9rem;
  color: #6B5730;
  margin-bottom: 1.8rem;
}

/* ---------- Karten / Blöcke ---------- */
.block {
  background: var(--papier);
  border: 1px solid var(--grau-hell);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.2rem;
}
.block-kopf {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--grau-hell);
}
.block-kopf h2 { margin-right: auto; }
.block-kopf .zaehler { color: var(--grau); font-size: .82rem; }

/* Gruppe (Karten & Preise) */
.gruppe {
  background: var(--papier);
  border: 1px solid var(--grau-hell);
  border-left: 4px solid var(--kachel);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.4rem;
}

/* ---------- Zeilen ---------- */
.zeile {
  display: grid;
  gap: .7rem;
  align-items: start;
  padding: .85rem;
  border: 1px solid var(--grau-hell);
  border-radius: var(--radius);
  background: #FBFCFD;
  margin-bottom: .7rem;
}
.zeile.karte { background: var(--papier); padding: 1.2rem; gap: 1rem; }
.zeile-pos { grid-template-columns: 1fr 1.3fr 110px auto; }
.zeile-produkt { grid-template-columns: 120px 1fr auto; }
.zeile-person { grid-template-columns: 120px 1fr auto; }

@media (max-width: 720px) {
  .zeile-pos, .zeile-produkt, .zeile-person { grid-template-columns: 1fr; }
}

/* ---------- Felder ---------- */
label.feld { display: block; }
label.feld > span {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: .3rem;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
textarea,
select {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--tinte);
  background: #fff;
  border: 1px solid #C7CFD6;
  border-radius: var(--radius);
  padding: .55rem .7rem;
}
textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--kachel);
  box-shadow: 0 0 0 3px rgba(44,85,131,.15);
}
.feld-hinweis { font-size: .78rem; color: var(--grau); margin-top: .3rem; }

.schalter { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--grau); }
.schalter input { width: 18px; height: 18px; }

/* ---------- Knöpfe ---------- */
button, .knopf {
  font: inherit;
  font-size: .88rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  padding: .55rem 1.1rem;
  background: var(--grau-hell);
  color: var(--tinte);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
button:hover, .knopf:hover { background: #D3D9DF; }
.knopf-haupt { background: var(--kachel); color: #fff; }
.knopf-haupt:hover { background: var(--kachel2); }
.knopf-still { background: transparent; border-color: #C7CFD6; color: var(--grau); }
.knopf-still:hover { background: #EDF1F4; color: var(--tinte); }
.knopf-weg { background: transparent; border-color: #E3C6C6; color: var(--rot); }
.knopf-weg:hover { background: #FAE7E7; }

.werkzeuge { display: flex; flex-direction: column; gap: .35rem; }
.werkzeuge button {
  width: 34px; height: 30px;
  padding: 0;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--grau-hell);
  color: var(--grau);
  font-size: .8rem;
}
.werkzeuge button:hover { background: #EDF1F4; color: var(--tinte); }
.werkzeuge button.weg:hover { background: #FAE7E7; color: var(--rot); border-color: #E3C6C6; }
@media (max-width: 720px) { .werkzeuge { flex-direction: row; } }

/* ---------- Speicherleiste ---------- */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--grau-hell);
  padding: .8rem 1.4rem;
  display: flex; align-items: center; gap: 1rem;
}
.leiste-inner {
  max-width: 1000px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 1rem;
}
.leiste .status { color: var(--grau); font-size: .85rem; margin-right: auto; }
.leiste .status.geaendert { color: var(--eiche); font-weight: 500; }

/* ---------- Bildfeld ---------- */
.bildfeld { display: flex; flex-direction: column; gap: .5rem; }
.bild-vorschau {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #EDF1F4 repeating-linear-gradient(45deg, #E7ECF1 0 8px, #EDF1F4 8px 16px);
  border: 1px solid var(--grau-hell);
  border-radius: var(--radius);
  object-fit: cover;
  display: block;
}
.bild-leer {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: .74rem;
  color: var(--grau);
  padding: .5rem;
}
input[type="file"] { font-size: .8rem; width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit; font-size: .8rem;
  border: 1px solid #C7CFD6;
  background: #fff;
  border-radius: 4px;
  padding: .3rem .6rem;
  margin-right: .5rem;
  cursor: pointer;
}

/* ---------- Übersicht ---------- */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.kachel-link {
  background: var(--papier);
  border: 1px solid var(--grau-hell);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--tinte);
  display: block;
  transition: border-color .2s ease, transform .2s ease;
}
.kachel-link:hover { border-color: var(--kachel); transform: translateY(-2px); }
.kachel-link h2 {
  font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: .3rem;
}
.kachel-link p { color: var(--grau); font-size: .88rem; }
.kachel-link .anzahl {
  display: inline-block;
  margin-top: .9rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kachel);
}

/* ---------- Vergangene Events ---------- */
.vergangen { opacity: .62; }
.marke-vergangen {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grau); background: var(--grau-hell);
  padding: .2rem .55rem; border-radius: 99px;
}
.marke-versteckt {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: #8A6A2E; background: #FBEFD6;
  padding: .2rem .55rem; border-radius: 99px;
}

/* ---------- Anmeldung ---------- */
.login-seite {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.4rem;
  background: var(--kachel);
}
.login-box {
  background: var(--papier);
  border-radius: 8px;
  padding: 2.4rem;
  width: 100%; max-width: 400px;
  box-shadow: 0 18px 50px rgba(14,22,32,.25);
}
.login-box h1 { font-size: 1.9rem; margin-bottom: .2rem; }
.login-box p.sub { color: var(--grau); font-size: .9rem; margin-bottom: 1.8rem; }
.login-box .feld { margin-bottom: 1.2rem; }
.login-box button { width: 100%; justify-content: center; padding: .8rem; }

/* ---------- Fuss ---------- */
.fuss {
  text-align: center;
  color: var(--grau);
  font-size: .78rem;
  padding: 0 1.4rem 6rem;
}

.leer-hinweis {
  color: var(--grau);
  font-size: .9rem;
  font-style: italic;
  padding: 1.2rem;
  text-align: center;
  border: 1px dashed var(--grau-hell);
  border-radius: var(--radius);
  margin-bottom: .8rem;
}

/* ---------- Kopfbereich-Block (Hero) ---------- */
.hero-raster {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.4rem;
  align-items: start;
}
@media (max-width: 720px) { .hero-raster { grid-template-columns: 1fr; } }

.bild-vorschau.breit { aspect-ratio: 16 / 10; }