/* Hof Gerken – Bestell-Shop. Farben und Schriften wie die Website (src/styles/global.css). Mobile first. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/fraunces-latin-wght-normal.eb2486760f75.woff2") format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-display: swap; font-weight: 200 900; src: url("fonts/source-sans-3-latin-wght-normal.9ef356ea553a.woff2") format('woff2'); }

:root {
  --creme: #f7f2e8; --karte: #fffdf8; --linie: #e2d9c6; --salbei: #e9eedf;
  --ink: #2b2a24; --muted: #45423a; --leise: #5e5a4e;
  --gruen: #3e6b3c; --gruen-dunkel: #2c4f2b; --erde: #2e2b24; --erde-text: #e8e0d0;
  --warn: #8a4b0f; --warn-bg: #fbeedd; --fehler: #9b2c1f; --fehler-bg: #fbe5e1;
  --display: 'Fraunces', Georgia, serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--ink); font: 1.0625rem/1.55 var(--sans); }
a { color: var(--gruen-dunkel); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; color: var(--ink); }
h1 { font-size: 1.85rem; margin: .2em 0 .4em; }
h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
h3 { font-size: 1.1rem; margin: 1.2em 0 .3em; }
p { margin: .5em 0 1em; }
.huelle { max-width: 46rem; margin: 0 auto; padding: 0 16px; }

/* Kopf und Fuß */
.kopf { background: var(--karte); border-bottom: 1px solid var(--linie); }
.kopf .huelle { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.kopf img { width: 52px; height: auto; }
.kopf .marke { font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.1; }
.kopf .marke small { display: block; font-family: var(--sans); font-size: .85rem; font-weight: 400; color: var(--leise); }
.kopf .zurueck { margin-left: auto; font-size: .95rem; }
main { padding: 20px 0 48px; }
.fuss { background: var(--erde); color: var(--erde-text); padding: 28px 0; font-size: .95rem; }
.fuss a { color: var(--erde-text); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }

/* Bausteine */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 18px; margin: 0 0 16px; }
.leise { color: var(--leise); }
.klein { font-size: .92rem; }
.hinweis { background: var(--salbei); border-left: 4px solid var(--gruen); border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
.warnung { background: var(--warn-bg); border-left: 4px solid var(--warn); border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
.fehler, .errorlist { color: var(--fehler); }
.errorlist { list-style: none; padding: 0; margin: .3em 0; font-weight: 600; }
.nonfield { background: var(--fehler-bg); border-radius: 8px; padding: 10px 14px; }
.vorschau { background: #fff4c2; border-bottom: 1px solid #e6cf6a; text-align: center; padding: 8px 16px; font-size: .95rem; }

.knopf { display: inline-block; background: var(--gruen); color: #fff; border: 0; border-radius: 999px; padding: 13px 24px;
  font: 600 1.05rem var(--sans); text-decoration: none; cursor: pointer; text-align: center; }
.knopf:hover { background: var(--gruen-dunkel); }
.knopf.breit { display: block; width: 100%; }
.knopf.zweit { background: transparent; color: var(--gruen-dunkel); border: 2px solid var(--gruen); }
.knopf.zweit:hover { background: var(--salbei); }
.knopf.gefahr { background: var(--fehler); }
.knopfreihe { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }

.auswahl { display: grid; gap: 12px; }
.auswahl a.karte { display: block; text-decoration: none; color: inherit; }
.auswahl a.karte:hover { border-color: var(--gruen); }
.auswahl strong { font-family: var(--display); font-size: 1.2rem; display: block; color: var(--gruen-dunkel); }

/* Formulare */
label { font-weight: 600; display: block; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=number], input[type=tel], input[type=password], input[type=date], input[type=time], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid #c9bea8; border-radius: 10px; padding: 11px 12px; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(62,107,60,.35); border-color: var(--gruen); }
.feld { margin: 0 0 16px; }
.feld .hilfe { font-size: .9rem; color: var(--leise); margin-top: 4px; }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.termine label { display: flex; align-items: center; gap: 12px; font-weight: 400; background: #fff; border: 1px solid #c9bea8;
  border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.termine input { width: 20px; height: 20px; accent-color: var(--gruen); }
.termine label:has(input:checked) { border-color: var(--gruen); background: var(--salbei); }
.termine .frei { margin-left: auto; font-size: .9rem; color: var(--leise); }

.paket { display: grid; grid-template-columns: 1fr 110px; gap: 4px 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--linie); }
.paket:first-of-type { border-top: 0; }
.paket h3 { margin: 0; }
.paket .preis { font-weight: 600; color: var(--gruen-dunkel); }
.paket .inhalt { grid-column: 1 / -1; font-size: .93rem; color: var(--leise); margin: 0; }
.paket input { text-align: right; }
.paket .einheit { font-size: .85rem; color: var(--leise); text-align: right; }

table.liste { width: 100%; border-collapse: collapse; font-size: .97rem; }
table.liste th, table.liste td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.liste th { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--leise); }
table.liste td.zahl, table.liste th.zahl { text-align: right; white-space: nowrap; }
table.liste tfoot td { font-weight: 700; border-bottom: 0; }

.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.messages li { border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; background: var(--salbei); }
.messages li.warning, .messages li.error { background: var(--warn-bg); }

@media (min-width: 640px) {
  h1 { font-size: 2.3rem; }
  .auswahl { grid-template-columns: 1fr 1fr; }
  .knopfreihe { flex-direction: row; }
  .karte { padding: 24px; }
}

/* Verwaltung (/intern/) */
.inav { background: var(--erde); }
.inav .huelle { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 10px; padding-bottom: 10px; align-items: center; }
.inav a, .inav button { color: var(--erde-text); text-decoration: none; font: inherit; font-size: .97rem; background: none; border: 0; padding: 0; cursor: pointer; }
.inav a:hover, .inav button:hover { text-decoration: underline; }
.inav .rechts { margin-left: auto; }
.marke-klein { font-family: var(--display); font-weight: 600; color: #fff !important; }
.marke-pille { display: inline-block; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: var(--salbei); color: var(--gruen-dunkel); white-space: nowrap; }
.marke-pille.aus { background: var(--warn-bg); color: var(--warn); }
.marke-pille.grau { background: #ece6d8; color: var(--leise); }
.knopf.klein { padding: 6px 12px; font-size: .9rem; }
.zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline { display: inline; }
.raster2 { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .raster2 { grid-template-columns: 1fr 1fr; } }
.checkbox label { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.checkbox input { width: 20px; height: 20px; accent-color: var(--gruen); }
.abgesagt td { color: var(--leise); text-decoration: line-through; }
select.klein { width: auto; max-width: 8.5rem; padding: 6px 4px; font-size: .9rem; }
.karte { overflow-x: auto; }
@media print {
  .kopf, .inav, .fuss, .nicht-drucken, .messages, .vorschau { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .karte { border: 0; padding: 0; }
  main { padding: 0; }
}