/* =====================================================================
   Metzgerei Effert – Jägerportal
   Mobil zuerst. Farben aus dem Logo: Creme, Dunkelrot, Braun, Oliv.
   ===================================================================== */

:root {
  --creme:        #f7f0e4;
  --creme-hell:   #fdfaf4;
  --papier:       #ffffff;
  --rot:          #8f1f22;
  --rot-dunkel:   #741a1c;
  --rot-hell:     #fdecec;
  --braun:        #6b5844;
  --oliv:         #6c7a4a;
  --text:         #2f2a24;
  --text-leise:   #7a7167;
  --linie:        #e3d8c4;
  --gruen:        #3f7a4a;
  --gelb:         #8a6a12;
  --gelb-hell:    #fdf6e3;

  --radius:       12px;
  --radius-klein: 8px;
  --schatten:     0 1px 2px rgba(47, 42, 36, .06), 0 4px 14px rgba(47, 42, 36, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.6rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .9rem; color: var(--rot); }
h3 { font-size: .95rem; margin: 1.5rem 0 .6rem; color: var(--braun); text-transform: uppercase; letter-spacing: .04em; }

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

/* ---------- Kopfzeile ---------- */
.kopf {
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  padding: .7rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.2rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.marke {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
}
.marke img { border-radius: 50%; display: block; }
.marke strong { display: block; font-size: 1rem; line-height: 1.2; }
.marke small  { display: block; font-size: .8rem; color: var(--text-leise); }

.navigation {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-left: auto;
}
.navigation a {
  padding: .45rem .8rem;
  border-radius: 99px;
  text-decoration: none;
  color: var(--braun);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
}
.navigation a:hover  { background: var(--creme); }
.navigation a.aktiv  { background: var(--rot); color: #fff; }
.navigation a.abmelden { color: var(--text-leise); font-weight: 500; }

/* ---------- Rumpf ---------- */
.inhalt {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.5rem 1rem 6rem;
}

.untertitel {
  color: var(--text-leise);
  margin: 0 0 1.4rem;
  font-size: .95rem;
}

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--schatten);
}

.klein { font-size: .85rem; color: var(--text-leise); }

.merksatz {
  background: var(--creme);
  border-left: 3px solid var(--oliv);
  border-radius: var(--radius-klein);
  padding: .6rem .8rem;
  font-size: .9rem;
  margin: 1rem 0 0;
}

/* ---------- Hinweise ---------- */
.hinweis {
  border-radius: var(--radius-klein);
  padding: .85rem 1rem;
  margin: 0 0 1.2rem;
  font-size: .93rem;
  border-left: 4px solid;
}
.hinweis-erfolg  { background: #eef7ef; border-color: var(--gruen); color: #23522c; }
.hinweis-fehler  { background: var(--rot-hell); border-color: var(--rot); color: var(--rot-dunkel); }
.hinweis-warnung { background: var(--gelb-hell); border-color: var(--gelb); color: #6b520d; }
.hinweis-info    { background: var(--creme-hell); border-color: var(--braun); color: var(--braun); }

/* ---------- Formularfelder ---------- */
.feld {
  display: block;
  margin-bottom: 1rem;
}
.feld > span:first-child {
  display: block;
  font-size: .87rem;
  font-weight: 600;
  color: var(--braun);
  margin-bottom: .3rem;
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--creme-hell);
  color: var(--text);
  font: inherit;
  font-size: 1rem;   /* verhindert Zoom beim Antippen auf iOS */
}
.feld textarea { resize: vertical; min-height: 5rem; }

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: 2px solid var(--rot);
  outline-offset: 1px;
  background: var(--papier);
}
.feld input:disabled { color: var(--text-leise); background: #f2ede4; }

.feld input.fehlerhaft,
.feld select.fehlerhaft,
.feld textarea.fehlerhaft { border-color: var(--rot); background: var(--rot-hell); }

.feld-fehler {
  display: block;
  color: var(--rot);
  font-size: .82rem;
  margin-top: .25rem;
  font-weight: 600;
}
.feld-hilfe {
  display: block;
  color: var(--text-leise);
  font-size: .8rem;
  margin-top: .25rem;
}

.feld-gruppe { display: grid; gap: 0 1rem; }
.feld-block {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 1rem;
  margin: 0 0 1rem;
}
.feld-block legend { font-size: .87rem; font-weight: 700; color: var(--braun); padding: 0 .4rem; }

/* ---------- Ankreuzfelder ---------- */
.ankreuz-gitter { display: grid; gap: .5rem; }

.ankreuz {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .7rem .8rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--creme-hell);
  cursor: pointer;
  font-size: .93rem;
}
.ankreuz:hover { border-color: var(--braun); }
.ankreuz input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--rot); flex: none; }
.ankreuz span  { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.ankreuz em    { color: var(--text-leise); font-style: normal; font-size: .84rem; }
.ankreuz:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); }
.ankreuz-warnung:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); font-weight: 600; }

/* ---------- Pakete ---------- */
.paket-gitter { display: grid; gap: .6rem; }

.paket-karte {
  display: block;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: .85rem;
  background: var(--creme-hell);
  cursor: pointer;
}
.paket-karte input { position: absolute; opacity: 0; pointer-events: none; }
.paket-karte strong { display: block; color: var(--rot); font-size: 1rem; }
.paket-karte span   { display: block; font-size: .85rem; color: var(--text-leise); margin: .2rem 0 .35rem; }
.paket-karte em     { font-style: normal; font-size: .85rem; font-weight: 700; color: var(--braun); }
.paket-karte:has(input:checked) {
  border-color: var(--rot);
  background: var(--rot-hell);
  box-shadow: inset 0 0 0 1px var(--rot);
}

/* ---------- Preisblock ---------- */
.preis-karte { border-color: var(--rot); }

.preis-liste { font-size: .92rem; }
.preis-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .38rem 0;
  border-bottom: 1px dashed var(--linie);
}
.preis-zeile span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.preis-leer { color: var(--text-leise); font-size: .9rem; padding: .4rem 0; }

.preis-summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 2px solid var(--rot);
  font-size: 1.05rem;
}
.preis-summe strong { font-size: 1.45rem; color: var(--rot); font-variant-numeric: tabular-nums; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-block;
  padding: .8rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.knopf-haupt   { background: var(--rot); color: #fff; }
.knopf-haupt:hover { background: var(--rot-dunkel); }
.knopf-haupt:disabled { background: var(--text-leise); cursor: progress; }
.knopf-schlicht { background: var(--papier); color: var(--braun); border-color: var(--linie); }
.knopf-schlicht:hover { border-color: var(--braun); }
.knopf-klein   { padding: .45rem .85rem; font-size: .87rem; }
.knopf-gross   { width: 100%; padding: 1rem; font-size: 1.02rem; }

.knopf-leiste { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.knopf-leiste-fest {
  position: sticky;
  bottom: 0;
  /* Deckend bis kurz über den Knopf, damit darunter liegender Text
     nicht durchscheint, und erst darüber ein weicher Übergang. */
  background: linear-gradient(to top, var(--creme) 84%, rgba(247, 240, 228, 0));
  padding: 1.4rem 0 1.2rem;
  margin-top: .6rem;
}

.inline-formular { display: inline; }

/* ---------- Anmeldung ---------- */
.anmelde-karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.8rem 1.4rem;
  max-width: 420px;
  margin: 2rem auto;
  box-shadow: var(--schatten);
}
.anmelde-karte h1 { font-size: 1.35rem; }

.code-info {
  background: var(--creme);
  border-radius: var(--radius-klein);
  padding: .8rem;
  text-align: center;
  font-size: .9rem;
  color: var(--text-leise);
  margin: 0 0 1.2rem;
}
.code-info strong { color: var(--text); font-size: 1rem; word-break: break-all; }

.code-eingabe {
  font-size: 1.9rem !important;
  letter-spacing: .5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: .6rem !important;
}

.formular-schmal { margin-top: .7rem; }
.formular-schmal .knopf { width: 100%; }

/* ---------- Meldungsliste ---------- */
.meldungs-liste { display: grid; gap: .9rem; }

.meldung-karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--schatten);
}
.meldung-karte.hervorgehoben { border-color: var(--rot); box-shadow: 0 0 0 2px var(--rot-hell); }

.meldung-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
}
.meldung-nummer { font-weight: 700; font-size: 1.02rem; margin-right: .5rem; }
.meldung-datum  { font-size: .82rem; color: var(--text-leise); }

.status {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 99px;
  font-size: .76rem;
  font-weight: 700;
  background: var(--creme);
  color: var(--braun);
  vertical-align: 2px;
}
.status-abholbereit, .status-abgeholt { background: #eef7ef; color: var(--gruen); }

.meldung-daten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem 1rem;
  font-size: .9rem;
}
.meldung-daten span   { display: block; color: var(--text-leise); font-size: .78rem; }
.meldung-daten strong { font-weight: 600; }

.merkmale-warnung {
  background: var(--rot-hell);
  color: var(--rot-dunkel);
  border-radius: var(--radius-klein);
  padding: .45rem .7rem;
  font-size: .85rem;
  font-weight: 600;
  margin: .8rem 0 0;
}

.meldung-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--linie);
  font-size: .84rem;
}
.versand { color: var(--text-leise); }
.versand-ok     { color: var(--gruen); }
.versand-fehler { color: var(--rot); font-weight: 600; }
.meldung-fuss .knopf:last-child { margin-left: auto; }

.leer { text-align: center; padding: 2.5rem 1.2rem; }
.leer p { color: var(--text-leise); margin-bottom: 1.2rem; }

/* ---------- Fußzeile ---------- */
.fuss {
  text-align: center;
  padding: 1.5rem 1rem 2.5rem;
  font-size: .84rem;
  color: var(--text-leise);
}
.fuss .trenner { margin: 0 .4rem; }

/* ---------- Selbsttest ---------- */
.pruef-liste { list-style: none; margin: 0; padding: 0; }
.pruef-liste li {
  display: flex;
  gap: .7rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: .93rem;
}
.pruef-liste li:last-child { border-bottom: 0; }
.pruef-zeichen { flex: none; font-weight: 700; width: 1.6rem; }
.pruef-ok    .pruef-zeichen { color: var(--gruen); }
.pruef-warn  .pruef-zeichen { color: var(--gelb); }
.pruef-fehler .pruef-zeichen { color: var(--rot); }
.pruef-liste small { display: block; color: var(--text-leise); }

/* ---------- Größere Bildschirme ---------- */
@media (min-width: 640px) {
  .inhalt { padding: 2rem 1.5rem 6rem; }
  h1 { font-size: 1.9rem; }
  .karte { padding: 1.5rem; }

  .feld-gruppe.zwei  { grid-template-columns: 1fr 1fr; }
  .feld-gruppe.drei  { grid-template-columns: 1fr 1fr 1fr; }
  .feld-breit        { grid-column: span 2; }

  .ankreuz-gitter { grid-template-columns: 1fr 1fr; }
  .paket-gitter   { grid-template-columns: 1fr 1fr; }

  .meldung-daten { grid-template-columns: repeat(3, 1fr); }
  .knopf-gross   { width: auto; min-width: 22rem; }
}

@media (min-width: 900px) {
  .paket-gitter { grid-template-columns: repeat(3, 1fr); }
}

/* Für Nutzer, die Bewegung reduzieren möchten */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}