/*
 * Schwarz auf Weiss wie der Flyer: die Wortmarke gibt die Buehne vor, Farbe
 * kommt ausschliesslich aus den Produktbildern. Die Schrift liegt im Projekt
 * (public/fonts) statt bei Google -- die Seite laedt nichts von fremden Servern.
 */
@font-face { font-family: 'Kiwi Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Kiwi Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Kiwi Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/poppins-700.woff2') format('woff2'); }

:root {
  --ink: #111113;
  --grau: #5c5c62;      /* 4.5:1 auf Weiss auch fuer kleine Groessen */
  --linie: #e0e0e3;
  --flaeche: #f5f5f6;
  --rot: #b40000;
  --gruen: #0a7d32;
  --radius: .6rem;
  --dauer: 200ms;
  --kurve: cubic-bezier(.22, 1, .36, 1); /* ease-out-quint */
  /* Stapel: Leiste unter moeglichen Dialogen, ueber dem Inhalt. */
  --z-bilanz: 10;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}
body {
  margin: 0;
  font-family: 'Kiwi Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 46rem; margin: 0 auto; padding: .5rem 1.1rem 5.5rem; }
body.breit main { max-width: 72rem; }

/* Kopf */
.top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 46rem; margin: 0 auto; padding: 1.35rem 1.1rem 0;
}
body.breit .top { max-width: 72rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); }
.logo .wm { height: 1.5rem; width: auto; display: block; }
.logo .go {
  font-size: .72rem; font-weight: 500; letter-spacing: .02em; line-height: 1;
  border: 1.5px solid var(--ink); border-radius: 999px; padding: .28rem .5rem .24rem;
}
.aktion { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

/* Text */
.held { padding: clamp(1.6rem, 5vw, 3rem) 0 .4rem; }
h1 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.03em;
  margin: 0 0 .6rem; text-wrap: balance;
}
h1 small { font-size: .85rem; font-weight: 400; color: var(--grau); letter-spacing: 0; }
h2 {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 1rem;
}
h2 small { font-weight: 400; font-size: .8rem; color: var(--grau); }
/* Die Schrittzahl: die vier Abschnitte SIND eine Reihenfolge. */
.schritt {
  flex: none; display: inline-grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: .85rem; font-weight: 700; letter-spacing: 0;
  transform: translateY(.18rem);
}
.lead { color: #3a3a40; margin: 0 0 1.2rem; max-width: 34rem; text-wrap: pretty; }
.lead b { font-weight: 700; color: var(--ink); }
.hinweis { font-size: .85rem; color: var(--grau); margin: 0 0 1rem; }
.hinweis b { font-weight: 500; color: var(--ink); }
.klein { font-size: .78rem; color: var(--grau); }
.mitte { text-align: center; }
.fehler {
  border: 1.5px solid var(--rot); color: var(--rot); font-weight: 500;
  border-radius: var(--radius); padding: .75rem .9rem; margin: 0 0 1.3rem; font-size: .9rem;
}

section { border-top: 1.5px solid var(--ink); padding: 1.6rem 0 2rem; }
.held + section, form.lang section:first-of-type { border-top: 0; }
form.lang section:first-of-type { padding-top: .4rem; }

/* Felder */
label { display: block; font-size: .8rem; font-weight: 500; margin-bottom: .35rem; }
/* :where() drueckt die Spezifitaet auf null -- die Stepper-Breite unten
   gewinnt sonst nie gegen diese drei :not(). */
input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden])), textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .68rem .75rem; border: 1.5px solid var(--linie); border-radius: var(--radius);
  background: #fff; color: var(--ink);
  transition: border-color var(--dauer) var(--kurve);
}
input:hover, textarea:hover { border-color: #b9b9be; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
textarea { resize: vertical; }
::placeholder { color: #8a8a90; opacity: 1; }

button {
  font: inherit; font-weight: 700; letter-spacing: .03em;
  background: var(--ink); color: #fff; border: 0; border-radius: var(--radius);
  padding: .8rem 1.4rem; cursor: pointer;
  transition: background var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
button:hover { background: #2c2c31; }
button:active { transform: scale(.985); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button:disabled { background: #c3c3c7; cursor: not-allowed; transform: none; }
button.gross { width: 100%; padding: 1.05rem; font-size: 1.05rem; }

.karte { border: 1.5px solid var(--ink); border-radius: .8rem; padding: 1.2rem; }
/* Link im Knopfgewand -- fuer die Startseite, wo kein Formular noetig ist. */
.knopf {
  display: block; text-align: center; text-decoration: none;
  font-weight: 700; letter-spacing: .03em; font-size: 1.05rem;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 1.05rem 1.4rem;
  transition: background var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.knopf:hover { background: #2c2c31; }
.knopf:active { transform: scale(.985); }
.knopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.karte.schmal { max-width: 23rem; margin: 1.6rem auto 0; }
.karte.schmal button { width: 100%; margin-top: .9rem; }
.karte.schmal .klein { margin: .8rem 0 0; }
.paket-zeile { margin: 0 0 .6rem; font-size: .95rem; }

/*
 * Angebotstafel (Startseite): die drei Pakete als Schaufenster. Das mittlere
 * Paket ist invertiert -- ein Blickanker, kein "beliebt"-Etikett.
 */
.tafel { display: grid; gap: .7rem; grid-template-columns: 1fr; margin: 1.4rem 0 .4rem; }
@media (min-width: 34rem) { .tafel { grid-template-columns: repeat(3, 1fr); } }
.tafel-paket {
  display: grid; gap: .2rem; align-content: start;
  border: 1.5px solid var(--ink); border-radius: .8rem; padding: 1.1rem 1.15rem 1.2rem;
}
.tafel-paket:nth-child(2) { background: var(--ink); color: #fff; }
.tafel-paket:nth-child(2) .tafel-menge { color: #c9c9ce; }
.tafel-id { font-size: 2.3rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.tafel-menge { font-size: .8rem; color: var(--grau); margin-top: .15rem; }
.tafel-preis { font-size: 1.15rem; font-weight: 700; margin-top: .55rem; font-variant-numeric: tabular-nums; }
.tafel-preis small { font-weight: 400; font-size: .68rem; color: inherit; opacity: .65; }
.tafel-gewinn { font-size: .78rem; font-weight: 500; color: var(--gruen); }
.tafel-paket:nth-child(2) .tafel-gewinn { color: #7fd89b; }

/*
 * Paketkarten im Formular: gleiche Anatomie wie die Tafel, plus Menge.
 * Eine Karte mit Menge > 0 kippt ins Schwarze -- man sieht von weitem,
 * was im Korb ist. (Die Klasse setzt form.js; ohne Skript bleibt die
 * Karte hell und der Server rechnet nach.)
 */
.pakete { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .pakete { grid-template-columns: repeat(3, 1fr); } }
.paket {
  display: grid; gap: .2rem; align-content: start;
  border: 1.5px solid var(--linie); border-radius: .8rem; padding: 1.1rem 1.15rem 1.15rem;
  transition: border-color var(--dauer) var(--kurve), background var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}
.paket:hover { border-color: var(--ink); }
.paket-id { font-size: 2.3rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.paket-menge { font-size: .8rem; color: var(--grau); margin-top: .15rem; }
.paket-preis { font-size: 1.15rem; font-weight: 700; margin-top: .55rem; font-variant-numeric: tabular-nums; }
.paket-preis small { font-weight: 400; font-size: .68rem; opacity: .65; }
.paket-gewinn { font-size: .78rem; font-weight: 500; color: var(--gruen); }
.paket .menge { margin-top: .8rem; }
.paket.aktiv { background: var(--ink); border-color: var(--ink); color: #fff; }
.paket.aktiv .paket-menge { color: #c9c9ce; }
.paket.aktiv .paket-gewinn { color: #7fd89b; }
.paket.aktiv .menge input { background: #fff; }

/*
 * Sorten und Geraetefarben teilen sich eine Zeilenform: Bild, Name, Menge.
 * Ab Tabletbreite zwei Spalten -- 22 Sorten untereinander sind sonst ein
 * langer Daumenweg.
 */
.posten-liste { list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) {
  .posten-liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.2rem; }
}
.posten {
  display: flex; align-items: center; gap: .9rem;
  border-top: 1px solid var(--linie); padding: .4rem 0;
}
.posten-liste .posten:first-child { border-top: 0; }
@media (min-width: 40rem) { .posten-liste .posten:nth-child(2) { border-top: 0; } }
.pod { height: 3.4rem; width: auto; flex: none; object-fit: contain; }
.geraet { width: 2.7rem; height: 2.7rem; flex: none; border-radius: .5rem; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.posten-name { flex: 1; font-size: .95rem; min-width: 0; }
.posten-zahl { font-variant-numeric: tabular-nums; font-weight: 700; }
.farben .posten { padding: .45rem 0; gap: 1rem; }

/* Menge mit Plus/Minus -- Daumenziele mindestens 44 px, auch wenn die Zeile
   eng wird: nichts hier darf schrumpfen, eher bricht der Sortenname um. */
.menge { display: inline-flex; align-items: stretch; gap: .3rem; flex: none; }
.menge button, .menge input { flex: none; }
.menge input:not([type=checkbox]) {
  width: 3.3rem; text-align: center; padding: .5rem .2rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.menge input::-webkit-outer-spin-button, .menge input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.menge button {
  width: 2.75rem; min-height: 2.75rem; padding: 0; font-size: 1.15rem; font-weight: 500; line-height: 1;
  background: #fff; color: var(--ink); border: 1.5px solid var(--linie); border-radius: .5rem;
  transition: border-color var(--dauer) var(--kurve), background var(--dauer) var(--kurve), color var(--dauer) var(--kurve), transform 120ms var(--kurve);
}
.menge button:hover { border-color: var(--ink); background: #fff; }
.menge button:active { background: var(--ink); color: #fff; transform: scale(.94); }
.menge button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Firmendaten */
.raster { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .raster { grid-template-columns: 1fr 1fr; } .feld { grid-column: span 2; } .feld.halb { grid-column: span 1; } }
.feld { margin: 0; }
.feld small { color: var(--grau); font-weight: 400; }

.bestaetigung label { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; font-weight: 400; margin-bottom: .8rem; }
.bestaetigung input { margin-top: .3rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--ink); }

/* Honigtopf */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/*
 * Laufender Stand am unteren Rand: beim Mischen von Paketen ist die eine
 * Frage "geht meine Verteilung auf?" -- die Antwort soll sichtbar sein, egal
 * wo man gerade scrollt. Erscheint nur mit Skript (hidden-Attribut).
 */
.bilanz {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bilanz);
  display: flex; align-items: center; justify-content: center; gap: clamp(1.1rem, 5vw, 2.6rem);
  background: rgba(255, 255, 255, .96);
  border-top: 1.5px solid var(--ink);
  padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom));
  font-variant-numeric: tabular-nums;
  transform: translateY(0);
  transition: transform var(--dauer) var(--kurve);
}
@supports (backdrop-filter: blur(6px)) {
  .bilanz { background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); }
}
.bilanz[hidden] { display: none; }
.bilanz-teil, .bilanz-summe { display: grid; justify-items: center; gap: .05rem; }
.bilanz-teil b, .bilanz-summe b { font-size: 1rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.bilanz-teil small, .bilanz-summe small {
  font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grau);
}
.bilanz-teil.passt b { color: var(--gruen); }
.bilanz-teil.zuviel b { color: var(--rot); }

/* Vorkasse-Block auf der Bestaetigung: die Ueberweisungsdaten als ruhige
   Tabelle, der Betrag als einzige laute Zahl. */
.karte.zahlung { margin-top: 1rem; }
.zahlung-titel { margin: 0 0 .8rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.zahlung-zeile {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  border-top: 1px solid var(--linie); padding: .45rem 0; font-size: .92rem;
}
.zahlung-zeile span { color: var(--grau); flex: none; }
.zahlung-zeile b { font-weight: 500; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.zahlung-zeile b.gross-wert { font-weight: 700; font-size: 1.25rem; }
.karte.zahlung .klein { margin: .8rem 0 0; }

/* Uebersicht */
.liste { width: 100%; border-collapse: collapse; font-size: .85rem; }
.liste th { text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); border-bottom: 1.5px solid var(--ink); padding: .4rem .5rem; }
.liste td { border-bottom: 1px solid var(--linie); padding: .55rem .5rem; vertical-align: top; }
.liste small { color: var(--grau); }
.liste ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }

footer {
  max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.1rem 3rem;
  border-top: 1px solid var(--linie); color: var(--grau); font-size: .74rem;
}
footer p { margin: .3rem 0; }
a { color: var(--ink); }

#stand.passt, #gstand.passt { color: var(--gruen); }
#stand.zuviel, #gstand.zuviel { color: var(--rot); }