/* Startseite: die Symbolreihe unter „Ihr Spezialist für Schältechnik“.
 *
 * Wird nur auf den beiden Startseiten eingebunden (Regel
 * `startseite_saft_smoothie` in build.py). Kreis, Größe und Linienstärke des
 * Randes kommen aus styles.css der Vorlage (`.productsFilterHome ul > li`);
 * hier stehen die Randfarben der neuen Symbole und die Anordnung. Die
 * BILDER der neuen Symbole setzt build.py als style-Angabe mit Inhaltskennung
 * an die Kachel (Zwischenspeicher, siehe STARTSEITE_EIGENE_BILDER).
 *
 * Seit 2026-09-25 (zweite Runde) fünf Symbole: Spargel, Universal, Ananas,
 * Saft, Smoothie. Grünspargel und „anderes Gemüse“ entfallen.
 *
 * RANDFARBEN: Spargel und Ananas behalten ihre Farben aus der Vorlage,
 * Universal Dunkelgrün (#448846, siehe unten). Saft in
 * Orange, Smoothie im HEPRO-Rot (#cd1619) -- beide vom Auftraggeber am
 * 2026-09-25 auf der Testseite bestätigt („orange bei Saft passt dort sehr
 * gut und das Rot auch“).
 */
/* Spargel steht für weißen UND grünen Spargel (2026-09-25). Erst halb/halb
 * geteilt -- „sieht nicht so geil aus“; aus fünf Varianten gewählt: ZWEI
 * RINGE (berichte/startseite-symbole/spargel-ringe-2026-09-25.png), außen
 * grün (#B0CC14), innen gelb (#EAC51D), die Farben der Vorlage.
 * Der zweite Ring liegt NACH INNEN (inset), nicht außen: So bleibt der Kreis
 * so groß wie die anderen und stößt auf dem Handy (4 px Abstand) nicht an.
 * Innen bleibt es weiß wie bei allen Symbolen -- eine Füllung hätte den
 * Spargel als einziges hervorgehoben. */
.productsFilterHome .thumbsRounded > ul > li.spargel {
  border-color: #B0CC14;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #EAC51D;
}
/* Universal: Dunkelgrün, „minimal heller“ als #3C763D aus der Vorlage
   (Auftraggeber 2026-09-25) -- derselbe Farbton, Helligkeit 35 % -> 40 %. */
.productsFilterHome ul > li.universal {
  border-color: #448846;
}
.productsFilterHome ul > li.saft {
  border-color: #F39200;
}
.productsFilterHome ul > li.smoothie {
  border-color: #cd1619;
}

/* BREIT: Die Vorlage gibt der Reihe 800 px und jedem Kreis 3 % Rand und
 * lässt die Kreise schrumpfen -- bei mehr als vier Kreisen wurden sie zu
 * Ovalen gestaucht (gemessen 93 x 114 px). Deshalb: Kreise schrumpfen nicht,
 * fester Abstand, Reihe bis 900 px. */
@media (min-width: 768px) {
  .productsFilterHome .thumbsRounded > ul {
    max-width: 900px;
  }
  .productsFilterHome .thumbsRounded > ul > li {
    flex-shrink: 0;
    margin-left: 14px;
    margin-right: 14px;
  }
  .productsFilterHome .thumbsRounded > ul > li:first-child {
    margin-left: 0;
  }
  .productsFilterHome .thumbsRounded > ul > li:last-child {
    margin-right: 0;
  }
}

/* SCHMAL: Fünf lassen sich nicht gleichmäßig auf zwei Reihen verteilen
 * (3 + 2). Deshalb eine Reihe; die Kreise werden auf sehr schmalen Geräten
 * kleiner, bleiben aber rund (Breite und Höhe aus derselben Rechnung).
 * 72 px = 2 x 16 px Seitenrand + 5 x 8 px Abstand. */
@media (max-width: 767px) {
  .productsFilterHome .thumbsRounded > ul {
    max-width: none;
    flex-wrap: nowrap;
  }
  .productsFilterHome .thumbsRounded > ul > li {
    flex-shrink: 0;
    width: min(70px, calc((100vw - 72px) / 5));
    height: min(70px, calc((100vw - 72px) / 5));
    margin: 0 4px 20px;
  }
  /* Die feste Umbruchstelle der Bildunterschrift nur dort, wo die Zeile
     breit genug ist -- auf dem Handy stand sonst „passende“ allein. */
  .productsFilterHome > p br {
    display: none;
  }
}

/* ========================================================================
   FRISCHE OASE (2026-09-28)
   ========================================================================

   Auftraggeber: „Frische Oase mach mal was rein will sehen wie das aussieht".
   Vorbild ist der Abschnitt auf hepro-royal.de, den er geschickt hat: Text
   links, großes Bild darunter mit einer Bildunterschrift, die mit einer
   gesperrten Kennung beginnt.

   ÜBERSETZT IN DIE HEPRO-WELT, nicht kopiert: Die Royal-Seite ist eine
   andere Welt (fette Grotesk, Mono-Label). Hier stehen die Mittel dieser
   Website — `ZapfHumanist601BT-Demi`, gesperrte Versalien, `#cd1619` als
   kurzer Strich, Fläche `#f4f4f4`.

   DER TEXT STEHT IN build.py, nicht hier — er ist Inhalt, keine Gestaltung,
   und er beruht Wort für Wort auf drei Antworten des Auftraggebers. */

.hepro-oase {
  background: #f4f4f4;
  padding: 64px 0 56px;
  margin: 0;
}

.hepro-oase-innen {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.hepro-oase-text {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

/* Der Titel in der Manier der Seitenüberschriften dieser Website:
   gesperrte Versalien in der Hausschrift, darunter der kurze rote Strich. */
.hepro-oase-titel {
  margin: 0 0 22px;
  font-family: 'ZapfHumanist601BT-Demi', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 26px;
  font-weight: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1c1c1c;
}

.hepro-oase-titel::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: #cd1619;
  margin: 16px auto 0;
}

/* Der erste Absatz trägt die Aussage und ist deshalb größer — nicht fett:
   Fett neben gesperrten Versalien wird unruhig. */
.hepro-oase-kern {
  font-size: 19px;
  line-height: 1.6;
  color: #1c1c1c;
  margin: 0 0 14px;
}

.hepro-oase-text p {
  color: #3c3c3b;
  line-height: 1.7;
}

.hepro-oase-knopf {
  display: inline-block;
  margin-top: 12px;
  background: #cd1619;
  color: #fff;
  padding: 12px 26px;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.hepro-oase-knopf:hover,
.hepro-oase-knopf:focus {
  background: #a51114;
  color: #fff;
  text-decoration: none;
}

/* ---- Das Bild ---- */

.hepro-oase-bild {
  margin: 0;
}

.hepro-oase-bild img {
  display: block;
  width: 100%;
  height: auto;
}

/* Die Bildunterschrift beginnt mit der gesperrten Kennung — wie im Entwurf
   des Auftraggebers. Sie steht im Text und nicht als eigenes Element:
   Bildunterschrift und Kennung gehören zusammen und sollen zusammen
   umbrechen. */
.hepro-oase-bild figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #5a5a59;
}

@media (max-width: 767px) {
  .hepro-oase {
    padding: 44px 0 40px;
  }
  .hepro-oase-titel {
    font-size: 21px;
  }
  .hepro-oase-kern {
    font-size: 17px;
  }
}

/* ---- Die Kachel „HEPRO aktuell" (2026-09-28) ---------------------------
 *
 * Auftraggeber, mit Screenshot: „gucks dir die hauptseite mit der kachel an"
 * — und er hatte recht. Das Bild füllte die Kachel nicht: Die gebauten
 * Teaserbilder sind auf 350 × 320 zugeschnitten, das Bild eines Beitrags
 * hat ein beliebiges Seitenverhältnis. Unten blieb eine graue Fläche stehen,
 * und die Kachel sah aus wie halb geladen.
 *
 * `object-fit: cover` in einem Feld, das so hoch ist wie die Kachel: Das
 * Bild füllt, egal welches Maß es mitbringt. Beschnitten wird an den Rändern
 * — bei einem Beitragsbild ist das richtig, die Aussage steht in der Mitte. */
/* DAS SEITENVERHÄLTNIS IST DER SCHLÜSSEL, nicht die Höhe — gemessen am
 * 2026-09-28 statt geraten:
 *
 *   andere Kacheln   Bild 350 × 320, dargestellt 273 × 250
 *   Aktuell-Kachel   Bild in beliebigem Format, dargestellt 278 × 154
 *
 * Die Höhe der anderen entsteht gar nicht durch eine Höhenangabe — sie
 * entsteht aus dem Seitenverhältnis ihrer Datei: 273 × 320/350 = 250. Ein
 * Beitragsbild bringt aber mit, was der Fotograf mitgebracht hat. Der erste
 * Versuch mit `height: 100%` lief deshalb ins Leere: Es gibt keine Höhe, an
 * der sich die 100 % orientieren könnten.
 *
 * `aspect-ratio: 350 / 320` gibt dem Feld dieselbe Form wie den anderen,
 * `object-fit: cover` füllt es mit dem Bild. Beschnitten wird an den Rändern
 * — bei einem Beitragsbild ist das richtig, die Aussage steht in der Mitte. */
.startseitenteaser > li.hepro-aktuell .teaserImageWrapper img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 350 / 320;
  object-fit: cover;
}