/* ============================================================
   Kategorieseiten der Gerätearten - KSF Grillgeräte
   Wird nur auf diesen Seiten geladen (inc/kategorieseiten.php).

   Bewusst hier und nicht als <style> im Seiteninhalt: Der UX Builder
   fügt beim Bearbeiten <br />-Tags in Style-Blöcke ein und macht das
   CSS damit unbrauchbar (siehe Gewinnspielseite, 08/2026).

   Gestaltung wie /kurzfristig-lieferbar/: eckig, Seitenblau #07589b,
   2-px-Rahmen, oranges Etikett, Knöpfe als Pillen.
   ============================================================ */

.ksf-kat { color: #636363; }

/* ---------------------------------------------------------- Kopfbereich */
.ksf-kat .hero {
  background: #07589b;
  background-image: linear-gradient(to right, #07589b 55%, #1765a6 100%);
  color: #fff;
  padding: 132px 28px 58px;
  text-align: center;
}
.ksf-kat .hero .kicker {
  background: rgb(220, 106, 2);
  color: #fff;
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 18px;
  padding: 7px 16px;
  text-transform: uppercase;
}
.ksf-kat .hero h1 {
  color: #fff;
  font-size: 2.6rem;
  line-height: 1.12;
  margin: 0 0 16px;
}
.ksf-kat .hero .sub {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 720px;
  opacity: .93;
}

/* ---------------------------------------------------------- Textabschnitte */
.ksf-kat .abschnitt { margin: 0 0 54px; }
.ksf-kat .abschnitt h2 {
  color: #07589b;
  font-size: 1.75rem;
  margin: 0 0 14px;
}
.ksf-kat .abschnitt .lead {
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0 0 18px;
}
.ksf-kat .abschnitt p { line-height: 1.7; }

/* Drei Merkmale nebeneinander */
.ksf-kat .merkmale {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
}
.ksf-kat .merkmale > div {
  border: 2px solid #07589b;
  padding: 22px 20px;
}
.ksf-kat .merkmale h3 {
  color: #07589b;
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.ksf-kat .merkmale p { font-size: .95rem; line-height: 1.6; margin: 0; }

/* ---------------------------------------------------------- Geräteliste */
.ksf-kat-liste { margin: 0 0 54px; }

.ksf-kat-raster {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}

.ksf-kat-gruppe {
  border-top: 2px solid #e2e8ef;
  color: #07589b;
  font-size: 1.3rem;
  margin: 46px 0 6px;
  padding-top: 30px;
}
.ksf-kat-gruppe-text { color: #5b7185; margin: 0 0 22px; }

.ksf-kat-kachel {
  border: 2px solid #07589b;
  color: inherit;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  transition: box-shadow .18s ease, transform .18s ease;
}
.ksf-kat-kachel:hover,
.ksf-kat-kachel:focus {
  box-shadow: 0 14px 34px rgba(6, 40, 70, .18);
  transform: translateY(-3px);
}

.ksf-kat-kachel .bild {
  align-items: center;
  background: #fff;
  border-bottom: 2px solid #07589b;
  display: flex;
  justify-content: center;
  min-height: 210px;
  padding: 18px;
}
.ksf-kat-kachel .bild img {
  height: auto;
  max-height: 180px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.ksf-kat-kachel .inhalt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 20px 20px 18px;
}
.ksf-kat-kachel .titel {
  color: #07589b;
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}
.ksf-kat-kachel .daten {
  color: #5b7185;
  display: block;
  font-size: .92rem;
  line-height: 1.5;
  margin-bottom: 16px;
}
.ksf-kat-kachel .daten span { display: block; }
.ksf-kat-kachel .daten span + span { margin-top: 2px; }

.ksf-kat-kachel .mehr {
  border: 2px solid #07589b;
  border-radius: 99px;
  color: #07589b;
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-top: auto;
  padding: 9px 20px;
  text-align: center;
  text-transform: uppercase;
}
.ksf-kat-kachel:hover .mehr,
.ksf-kat-kachel:focus .mehr {
  background: #07589b;
  color: #fff;
}

/* ---------------------------------------------------------- Anfrage-Hinweis */
.ksf-kat .anfrage {
  border: 2px solid #07589b;
  margin: 0 0 54px;
  padding: 28px 26px;
  text-align: center;
}
.ksf-kat .anfrage h2 { color: #07589b; font-size: 1.5rem; margin: 0 0 10px; }
.ksf-kat .anfrage p { margin: 0 auto 18px; max-width: 640px; }
.ksf-kat .anfrage a.knopf {
  background: #07589b;
  border-radius: 99px;
  color: #fff;
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 13px 30px;
  text-decoration: none !important;
  text-transform: uppercase;
}
.ksf-kat .anfrage a.knopf:hover { background: #04416f; }

/* ---------------------------------------------------------- Querverweise */
.ksf-kat-weitere { margin: 0 0 40px; }
.ksf-kat-weitere h2 { color: #07589b; font-size: 1.4rem; margin: 0 0 16px; }
.ksf-kat-weitere .liste { display: flex; flex-wrap: wrap; gap: 10px; }
.ksf-kat-weitere .liste a {
  border: 2px solid #07589b;
  color: #07589b;
  font-size: .88rem;
  font-weight: 700;
  padding: 9px 18px;
  text-decoration: none !important;
}
.ksf-kat-weitere .liste a:hover { background: #07589b; color: #fff; }

/* ---------------------------------------------------------- Schmale Bildschirme */
@media (max-width: 1024px) {
  .ksf-kat-raster { grid-template-columns: repeat(2, 1fr); }
  .ksf-kat .merkmale { grid-template-columns: 1fr; }
}
@media (max-width: 660px) {
  .ksf-kat-raster { grid-template-columns: 1fr; }
  .ksf-kat .hero { padding: 108px 20px 44px; }
  .ksf-kat .hero h1 { font-size: 1.9rem; }
}

/* Abschnitts-Überschriften zentriert - so wie die Überschriften des
   Geräte-Layouts darüber und darunter ("Zubehör", "Reinigung & Wartung"). */
.ksf-kat .abschnitt h2 { text-align: center; }

/* Symbole in den Merkmalkästen (inc/symbole.php).
   Farbe kommt über currentColor aus der Textfarbe des Kastens. */
.ksf-kat .merkmale .ksf-symbol {
  color: #07589b;
  display: block;
  height: 44px;
  margin: 0 0 14px;
  width: 44px;
}