/* ============================================================
   Datei: stil.css
   Beschreibung: Aussehen aller Seiten -- die einzige Stildatei
   Autor: HopeApps | Umut Zerman
   ============================================================

   Eine Datei fuer alles, und zwar mit Absicht: Wenn die Farbe des
   Preisknopfs geaendert wird, soll sie sich auf der Startseite, in der
   Liste und auf jeder Angebotsseite gleichzeitig aendern -- auch bei
   mehreren Betrieben auf demselben Server. Deshalb liegt sie oben neben
   den PHP-Seiten und nicht im Ordner eines Betriebs.

   Alle Farben stehen als Variablen ganz oben. Wer das Aussehen anpassen
   will, kommt mit den ersten dreissig Zeilen aus und muss nicht durch
   das ganze Blatt suchen.
   ============================================================ */

:root {
  --grund: #f7f7f5;
  --karte: #ffffff;
  --rand: #e2e0da;
  --text: #1c1b18;
  --text-still: #6b6862;
  --akzent: #b45309;      /* Werkzeugorange -- Preis und Knoepfe */
  --akzent-text: #ffffff;
  --paket: #1d4ed8;       /* Pakete heben sich vom Einzelstueck ab */
  --radius: 10px;
  --spalte: 1080px;
}

/* Dunkel nur, wenn das Geraet es verlangt. Wer auf der Baustelle im
   Dunkelmodus unterwegs ist, bekommt kein weisses Blatt ins Gesicht. */
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #17181a;
    --karte: #202225;
    --rand: #33363b;
    --text: #ececea;
    --text-still: #a2a09b;
    --akzent: #f59e0b;
    --akzent-text: #17181a;
    --paket: #60a5fa;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.spalte {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 16px;
}

main.spalte { padding-top: 20px; padding-bottom: 40px; }

a { color: inherit; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 8px; }
h2 { font-size: 1.2rem; margin: 28px 0 10px; }
h3 { font-size: 1rem; margin: 0 0 4px; }

.klein { color: var(--text-still); font-size: 0.86rem; margin: 2px 0; }
.fliesstext { margin: 14px 0; }

/* ---------------- Kopf ---------------- */

.kopf {
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopf .spalte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}

.marke { text-decoration: none; display: block; }
.marke-name { display: block; font-weight: 700; font-size: 1.05rem; }
.marke-zusatz { display: block; color: var(--text-still); font-size: 0.82rem; }

/* Abstaende hier ueber Aussenabstaende statt ueber "gap": Die
   Eigenschaft wirkt in Flexboxen erst ab Chrome 84. Auf aelteren
   Geraeten -- und davon steht garantiert eins in einem Werkzeugkoffer --
   klebten die Menuepunkte sonst zu einem Wort zusammen und stiessen an
   den Anrufknopf. Der negative Rand am Behaelter gleicht die Abstaende
   der Kinder nach aussen wieder aus.
   (Bei Rastern unten ist "gap" in Ordnung -- das koennen Browser laenger.) */
.menue { display: flex; align-items: center; flex-wrap: wrap; margin: -4px -8px; }
.menue > * { margin: 4px 8px; }
.menue a { text-decoration: none; font-size: 0.92rem; }
.menue a:hover { text-decoration: underline; }

/* ---------------- Knoepfe ---------------- */

.knopfreihe { display: flex; flex-wrap: wrap; margin: 18px -5px; }
.knopfreihe > * { margin: 5px; }

.knopf,
.knopf-klein {
  display: inline-block;
  background: var(--akzent);
  color: var(--akzent-text);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius);
  /* Grosszuegig, weil die Seite am Handy und oft mit Arbeitshandschuhen
     bedient wird. 44 Pixel Hoehe ist das Mass, unter dem Treffer
     danebengehen. */
  padding: 12px 18px;
  min-height: 44px;
  line-height: 20px;
}

.knopf-klein { padding: 8px 14px; min-height: 0; font-size: 0.85rem; }

.knopf-still {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rand);
}

.knopf:hover, .knopf-klein:hover { filter: brightness(1.08); }

.zurueck { color: var(--text-still); font-size: 0.9rem; }

/* ---------------- Kacheln ---------------- */


.gitter {
  display: grid;
  /* Von selbst ein-, zwei- oder dreispaltig, je nach Platz -- ohne
     eigene Regel pro Bildschirmgroesse. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.kachel {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kachel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.kachel-paket { border-color: var(--paket); }

.kachel-bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--grund);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kachel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kein-bild { color: var(--text-still); font-size: 0.85rem; }

.fahne {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--paket);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

.fahne-gross {
  position: static;
  display: inline-block;
  margin: 0 0 6px;
  font-size: 0.75rem;
}

.kachel-text { padding: 12px 14px 14px; }

.preis { color: var(--akzent); font-weight: 700; margin: 6px 0 0; }
.preis-gross { font-size: 1.5rem; margin: 4px 0 16px; }
.preis-gross .klein { display: block; font-weight: 400; }

/* ---------------- Angebotsseite ---------------- */

.angebot {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px;
}

.bildreihe {
  display: flex;
  /* Nebeneinander wischen statt untereinander scrollen: Am Handy sind
     acht Bilder untereinander eine halbe Minute Daumenarbeit, bis der
     Text kommt. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: -18px -18px 16px;
  padding: 18px;
}

.bildreihe img {
  flex: 0 0 auto;
  margin-right: 10px;
  width: min(88%, 460px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  scroll-snap-align: center;
  background: var(--grund);
}

.daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 16px 0;
  font-size: 0.94rem;
}

.daten dt { color: var(--text-still); }
.daten dd { margin: 0; }

.inhaltsliste { list-style: none; padding: 0; margin: 10px 0; }

.inhaltsliste li {
  border-bottom: 1px solid var(--rand);
  padding: 10px 0;
}

.inhaltsliste li:last-child { border-bottom: 0; }
.posten-titel { display: block; font-weight: 600; }

.zugabe {
  background: var(--grund);
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.zugabe-liste summary { cursor: pointer; color: var(--text-still); font-size: 0.9rem; }
.zugabe-liste ul { columns: 2; font-size: 0.9rem; }

.anfrage {
  border-top: 1px solid var(--rand);
  margin-top: 22px;
  padding-top: 14px;
}

/* ---------------- Karten und Fuss ---------------- */

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 22px;
}

.leer { text-align: center; color: var(--text-still); }

.liste { list-style: none; padding: 0; }
.liste li { border-bottom: 1px solid var(--rand); padding: 12px 0; }

.begruessung { margin-bottom: 26px; }

.fuss {
  border-top: 1px solid var(--rand);
  background: var(--karte);
  margin-top: 40px;
  padding: 24px 0 32px;
  font-size: 0.92rem;
}

.fuss .hinweis { color: var(--text-still); }
.fuss .kontakt { margin: 14px 0; }
.impressum summary { cursor: pointer; color: var(--text-still); }

@media (max-width: 520px) {
  h1 { font-size: 1.35rem; }
  .angebot { padding: 14px; }
  .zugabe-liste ul { columns: 1; }
}

/* ---------------- Pruefseite ----------------
   Nur fuer pruefung.php. Steht mit hier drin, weil es keine zweite
   Stildatei geben soll -- eine Ausnahme waere der Anfang vom Ende. */

.pruefung { width: 100%; border-collapse: collapse; margin: 16px 0; }
.pruefung td { padding: 10px 8px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.pruefung .zeichen { width: 28px; font-weight: 700; font-size: 1.1rem; }
.pruefung .gut .zeichen { color: #16a34a; }
.pruefung .schlecht .zeichen { color: #dc2626; }
.pruefung .hinweis .zeichen { color: var(--text-still); }
.pruefung .klein { display: block; }