/* ---------- Grundlagen ---------- */
:root {
  --color-bg: #faf9f6;
  --color-surface: #ffffff;
  --color-text: #22261f;
  --color-muted: #5b6156;
  --color-primary: #d9531e;   /* warmes Orange – gut lesbar, nicht markengebunden */
  --color-primary-dark: #b8451a;
  --color-accent: #3f5b3a;    /* gedecktes Grün – Forst/Garten-Bezug */
  --color-border: #e4e1d8;
  --radius: 10px;
  --max-width: 1100px;
  font-size: 16px;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
}

a { color: var(--color-primary-dark); }
img { max-width: 100%; display: block; }

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

/* ---------- Header ---------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo-full {
  height: 92px;
  width: auto;
  max-width: 100%;
  display: block;
}

@media (max-width: 640px) {
  .brand-logo-full { height: 62px; }
}

/* ---------- Hauptnav hinter Hamburger-Button ----------
   Die Navigation ist nicht mehr staendig als Leiste sichtbar, sondern klappt ueber den
   Drei-Striche-Button links im Header als Panel auf (auf Matthias' Wunsch, nicht nur auf
   Mobilgeraeten -- siehe nav-hamburger.js). */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 40px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
}

.nav-hamburger:hover { border-color: var(--color-primary); }

.nav-hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-hamburger:hover .nav-hamburger-bar { background: var(--color-primary); }

.header-nav-row { position: relative; }

.header-nav-row.nav-open .nav-hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-nav-row.nav-open .nav-hamburger-bar:nth-child(2) { opacity: 0; }
.header-nav-row.nav-open .nav-hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

nav.main-nav {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  max-width: calc(100vw - 40px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  padding: 14px;
  z-index: 25;
}

.header-nav-row.nav-open nav.main-nav { display: block; }

nav.main-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}

nav.main-nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
}

nav.main-nav a:hover,
nav.main-nav a.active { color: var(--color-primary); background: var(--color-bg); }

/* ---------- "Forst- und Gartenmaschinen"-Dropdown in der Hauptnav ---------- */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 10px;
  margin: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  text-align: left;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active,
.nav-dropdown.is-open .nav-dropdown-toggle { color: var(--color-primary); background: var(--color-bg); }

.nav-dropdown-caret {
  font-size: .65em;
  transition: transform .15s;
}

.nav-dropdown.is-open .nav-dropdown-caret { transform: rotate(180deg); }

/* Selektor bewusst mit .main-nav vorangestellt (hoehere Spezifitaet als "nav.main-nav ul"
   weiter oben in dieser Datei) -- sonst gewinnt dessen "display: flex" und das Menue ist
   staendig sichtbar, egal ob is-open gesetzt ist. */
.main-nav .nav-dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  z-index: 20;
}

/* Unsichtbare Bruecke ueber die 14px-Luecke zwischen Button und Menue, damit die Maus
   beim Runterziehen vom Button zum Menue nicht "durchfaellt" und das Hover abbricht. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.main-nav .nav-dropdown.is-open .nav-dropdown-menu { display: flex; }

.nav-dropdown-menu a,
.nav-dropdown-submenu-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: .95rem;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active,
.nav-dropdown-submenu-menu a:hover,
.nav-dropdown-submenu-menu a.active {
  background: var(--color-bg);
  color: var(--color-primary);
}

/* "Kränzle"/"Husqvarna" etc. im Wasser- und Reinigungstechnik-Dropdown: eigene Marken als
   aufklappbare Eintraege nebeneinander, jede mit einem eigenen Untermenue, das rechts
   daneben aufklappt (Flyout) -- so bleiben mehrere Marken auf einen Blick sichtbar, statt
   sich in die Hoehe zu stapeln. Verhalten wie beim Haupt-Dropdown: mit der Maus drueber ->
   klappt auf, raus -> klappt automatisch wieder zu (siehe nav-dropdown.js). */
.nav-dropdown-submenu { position: relative; }

.nav-dropdown-subtoggle {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 10px;
  margin: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
}

.nav-dropdown-subtoggle:hover,
.nav-dropdown-submenu.is-open .nav-dropdown-subtoggle,
.nav-dropdown-subtoggle.active {
  background: var(--color-bg);
  color: var(--color-primary);
}

.nav-dropdown-subcaret {
  font-size: .65em;
}

/* .main-nav vorangestellt aus demselben Grund wie bei .nav-dropdown-menu oben: sonst
   gewinnt "nav.main-nav ul { display: flex }" weiter oben und das Untermenue ist staendig
   sichtbar, egal ob is-open gesetzt ist. Als eigene Box rechts daneben (Flyout), nicht mehr
   eingerueckt darunter -- gleiche Optik wie das Hauptmenue (Hintergrund/Rahmen/Schatten). */
.main-nav .nav-dropdown-submenu-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: -8px;
  left: calc(100% + 6px);
  min-width: 210px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  z-index: 21;
}

/* Unsichtbare Bruecke ueber die 6px-Luecke zwischen Marken-Eintrag und Flyout, damit die
   Maus beim seitlichen Reinfahren nicht "durchfaellt" und das Hover abbricht (analog zur
   senkrechten Bruecke beim Hauptmenue oben). */
.nav-dropdown-submenu-menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  width: 6px;
}

.main-nav .nav-dropdown-submenu.is-open .nav-dropdown-submenu-menu { display: flex; }

/* Falls rechts nicht genug Platz ist (schmales Fenster), klappt das Flyout stattdessen
   nach links auf -- per JS (nav-dropdown.js) anhand der tatsaechlichen Fensterbreite
   erkannt und mit dieser Klasse umgeschaltet. */
.nav-dropdown-submenu.flyout-left .nav-dropdown-submenu-menu {
  left: auto;
  right: calc(100% + 6px);
}

.nav-dropdown-submenu.flyout-left .nav-dropdown-submenu-menu::before {
  left: auto;
  right: -6px;
}

/* Auf schmalen Bildschirmen (Handy) reicht der Platz oft weder rechts noch links fuer das
   seitliche Flyout oben -- das Marken-Untermenue (z. B. "Husqvarna" unter "Baugeraete")
   klappt hier stattdessen eingerueckt darunter auf statt zur Seite, damit auf dem Handy
   nichts abgeschnitten wird oder in die falsche Richtung aufklappt. */
@media (max-width: 640px) {
  .main-nav .nav-dropdown-submenu-menu,
  .main-nav .nav-dropdown-submenu.flyout-left .nav-dropdown-submenu-menu {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin: 2px 0 6px 14px;
    box-shadow: none;
  }

  .nav-dropdown-submenu-menu::before,
  .main-nav .nav-dropdown-submenu.flyout-left .nav-dropdown-submenu-menu::before {
    display: none;
  }
}

.nav-dropdown-placeholder {
  padding: 8px 10px;
  font-size: .9rem;
  font-style: italic;
  color: var(--color-muted);
  white-space: nowrap;
}

.nav-dropdown-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--color-border);
}

.header-top { padding-bottom: 10px; }

.header-nav-row {
  padding-top: 0;
  padding-bottom: 16px;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-left: auto;
}

.header-tagline {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .header-tagline { display: none; }
}

.header-cta {
  padding: 10px 18px;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.header-cta.is-active { background: var(--color-primary-dark); }

/* ---------- Hero / Bilder-Slider ---------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Foto als Hintergrund, halbtransparenter Grün-Verlauf obendrüber -- haelt Logos/
     Text auf allen .hero-simple-Balken (Marken-Seiten, Service, Kaufberater, Kontakt,
     Impressum) lesbar, das Foto bleibt aber sichtbar statt komplett zu verschwinden. */
  background:
    linear-gradient(135deg, rgba(63, 91, 58, .84), rgba(44, 64, 40, .84)),
    url('/static/img/header-bg-sunfield.jpg') center 60% / cover no-repeat;
  color: #fff;
  min-height: 320px;
  display: flex;
  align-items: center;
}

.hero.hero-has-slides { min-height: 440px; }
.hero.hero-simple { min-height: 0; }
.marke-logo { display: block; height: 130px; width: auto; }

.hero-kontakt-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.hero-kontakt-icons {
  display: flex;
  gap: 14px;
}
.hero-kontakt-icons svg {
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, .85);
}
@media (max-width: 640px) {
  .hero-kontakt-icons svg { width: 22px; height: 22px; }
}

/* Nur die Startseiten-Hero (kein hero-simple) direkt an die Kopfzeile ansetzen,
   ohne den sonst üblichen main-Abstand nach oben. */
main > .hero:not(.hero-simple) { margin-top: -48px; }

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 15%;
  transform: translateX(-100%);
  transition: transform 1.7s cubic-bezier(.65, 0, .35, 1);
}

.hero-slide.is-active { transform: translateX(0); z-index: 2; }
.hero-slide.is-leaving { transform: translateX(100%); z-index: 2; }

/* Punkte-Navigation unten im Slider -- nur beim Draufzeigen mit der Maus sichtbar,
   per Klick springt man direkt zum jeweiligen Bild. */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 68px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.hero:hover .hero-dots,
.hero:focus-within .hero-dots { opacity: 1; pointer-events: auto; }
.hero-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
}
.hero-dot.is-active { background: #fff; }
@media (max-width: 640px) {
  /* Auf Touch-Geräten gibt es kein Hover -- Punkte dauerhaft anzeigen */
  .hero-dots { opacity: 1; pointer-events: auto; bottom: 44px; }
}

/* Leichter Bogen am unteren Rand des Hero-Bereichs */
.hero-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  z-index: 3;
}

.hero-curve svg { width: 100%; height: 56px; display: block; }
.hero-curve path { fill: var(--color-bg); }

/* Überschrift + Text direkt unter dem Bild-/Farbbereich, nicht mehr darüber --
   damit der Slider ungetrübt und ohne Text durchlaufen kann. */
.intro-hero { padding-top: 34px; }
.intro-hero h1 {
  font-size: 2rem;
  color: var(--color-accent);
  max-width: 700px;
  margin: 0 0 14px;
}
.intro-hero .btn { margin-top: 16px; }

.btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn:hover { background: var(--color-primary-dark); }

.btn-secondary {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

/* ---------- Content sections ---------- */
main { padding: 48px 0 64px; }

section + section { margin-top: 44px; }

h2 {
  font-size: 1.5rem;
  margin: 0 0 18px;
  color: var(--color-accent);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
}

.card h3 { margin-top: 0; color: var(--color-accent); }
.card .price { font-weight: 700; color: var(--color-primary-dark); }

/* Anklickbare Service-Kachel (z. B. "Kettensägenschein" -> Kontaktformular
   vorausgefuellt) -- <a> statt <div>, optisch identisch zur normalen Karte plus
   Hover-Effekt und CTA-Zeile, analog zu .highlight-banner auf der Startseite. */
.card-clickable {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.card-clickable:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.card-cta {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  font-size: .82rem;
  color: var(--color-primary-dark);
}

/* Sprungziel fuer den Kettensägenschein-Link (Service-Seite): scroll-margin-top
   haelt den sticky Header (.site-header) vom Ziel fern, damit die Ueberschrift
   "Kontaktformular" nach dem Sprung sichtbar oben steht statt dahinter zu
   verschwinden. --header-h wird per JS (header-scroll-offset.js) auf die
   tatsaechliche, aktuelle Header-Hoehe gesetzt (die je nach Fensterbreite
   variiert); 160px ist nur der Fallback, falls das Skript einmal nicht laeuft. */
#kontakt-formular {
  scroll-margin-top: var(--header-h, 160px);
}

.brand-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.brand-links a {
  flex: 1 1 160px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-decoration: none;
  font-weight: 700;
  color: var(--color-text);
}

.brand-links a:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.rich { white-space: pre-line; }

/* ---------- Kontakt ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media (max-width: 700px) {
  .contact-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.7rem; }
  .marke-logo { height: 90px; }
  .hero.hero-has-slides { min-height: 320px; }
  .hero-curve svg { height: 34px; }
}

/* ---------- Footer ---------- */
footer {
  position: relative;
  background: linear-gradient(135deg, var(--color-accent), #2c4028);
  color: #d8dad4;
  padding: 30px 0;
  font-size: 0.9rem;
}

/* Leichter Schwung an der oberen Kante des Footers, statt einer geraden Linie
   (analog zur .hero-curve am unteren Rand des Hero-Bereichs) */
.footer-curve {
  position: absolute;
  left: 0;
  right: 0;
  top: -33px;
  line-height: 0;
  z-index: 1;
}
.footer-curve svg { width: 100%; height: 34px; display: block; }
.footer-curve path { fill: var(--color-accent); }

footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

footer a { color: #fff; }

.footer-hours {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #d8dad4;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 8px;
  row-gap: 2px;
}

.footer-hours .hours-day { white-space: nowrap; }
.footer-hours .hours-time { white-space: nowrap; }

.footer-phone { margin-top: 10px; }

.opening-hours-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 8px;
  row-gap: 4px;
}

.opening-hours-grid .hours-day { white-space: nowrap; font-weight: 600; }
.opening-hours-grid .hours-time { white-space: nowrap; }

/* Auf schmalen Handys reicht die Breite oft nicht fuer Tag + Uhrzeit nebeneinander mit
   "nowrap" (z. B. "Montag–Mittwoch: 08:00–12:00 Uhr & 13:00–18:00 Uhr") -- das würde die
   ganze Seite seitlich aufreissen. Darum hier je Zeile untereinander statt nebeneinander,
   und der Text darf umbrechen. */
@media (max-width: 480px) {
  .footer-hours,
  .opening-hours-grid {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .footer-hours .hours-day,
  .footer-hours .hours-time,
  .opening-hours-grid .hours-day,
  .opening-hours-grid .hours-time {
    white-space: normal;
  }
}

/* ---------- Admin ---------- */
.admin-body { background: #f2f1ec; }

.admin-header {
  background: var(--color-text);
  color: #fff;
  padding: 16px 0;
}

.admin-header .container { display: flex; justify-content: space-between; align-items: center; }
.admin-header a { color: #fff; text-decoration: none; }

.admin-wrap { max-width: 900px; margin: 30px auto; padding: 0 20px; }

.login-box {
  max-width: 360px;
  margin: 80px auto;
  background: #fff;
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.field input[type=text],
.field input[type=password],
.field input[type=email],
.field input[type=tel],
.field input[type=file],
.field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}
.field textarea { min-height: 90px; resize: vertical; }

.error-msg { background: #fdeceb; color: #a3271b; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; }

.page-block-group {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.page-block-group h3 { margin-top: 0; text-transform: capitalize; }

.block-item { border-top: 1px solid var(--color-border); padding: 14px 0; }
.block-item:first-of-type { border-top: none; }
.block-item .save-btn { margin-top: 8px; font-size: 0.85rem; padding: 7px 16px; }
.current-image { max-width: 160px; border-radius: 6px; margin-bottom: 8px; border: 1px solid var(--color-border); }

table.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
table.admin-table th, table.admin-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 10px 12px;
  text-align: left;
  font-size: 0.9rem;
  vertical-align: top;
}
table.admin-table input, table.admin-table textarea { width: 100%; }
.small-btn { font-size: 0.8rem; padding: 6px 12px; }
.danger { background: #a3271b; }
.danger:hover { background: #7c1d13; }

/* ---------- Sortiment: Kategorien + Produkte ---------- */
/* auto-fill statt auto-fit: bei "auto-fit" wuerden leere Spalten in der Berechnung
   kollabieren und ihren Platz an die vorhandenen Kacheln verteilen -- bei nur einer
   Kategorie (z. B. Kehrmaschinen) wuerde die einzelne Kachel dann auf volle Breite
   aufgeblasen. "auto-fill" behaelt die leeren Spalten bei, sodass jede Kachel unabhaengig
   von der Gesamtzahl immer dieselbe Groesse hat (wie bei mehreren Kategorien, z. B.
   Industriestaubsauger). */
.cat-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}

.cat-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

.cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-surface);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  text-align: left;
}

.cat-btn:hover { background: #f5f4ee; }

.cat-btn::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-primary);
  transition: transform .2s ease;
}

.cat-btn.is-open::after { transform: rotate(45deg); }

.cat-btn-image {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

.cat-btn-media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #e9e7de;
}

/* Wenn die Kategorie aufgeklappt ist, wird der ganze Block volle Breite --
   das Vorschaubild soll dann aber nicht riesig mitwachsen, sondern klein
   und mittig bleiben (die einzelnen Produktfotos darunter zeigen ohnehin
   schon alle Modelle im Detail). */
.cat-btn.is-open .cat-btn-media {
  max-width: 260px;
  margin: 0 auto;
}

.cat-btn-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  display: block;
}

.cat-btn-label {
  display: flex;
  align-items: center;
  padding: 10px 32px 10px 14px;
  font-size: .92rem;
}

.cat-btn-image .cat-count { margin-right: 0; }

.cat-btn-image::after {
  position: absolute;
  right: 14px;
  bottom: 15px;
  font-size: 1.2rem;
}

.cat-count {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-muted);
  padding: 2px 10px;
  margin-right: auto;
  margin-left: 12px;
}

.cat-panels {
  margin-top: 14px;
}

.cat-products {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.cat-products[hidden] { display: none; }

.cat-empty {
  color: var(--color-muted);
  font-size: .9rem;
  padding-top: 16px;
}

.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 16px;
}

.filter-btn {
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: .88rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.filter-btn:hover { border-color: var(--color-accent); }

.filter-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.product-card {
  display: flex;
  gap: 18px;
  padding-top: 18px;
  flex-wrap: wrap;
}
.product-card[hidden] { display: none; }

.product-media {
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
}

.product-img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-bg);
  display: block;
}

.product-img[data-gallery]:hover { opacity: .88; }

.product-img-count {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .72rem;
  pointer-events: none;
}

.product-info { flex: 1 1 220px; min-width: 200px; }
.product-info h4 { margin: 0 0 8px; color: var(--color-text); }

.specs {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: .88rem;
  color: var(--color-muted);
}

.specs li { margin-bottom: 2px; }

.product-info p { margin: 0; font-size: .92rem; }

/* ---------- Modell-Auswahl (z. B. Herkules Einachser): links Modell-Liste,
   rechts Bild + Daten des gewaehlten Modells, darunter dessen Zubehoer. ---------- */
.cat-products.model-picker {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  padding: 22px;
}

.model-picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 220px;
  border-right: 1px solid var(--color-border);
  padding-right: 18px;
}

.model-picker-heading {
  margin: 0 0 4px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
}

.model-picker-btn {
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .92rem;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.model-picker-btn:hover { background: #f5f4ee; }

.model-picker-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

.model-picker-details { flex: 1 1 auto; min-width: 0; }

.model-detail[hidden] { display: none; }

.model-detail-main {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.model-accessories {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.model-accessories h5 {
  margin: 0 0 12px;
  color: var(--color-accent);
  font-size: .95rem;
}

.accessory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
}

.accessory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.accessory-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}

.accessory-card span {
  font-size: .78rem;
  color: var(--color-muted);
  line-height: 1.3;
}

/* ---------- Online-Kaufberater ---------- */
.kb-wizard { margin-top: 8px; }

.kb-breadcrumb {
  font-size: .9rem;
  color: var(--color-muted);
  margin: 0 0 18px;
}

.kb-step h2 { margin-top: 0; }

.kb-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.kb-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  padding: 14px 20px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.kb-option-btn:hover { border-color: var(--color-accent); background: #f5f4ee; }

.kb-count {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-muted);
  padding: 2px 10px;
}

.kb-link-btn {
  background: none;
  border: none;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  padding: 0;
  margin-top: 18px;
}
.kb-link-btn:hover { text-decoration: underline; }

.kb-results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.kb-results-head h2 { margin: 0; }
.kb-results-head .kb-link-btn { margin-top: 0; }

.kb-results-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kb-area-hint {
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: .85rem;
  margin: 2px 0 8px;
}

.kb-success-note {
  background: #eef6ea;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 20px;
}
.kb-success-note p { margin: 0; color: var(--color-primary-dark); font-weight: 600; }

.kb-question {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}
.kb-question h2 { margin-bottom: 4px; }
.kb-question form { margin-top: 14px; max-width: 560px; }
.kb-question textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  margin-bottom: 12px;
}

.kb-faq {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}
.kb-faq h2 { margin-bottom: 16px; }

/* ---------- Kontaktformular + Karte (Kontakt-Seite) ---------- */
.contact-form-section {
  margin: 20px auto 0;
  max-width: 560px;
}
.contact-form-privacy {
  font-size: .85rem;
  font-style: italic;
  color: var(--color-muted);
  margin: 4px 0 18px;
}
.contact-form-privacy a { color: var(--color-primary-dark); }

.contact-map {
  margin-top: 40px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  line-height: 0;
}
.contact-map iframe { width: 100%; height: 360px; border: 0; display: block; }

.kb-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kb-result-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 18px;
}

.kb-brand-badge {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.kb-more-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
}
.kb-more-link:hover { text-decoration: underline; }

/* ---------- Kränzle-Produktberater (eigener, kleiner Assistent -- produktberater.html/.js) ---------- */
.pb-big-btn {
  font-size: 1.1rem;
  padding: 18px 26px;
}

.pb-hint {
  font-weight: 400;
  color: var(--color-muted);
  font-size: .85em;
}

/* Ergebnis-Kacheln sind hier ganzflaechig anklickbare Links (statt nur der kleine
   "Mehr ansehen"-Link wie beim allgemeinen Kaufberater) -- Standard-Link-Optik zuruecksetzen,
   .kb-result-card/.product-card liefern das eigentliche Kachel-Aussehen bereits mit. */
a.pb-result-card {
  color: inherit;
  text-decoration: none;
  display: flex;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
a.pb-result-card:hover {
  border-color: var(--color-accent);
  background: #f5f4ee;
}
a.pb-result-card .kb-more-link { pointer-events: none; }

@media (max-width: 480px) {
  .cat-btn { padding: 14px 16px; font-size: 1rem; }
  .cat-products { padding: 16px; }
  .product-img { width: 100%; height: 160px; }
  .product-media { width: 100%; }
}

@media (max-width: 640px) {
  .cat-products.model-picker { flex-direction: column; }
  .model-picker-list {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-right: 0;
    padding-bottom: 14px;
    width: 100%;
  }
  .model-picker-heading { flex: 1 1 100%; }
  .model-picker-btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- Impressum / Datenschutz ---------- */
.legal-text h2 {
  margin-top: 28px;
  font-size: 1.05rem;
}
.legal-text h2:first-child { margin-top: 0; }
.legal-text p { margin: 8px 0 0; }

/* ---------- Footer-Links (Impressum/Datenschutz/Cookies) ---------- */
.footer-legal {
  margin-top: 10px;
  font-size: .85rem;
}
.footer-legal a {
  color: inherit;
  opacity: .85;
  text-decoration: underline;
}
.footer-legal a:hover { opacity: 1; }
.footer-legal .sep { margin: 0 8px; opacity: .6; }

/* ---------- Cookie-Banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.12);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p {
  margin: 0;
  font-size: .88rem;
  max-width: 720px;
  color: var(--color-text);
}
.cookie-banner p a { color: var(--color-accent); }
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookie-modal[hidden] { display: none; }
.cookie-modal-box {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
}
.cookie-modal-box h3 { margin-top: 0; }
.cookie-option {
  display: block;
  margin: 12px 0;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: flex-end; }
}


/* ---------- Bedienungsanleitungen (Service-Seite) ---------- */
.manual-search {
  width: 100%;
  max-width: 420px;
  padding: 10px 14px;
  font-size: .95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: 10px 0 20px;
  display: block;
}
.manual-search:focus {
  outline: none;
  border-color: var(--color-accent);
}

.manual-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color .15s;
}
.manual-item[hidden] { display: none; }
.manual-item:hover { border-color: var(--color-accent); }

.manual-brand {
  font-weight: 700;
  color: var(--color-accent);
  min-width: 130px;
}
.manual-name { flex: 1 1 auto; }
.manual-download {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  white-space: nowrap;
}

.manual-no-match[hidden] { display: none; }

/* Lightbox / Großansicht für Produktbilder */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }

.lightbox-img {
  max-width: 88vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .25); }

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-arrow:hover { background: rgba(255, 255, 255, .25); }
.lightbox-arrow[hidden] { display: none; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

.lightbox-count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .82rem;
}
.lightbox-count[hidden] { display: none; }

@media (max-width: 600px) {
  .lightbox-arrow { width: 42px; height: 42px; font-size: 1.1rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 10px; right: 12px; width: 38px; height: 38px; font-size: 1.5rem; }
  .lightbox-img { max-width: 94vw; max-height: 80vh; }
}


/* ---------- Highlight-Banner (Startseite, unter dem Slider) ----------
   Auf Matthias' Wunsch koennen hier mehrere Highlights nebeneinander stehen (siehe
   HOMEPAGE_HIGHLIGHTS in public.py) -- daher .highlight-grid als Grid-Container und die
   Karten selbst als kompakte, senkrechte Cards (Bild oben, Text darunter) statt der
   urspruenglichen breiten Reihe, damit auch bei zwei Karten nebeneinander noch genug
   Platz fuer Bild und Text bleibt. */
.highlight-section { margin-bottom: 40px; }

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 940px;
  margin: 0 auto;
}

.highlight-banner {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
  /* Die Video-Kachel ist ein <button> statt eines <a> (oeffnet die Lightbox statt zu
     verlinken) -- Reset der Button-Vorgaben, damit sie optisch nicht von den anderen
     Highlight-Karten abweicht. Bei <a>-Elementen sind das No-Ops. */
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.highlight-banner:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.highlight-banner-media {
  position: relative;
  height: 236px; /* ca. 2 cm hoeher als zuvor (160px), auf Matthias' Wunsch */
  flex-shrink: 0;
  background: #1c1f19;
  display: block;
}

.highlight-banner-media img,
.highlight-banner-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.highlight-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-primary);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .64rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.highlight-banner-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 14px 14px;
}

.highlight-banner-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-accent);
}

.highlight-banner-teaser {
  color: var(--color-muted);
  font-size: .82rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.highlight-banner-cta {
  margin-top: 1px;
  font-weight: 700;
  font-size: .82rem;
  color: var(--color-primary-dark);
}

/* ---------- Lieferanten (Startseite, zwischen Highlights/Video und "Beliebte
   Leistungen", auf Matthias' Wunsch) ----------
   Die Logo-Dateien kommen in ganz unterschiedlichen Formaten (breite Banner, quadratisch,
   Hochformat) -- damit sie trotzdem einheitlich wirken, bekommt jedes Logo eine gleich
   grosse Karte mit fester Hoehe; object-fit: contain skaliert das jeweilige Logo
   proportional hinein, ohne es zu verzerren oder abzuschneiden. Ueberschrift auf
   Matthias' Wunsch mittig statt (wie sonst auf der Seite) linksbuendig. */
.lieferanten-section { margin-bottom: 40px; }

.lieferanten-section h2 { text-align: center; }

.lieferanten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.lieferanten-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px;
}

.lieferanten-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---------- Neuigkeiten (Startseite) ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}

.news-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.news-tile:hover { border-color: var(--color-primary); }

.news-tile-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: #1c1f19;
}

.news-tile-thumb img,
.news-tile-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  background: rgba(0, 0, 0, .25);
}

.news-tile-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-accent);
}

/* ---------- Aktionen (Startseite, ersetzt "Unsere Marken") ---------- */
.aktion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.aktion-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.aktion-tile-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #1c1f19;
}

.aktion-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aktion-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-primary);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .64rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.aktion-tile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}

.aktion-tile-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-accent);
}

.aktion-tile-desc {
  color: var(--color-muted);
  font-size: .85rem;
}

.news-lightbox-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 88vw;
}

.news-lightbox-media video,
.news-lightbox-media img { max-height: 74vh; }

.news-lightbox-title {
  margin: 0;
  color: #fff;
  font-size: 1.1rem;
  text-align: center;
}

.news-lightbox-description {
  margin: 0;
  color: #d8dad4;
  font-size: .9rem;
  text-align: center;
  max-width: 60ch;
}

.news-lightbox-description[hidden] { display: none; }