/* ============================================================
   HWB Hardware-Börse – Stylesheet (Neufassung 2.0)
   ------------------------------------------------------------
   LEITPRINZIP
   Wir arbeiten MIT ListingHive, nicht dagegen. Das Theme bringt ein
   erprobtes, responsives Layout mit. Wir ändern deshalb nur:
     · Farben (Marke)      · Typografie (Arial)
     · Abstände/Rundungen  · Kleinigkeiten (z. B. „Mitglied seit" weg)

   Was wir bewusst NICHT tun (das hat zuvor Probleme verursacht):
     · kein display:flex/grid auf Theme-Komponenten erzwingen
     · keine Spaltenbreiten/Höhen überschreiben
     · keine font-size:0-Tricks
     · keine position-Manipulation (Sticky wird in functions.php
       sauber deaktiviert, nicht per CSS bekämpft)
   ============================================================ */

:root {
  --hwb-green:      #639A00;
  --hwb-green-dark: #527F00;
  --hwb-green-tint: #EAF3DE;
  --hwb-ink:        #3B3B3B;
  --hwb-ink-soft:   #6B6F68;
  --hwb-line:       #E7E9E3;
  --hwb-surface:    #FFFFFF;
  --hwb-surface-2:  #F7F8F5;
  --hwb-radius:     14px;
  --hwb-radius-sm:  10px;
  --hwb-shadow:     0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.05);
}

/* ============================================================
   1) Typografie – Arial überall, auch in Überschriften
   ============================================================ */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, label, strong, time,
button, input, select, textarea,
.site-title, .site-description {
  font-family: Arial, Helvetica, sans-serif !important;
}

body { color: var(--hwb-ink); line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { color: var(--hwb-ink); letter-spacing: -0.01em; }

/* ============================================================
   2) Kopf-/Fußzeile
   ============================================================ */
.site-header { border-bottom: 1px solid var(--hwb-line); }
.site-footer { border-top: 1px solid var(--hwb-line); }

/* ---------- Kopfzeilenmenü: Einträge nebeneinander ----------
   ListingHive definiert für diesen Container keine Anordnung. Solange
   nur ein Eintrag darin lag, fiel das nicht auf. Diese Regel ergänzt
   die fehlende Angabe – sie überschreibt nichts vom Theme. */
.hp-menu--site-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Kopfzeilen-Buttons (Snippet 25) ----------
   Beide Buttons tragen die Theme-Klassen „button button--secondary".
   Größe, Hintergrund und Rundung kommen damit von ListingHive selbst –
   hier werden bewusst KEINE Maße gesetzt, sonst wichen sie wieder ab.

   Die Textfarbe muss allerdings gesetzt werden: Die Links stehen im
   Navigationsmenü, dessen Farbregel sonst gewinnt (grauer Text). */
.hwb-navbtn-item { list-style: none; }
.hwb-navbtn,
.hwb-navbtn:link,
.hwb-navbtn:visited,
.hwb-navbtn:hover,
.hwb-navbtn:focus {
  color: #fff !important;
  text-decoration: none !important;
}
.hwb-navbtn {
  display: inline-block;
  white-space: nowrap;
}
.hwb-navbtn i {
  margin-right: .5rem;
  color: #fff !important;
}

/* Für Abgemeldete erzeugt Snippet 25 beide Buttons selbst –
   der Original-Bereich des Themes würde ihn sonst doppeln. */
.hwb-abgemeldet .header-navbar__actions { display: none; }

/* In der Fußzeile werden die Buttons nicht benötigt. */
.footer-navbar .hwb-navbtn-item { display: none; }

/* Im aufgeklappten Burger-Menü als volle Zeile */
.header-navbar__burger .hwb-navbtn { display: block; text-align: center; }

@media (max-width: 782px) {
  .hp-menu--site-header { gap: 6px; }
}

/* ---------- Fußzeile: Kontakt + Rechtliches (Snippet 19) ---------- */
.hwb-footer {
  padding: 40px 0 8px;
}
.hwb-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 32px;
  align-items: start;
}
.hwb-footer__title {
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--hwb-ink);
  margin: 0 0 12px !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--hwb-green);
  display: inline-block;
}
.hwb-footer__address,
.hwb-footer__contact,
.hwb-footer__note {
  font-style: normal;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--hwb-ink-soft);
  margin: 0 0 10px;
}
.hwb-footer__address strong { color: var(--hwb-ink); }
.hwb-footer__contact a { color: var(--hwb-green-dark); text-decoration: none; }
.hwb-footer__contact a:hover { text-decoration: underline; }

.hwb-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hwb-footer__links li { margin-bottom: 8px; }
.hwb-footer__links a {
  color: var(--hwb-ink-soft);
  text-decoration: none;
  font-size: .9rem;
}
.hwb-footer__links a:hover { color: var(--hwb-green-dark); text-decoration: underline; }

@media (max-width: 600px) {
  .hwb-footer { padding: 28px 0 4px; }
  .hwb-footer__inner { gap: 24px; }
}

/* ============================================================
   3) Formulare – grüner Fokusring, weiche Ecken
   ============================================================ */
.hp-form input,
.hp-form select,
.hp-form textarea {
  border-radius: var(--hwb-radius-sm);
}
.hp-form input:focus,
.hp-form select:focus,
.hp-form textarea:focus {
  border-color: var(--hwb-green);
  box-shadow: 0 0 0 3px rgba(99,154,0,.18);
  outline: none;
}

/* ============================================================
   4) Anzeigen-Karten (Übersicht) – nur Optik, kein Layout
   ============================================================ */
.hp-listing {
  border-radius: var(--hwb-radius);
  overflow: hidden;
}
.hp-listing__attribute--price {
  color: var(--hwb-green-dark);
  font-weight: 700;
}

/* ============================================================
   5) Anzeigen-Detailseite
   ------------------------------------------------------------
   Nur Innenabstand, Typo und Kartenoptik. Keine Struktureingriffe.
   ============================================================ */

/* Etwas Luft im Inhalt (klebte vorher am Rand) */
.hp-listing--view-page .hp-page__content { padding: 28px 30px 32px; }

/* Kategorie als grüne Pille */
.hp-listing--view-page .hp-listing__categories { margin-bottom: 12px; }
.hp-listing--view-page .hp-listing__categories a {
  display: inline-block;
  background: var(--hwb-green-tint);
  color: var(--hwb-green-dark);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
}

/* Titel prominent */
.hp-listing--view-page .hp-listing__title {
  font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.15rem);
  font-weight: 700; line-height: 1.2; margin: 0 0 8px;
}
.hp-listing--view-page .hp-listing__created-date {
  color: var(--hwb-ink-soft); font-size: .85rem;
}

/* Preis groß und grün */
.hp-listing--view-page .hp-listing__attribute--price { font-size: 1.6rem; }

/* Merkmale: dezente Fläche mit Trennlinien (Raster bleibt vom Theme) */
.hp-listing__attributes--secondary {
  background: var(--hwb-surface-2);
  border: 1px solid var(--hwb-line);
  border-radius: var(--hwb-radius);
  padding: 6px 20px;
  margin-bottom: 20px;
}
.hp-listing__attributes--secondary .hp-listing__attribute {
  padding: 12px 0;
  font-size: .95rem;
}
.hp-listing__attributes--secondary .hp-listing__attribute strong {
  color: var(--hwb-ink-soft);
}

/* Beschreibung mit Überschrift */
.hp-listing__description {
  background: var(--hwb-surface-2);
  border: 1px solid var(--hwb-line);
  border-radius: var(--hwb-radius);
  padding: 20px 22px;
  line-height: 1.7;
}
.hp-listing__description::before {
  content: "Beschreibung";
  display: block; font-weight: 700; font-size: 1.02rem;
  color: var(--hwb-ink); margin-bottom: 10px;
}

/* ------------------------------------------------------------
   Seitenspalte: Kontaktdaten · Button · Verkäufer
   Nur Kartenoptik und Abstand – ListingHive bestimmt den Aufbau.
   ------------------------------------------------------------ */
.hp-listing--view-page .hp-page__sidebar .widget,
.hp-listing--view-page .hp-page__sidebar .hp-vendor {
  border-radius: var(--hwb-radius);
}

/* Kontaktdaten: Werte dürfen umbrechen, Beschriftung dezent */
.hp-listing__attributes--primary .hp-listing__attribute {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}
.hp-listing__attributes--primary .hp-listing__attribute strong {
  color: var(--hwb-ink-soft);
}
.hp-listing__attributes--primary a { color: var(--hwb-green-dark); }
.hp-listing__attributes--primary a:hover { text-decoration: underline; }

/* Hauptbutton „Nachricht senden" – volle Breite, gut greifbar */
.hp-listing__action--message {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: var(--hwb-radius-sm);
  font-weight: 700;
}

/* „Mitglied seit …" überall entfernen */
.hp-vendor__registered-date,
.hp-vendor__attribute--registered { display: none !important; }

/* Verkäufername darf umbrechen, statt die Karte zu sprengen */
.hp-vendor__name { overflow-wrap: anywhere; }

/* Chatblase im Anbieterprofil samt abgetrenntem Bereich entfernen –
   die Kontaktaufnahme läuft über den Button „Nachricht senden".
   (Nur auf der Anzeigenseite; im Anbieterprofil selbst bleibt sie.) */
.hp-listing--view-page .hp-vendor__footer { display: none !important; }

/* Karte dadurch etwas kompakter */
.hp-listing--view-page .hp-vendor--view-block { padding-bottom: 22px; }

/* ============================================================
   5b) Seite „Verfahrensanleitung"
   ------------------------------------------------------------
   Die Nummern der Schritte erzeugt CSS automatisch (counter).
   Dadurch bleiben alle Blöcke im Editor normal bearbeitbar –
   und beim Umsortieren stimmt die Nummerierung weiterhin.
   ============================================================ */
.hwb-guide__lead {
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--hwb-ink-soft);
  max-width: 68ch;
}

/* ---- Ablauf-Schritte ---- */
.hwb-steps {
  counter-reset: hwb-step;
  display: grid;
  gap: 14px;
  margin: 24px 0 40px;
}
.hwb-step {
  counter-increment: hwb-step;
  position: relative;
  background: var(--hwb-surface);
  border: 1px solid var(--hwb-line);
  border-radius: var(--hwb-radius);
  box-shadow: var(--hwb-shadow);
  padding: 20px 22px 20px 74px;
}
/* Nummernkreis */
.hwb-step::before {
  content: counter(hwb-step);
  position: absolute;
  top: 20px;
  left: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hwb-green);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50%;
}
.hwb-step h3 {
  font-size: 1.08rem !important;
  margin: 0 0 6px !important;
}
.hwb-step p { margin: 0; color: var(--hwb-ink-soft); }
.hwb-step p + p { margin-top: 8px; }

/* ---- Hinweiskästen ---- */
.hwb-note {
  background: var(--hwb-surface-2);
  border: 1px solid var(--hwb-line);
  border-left: 4px solid var(--hwb-green);
  border-radius: 0 var(--hwb-radius) var(--hwb-radius) 0;
  padding: 18px 22px;
  margin: 0 0 16px;
}
.hwb-note h3 {
  font-size: 1.05rem !important;
  margin: 0 0 8px !important;
}
.hwb-note p { margin: 0; color: var(--hwb-ink-soft); }
.hwb-note p + p { margin-top: 10px; }

/* Warnvariante: bernsteinfarben, damit sie auffällt */
.hwb-note--warn {
  background: #FDF6E7;
  border-color: #F0DFB8;
  border-left-color: #C77700;
}
.hwb-note--warn h3 { color: #8A5300 !important; }

@media (max-width: 600px) {
  .hwb-step { padding: 58px 18px 18px; }
  .hwb-step::before { top: 16px; left: 18px; }
}

/* ============================================================
   6) Nachrichten (HivePress Messages)
   ============================================================ */
.hp-menu--user-account .hp-menu__item--current a {
  color: var(--hwb-green-dark);
  font-weight: 700;
}
.hp-message {
  border-radius: var(--hwb-radius);
}

/* ============================================================
   7) Block-Muster (Hero + Kategorie-Kacheln der Startseite)
   ============================================================ */
/* ---------- Hero-Banner ---------- */
.hwb-hero {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  /* Farbverlauf statt einer flachen Fläche */
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 80% at 85% 100%, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(135deg, #7CB800 0%, var(--hwb-green) 45%, #4E7A00 100%);
}
/* Dezente Lichtkante oben */
.hwb-hero::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: rgba(255,255,255,.35);
}
.hwb-hero__title { color: #fff !important; letter-spacing: -0.02em; }
.hwb-hero__sub {
  color: rgba(255,255,255,.92) !important;
  max-width: 52ch; margin-left: auto; margin-right: auto;
}

/* ---------- Helle Hero-Variante mit Illustration ----------
   Hintergrundton der Illustration. Falls unter dem Bild eine Kante
   sichtbar ist, diesen Wert an die Bildfarbe anpassen – oder das Bild
   mit transparentem Hintergrund (PNG/SVG) exportieren, dann ist es egal. */
.hwb-hero--light {
  --hwb-hero-bg: #F1F5F8;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--hwb-hero-bg) 62%) !important;
  border-radius: 0 0 28px 28px;
}
.hwb-hero--light::before { display: none; }   /* Lichtkante der grünen Variante aus */

.hwb-hero--light .hwb-hero__title { color: var(--hwb-ink) !important; }
.hwb-hero--light .hwb-hero__sub   { color: var(--hwb-ink-soft) !important; }

/* Suchfeld auf hellem Grund: sichtbarer Rahmen statt starkem Schatten */
.hwb-hero--light .hwb-search {
  border: 1px solid var(--hwb-line);
  box-shadow: 0 6px 20px rgba(16,24,40,.07);
}

/* Illustration: volle Breite, nahtlos am unteren Rand */
.hwb-hero__art {
  margin: 26px 0 0 !important;
}
.hwb-hero__art img {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
}
/* Platzhalter im Editor nicht zu klein darstellen */
.hwb-hero__art .components-placeholder { min-height: 160px; }

/* Suchfeld im Hero */
.hwb-search {
  display: flex; gap: 8px; align-items: stretch;
  max-width: 560px; margin: 0 auto 22px;
  background: #fff; padding: 7px; border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}
.hwb-search__input {
  flex: 1 1 auto; min-width: 0;
  border: 0 !important; background: transparent;
  padding: 12px 18px !important; font-size: 1rem; color: var(--hwb-ink);
  border-radius: 999px !important;
}
.hwb-search__input:focus { outline: none; box-shadow: none !important; }
.hwb-search__btn {
  flex: 0 0 auto;
  background: var(--hwb-green) !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 12px 26px; font-weight: 700; font-size: .98rem; cursor: pointer;
  transition: background .15s ease;
}
.hwb-search__btn:hover { background: var(--hwb-green-dark) !important; }

/* Hero-Buttons */
.hwb-hero__actions { gap: 10px; }
.hwb-btn-light .wp-block-button__link {
  background: #fff !important; color: var(--hwb-green-dark) !important;
  border: 0 !important; font-weight: 700;
}
.hwb-btn-outline .wp-block-button__link {
  background: transparent !important; color: #fff !important;
  border: 2px solid rgba(255,255,255,.85) !important; font-weight: 700;
}
.hwb-btn-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.14) !important;
}

/* Buttons für die helle Hero-Variante */
.hwb-btn-green .wp-block-button__link {
  background: var(--hwb-green) !important; color: #fff !important;
  border: 0 !important; font-weight: 700;
}
.hwb-btn-green .wp-block-button__link:hover { background: var(--hwb-green-dark) !important; }

.hwb-btn-ghost .wp-block-button__link {
  background: #fff !important; color: var(--hwb-ink) !important;
  border: 1px solid var(--hwb-line) !important; font-weight: 700;
}
.hwb-btn-ghost .wp-block-button__link:hover {
  border-color: var(--hwb-green) !important; color: var(--hwb-green-dark) !important;
}

/* ---------- Abschnitte (gleiche Ausrichtung für alle Überschriften) ---------- */
.hwb-section > h2 { margin-left: 0; margin-right: 0; }

/* Kopfzeile über den neuesten Anzeigen */
.hwb-latest__head { margin-bottom: 20px; gap: 12px; }
.hwb-latest__head a { color: var(--hwb-green-dark); text-decoration: none; }
.hwb-latest__head a:hover { text-decoration: underline; }

/* ---------- Kategorie-Kacheln ----------
   Jede Kachel ist ein echter Link (<a class="hwb-tile">) – dadurch ist
   die komplette Fläche klickbar, ohne CSS-Tricks. Das Raster sorgt
   dafür, dass alle Kacheln exakt gleich groß sind. */
.hwb-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.hwb-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 140px;          /* einheitliche Höhe, unabhängig vom Text */
  padding: 20px 14px;
  text-align: center;
  text-decoration: none !important;
  color: var(--hwb-ink) !important;
  background: var(--hwb-surface);
  border: 1px solid var(--hwb-line);
  border-radius: var(--hwb-radius);
  box-shadow: var(--hwb-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hwb-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(99,154,0,.15);
  border-color: rgba(99,154,0,.35);
  color: var(--hwb-green-dark) !important;
}

/* Icon in Markengrün */
.hwb-tile__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  color: var(--hwb-green);
  transition: color .18s ease;
}
.hwb-tile__icon svg { width: 30px; height: 30px; display: block; }
.hwb-tile:hover .hwb-tile__icon { color: var(--hwb-green-dark); }

.hwb-tile__label { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.hwb-tile__count { font-size: .8rem; color: var(--hwb-ink-soft); line-height: 1.2; }

@media (max-width: 520px) {
  .hwb-cats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   8) Mobil
   ============================================================ */
@media (max-width: 900px) {
  .hp-listing--view-page .hp-page__content { padding: 20px 16px 24px; }
}