﻿/* ===============================
   WiMaBi â€“ Gesamt-CSS
   =============================== */

/* Karten-Grid fÃ¼r WP Adverts */
.wpadverts-grid,
.adverts-list .adverts-items,
.adverts-list {
  display: grid !important;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr); /* Desktop: 4 Spalten */
}

/* Sehr breite Bildschirme: weiterhin 4 Spalten */
@media (min-width: 1600px) {
  .wpadverts-grid,
  .adverts-list .adverts-items,
  .adverts-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Laptop */
@media (max-width: 1280px) {
  .wpadverts-grid,
  .adverts-list .adverts-items,
  .adverts-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet */
@media (max-width: 960px) {
  .wpadverts-grid,
  .adverts-list .adverts-items,
  .adverts-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Handy */
@media (max-width: 640px) {
  .wpadverts-grid,
  .adverts-list .adverts-items,
  .adverts-list {
    grid-template-columns: 1fr;
  }
}

/* Floats und feste Breiten neutralisieren */
.wpadverts-grid > .wpadverts-col,
.adverts-list .advert-item {
  float: none !important;
  width: auto !important;
  max-width: none !important;
}

/* =========================
   WiMaBi – Toolsblock (UI)
   ========================= */
:root{ --wmb-primary:#e74c3c; }

.wmb-tools{
  width:100%;
  border:1px solid #e5e7eb; border-radius:12px;
  padding:12px; margin:14px 0; background:#fff;
  box-shadow:0 4px 14px rgba(17,24,39,.06);
}
.wmb-tools-inline{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:nowrap;
}
.wmb-btn{
  display:inline-block; padding:10px 14px; border-radius:10px;
  font-weight:700; border:1px solid transparent; cursor:pointer;
}
.wmb-primary{
  background:var(--wmb-primary) !important;
  color:#fff !important; border-color:var(--wmb-primary) !important;
}
.wmb-primary:hover{ filter:brightness(0.92); }
.wmb-qr{ width:120px; height:120px; flex:0 0 auto; padding:6px; border:1px solid #eee; border-radius:8px; background:#fff; }

@media (max-width:640px){
  .wmb-tools-inline{ flex-wrap:wrap; }
  .wmb-qr{ width:96px; height:96px; }
}
@media print{
  .wmb-tools{ display:none; }
}

/* ===== WiMaBi – PDF/QR UI (jsPDF) ===== */
.wmb-actions{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  margin:16px 0 22px;
}
.wmb-btn{
  display:inline-block; padding:10px 14px; border-radius:10px; font-weight:700;
  text-decoration:none; line-height:1; border:2px solid #111; cursor:pointer;
}
.wmb-btn-primary{ background:#111; color:#fff; }
.wmb-btn-primary:hover{ opacity:.92; }
.wmb-btn-secondary{ background:#fff; color:#111; }

.wmb-qr{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.wmb-qr img{ width:120px; height:120px; object-fit:contain; }
.wmb-qr-caption{ font-size:12px; color:#666; }

/* Print/Export: nur Inhalt, sauber formatiert */
@media print{
  #site-header, #site-navigation, #colophon, #right-sidebar, .sidebar,
  .elementor-location-header, .elementor-location-footer, .wmb-actions { display:none !important; }
  #content, .content-area, .site-main, .container, .wpadverts-single{ width:100% !important; max-width:100% !important; }
  body{ color:#000; }
}
/* ====== Rechte Sidebar als Werbefläche (WiMaBi) ====== */
#right-sidebar .widget-title,
.sidebar .widget-title { display:none; } /* Titel ausblenden */

.wimabi-adbox { 
  background:#fff; border:1px solid #e6e6e6; border-radius:14px; 
  padding:14px; box-shadow:0 2px 8px rgba(0,0,0,.04);
  position:sticky; top:24px; /* Desktop/Tablet sticky */
}
.wimabi-adbox .wmb-ad-h{
  font-size:18px; font-weight:800; margin-bottom:10px; color:#111;
}
.wimabi-adbox img{ width:100%; height:auto; border-radius:10px; display:block; }
.wimabi-adbox p{ font-size:16.5px; line-height:1.55; margin:10px 0 12px; color:#111; }
.wimabi-adbox .wmb-ad-btn{
  display:inline-block; padding:10px 14px; border-radius:10px; 
  background:#111; color:#fff; text-decoration:none; font-weight:700;
}
.wimabi-adbox .wmb-ad-btn:hover{ opacity:.9; }

@media (max-width: 768px){
  .wimabi-adbox { position:static; margin-bottom:18px; } /* mobil NICHT sticky */
}
/* ===== Block 2: Formulare & select2 – Lesbarkeit + Usability ===== */

/* ===== Fix: Eingabefeld-Schriftgröße angleichen ===== */
input.wpadverts-autocomplete-input-search[type=text] {
  font-size:18px !important;   /* wieder wie vorher */
  line-height:1.6 !important;
  padding:6px 10px !important;
}

/* Label in Adverts-Autocomplete */
.wpadverts-mal-ac-label{
  font-size:17px;
  line-height:1.5;
}

/* select2 – Basistypo & Touch-Zielgröße */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple{
  font-size:16px;
  line-height:1.4;
  min-height:44px; /* größerer Tap-Bereich */
}

/* Platz im Single-Select-Text */
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-top:.35rem;
  padding-bottom:.35rem;
}

/* Dropdown immer über dem Rest (Logo/Header etc.) */
.select2-dropdown{
  font-size:16px;
  line-height:1.4;
  z-index:99999;
}

/* Mobile: Breite stabilisieren */
@media (max-width:782px){
  .select2-container{ width:100% !important; max-width:100%; }
}
/* ===== Fix: Wenn genau EINE echte Karte vorhanden ist (trotz Platzhalter) ===== */

/* 1) Liste mit genau einer .wimabi-card: Karte zentrieren & begrenzen */
.adverts-list:has(> .wimabi-card):not(:has(> .wimabi-card ~ .wimabi-card)) {
  justify-content: center !important;            /* Mitte */
  display: grid !important;                      /* falls überschrieben wurde */
}

/* 2) Die eine Karte selbst auf „normale“ Kartengröße begrenzen */
.adverts-list:has(> .wimabi-card):not(:has(> .wimabi-card ~ .wimabi-card)) > .wimabi-card {
  max-width: 360px !important;                   /* gern 340/380 testen */
  width: 100% !important;
  justify-self: center !important;
}

/* Platzhalter bei 1 echter Karte: gleiche Größe wie die Karte */
.adverts-list:has(> .wimabi-card):not(:has(> .wimabi-card ~ .wimabi-card)) > .wimabi-ph-wrap {
  justify-self: center !important;
  max-width: 360px !important;   /* gleiche Breite wie die echte Karte */
  width: 100% !important;
  order: 2 !important;
}

/* 4) Bild konsistent in 4:3 halten (falls das Item vorher hochskaliert) */
.adverts-list:has(> .wimabi-card):not(:has(> .wimabi-card ~ .wimabi-card)) > .wimabi-card .wimabi-card__img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}
/* ===== Block 3: Print/PDF konsolidiert ===== */
@media print {
  /* Alles Unnötige ausblenden */
  header, footer, nav,
  .site-header, .site-footer,
  #site-header, #site-navigation, #colophon,
  #right-sidebar, .sidebar, #secondary,
  .elementor-location-header, .elementor-location-footer,
  .wmb-actions, .wmb-btn {
    display:none !important;
  }

  /* Hauptinhalt breit darstellen */
  #content, .content-area, .site-main, .container, .wpadverts-single {
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    float:none !important;
    padding:0 !important;
  }

  /* QR-Code mittelgroß */
  .wmb-qr img,
  .wimabi-advert-qr img {
    width:160px !important;
    height:160px !important;
  }

  /* A4-Seitengröße */
  @page { size:A4; margin:12mm; }

  /* Toolbar neutralisieren */
  .wimabi-advert-toolbar {
    background:none !important;
    padding:0 !important;
    margin-top:8mm !important;
  }

  body { color:#000 !important; }
}
/* ===== Block 4: Anzeigen-Typografie (einheitlich) ===== */

/* Basis: gut lesbare Fließtexte in Anzeigen */
.adverts-single-box,
.wpadverts-single,
.entry-content {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #111 !important;
}

/* Titel auf Einzelanzeige */
.adverts-single-title {
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  margin: 6px 0 8px !important;
  color: #111 !important;
}

/* Begriff–Wert-Zeilen (z. B. Firma, Adresse …) */
.wpa-field-label-text {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #111 !important;
}
.wpa-row-value,
.atw-text-base {
  font-size: 17.5px !important;
  line-height: 1.55 !important;
  color: #111 !important;
}
.atw-text-xl {
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* Zeilenabstände & Icons in Tabellen/Listen */
.wpa-row { padding: 10px 0 !important; }
.wpa-row .wpa-row-value,
.wpa-row .wpa-field-label-text { vertical-align: middle !important; }
.wpa-row i, .wpa-row svg { transform: scale(1.1) !important; }

/* Karten/Listen-Titel (Übersicht) leicht kompakter */
.wimabi-card__title,
.adverts-list .adverts-title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  color: #111 !important;
}
/* ===== Button "Zum Gutschein" – Schrift größer machen ===== */
.wimabi-card__btn {
  font-size: 17px !important;   /* z. B. 17px statt 14-15px Standard */
  line-height: 1.4 !important;
  font-weight: 700 !important;  /* für mehr Präsenz */
}
/* ===== Block 5: Buttons/Actions vereinheitlichen (ohne HTML-Änderungen) ===== */

/* Gemeinsame Button-Basis – gilt für wmb- und wimabi-Buttons */
.wmb-btn,
.wimabi-btn {
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  background: #111 !important;
  color: #fff !important;
}
.wmb-btn:hover,
.wimabi-btn:hover { opacity: .92 !important; }

/* Primär-Variante (beide Klassennamen unterstützt) */
.wmb-btn-primary,
.wimabi-btn-primary {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

/* Sekundär-Variante (falls genutzt) */
.wmb-btn-secondary,
.wimabi-btn-secondary {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #111 !important;
}

/* Actions-Container vereinheitlichen */
.wmb-actions,
.wimabi-advert-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin: 10px 0 18px !important;
}

/* QR-Block (Alias) – falls irgendwo noch wimabi-Klassen auftauchen */
.wmb-qr,
.wimabi-advert-qr {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.wmb-qr img,
.wimabi-advert-qr img {
  width: 140px !important;
  height: 140px !important;
  border-radius: 10px !important;
  background: #fff !important;
}
/* Einzelanzeige: Buttons in der Aktionsleiste rot (PDF-Download) */
.single-advert .wmb-actions .wmb-btn,
.single-advert .wimabi-advert-toolbar .wimabi-btn {
  background: var(--wmb-primary) !important;
  border-color: var(--wmb-primary) !important;
  color: #fff !important;
}
.single-advert .wmb-actions .wmb-btn:hover,
.single-advert .wimabi-advert-toolbar .wimabi-btn:hover {
  filter: brightness(0.92) !important;
}
/* ===== WiMaBi Voucher (PDF-Layout) ===== */
#wmb-pdf { position: fixed; left: -99999px; top: 0; } /* offscreen render */

.wmb-voucher{
  width: 800px; /* Render-Breite für sauberes Scaling (html2canvas scale:2) */
  box-sizing: border-box;
  background:#fff;
  color:#111;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  border:1px solid #eee;
  border-radius: 12px;
  padding: 18px;
}

.wmb-v-hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:16px;
}
.wmb-v-brand{ display:flex; flex-direction:column; gap:4px; }
.wmb-v-logo{ font-size:22px; font-weight:800; letter-spacing:.2px; }
.wmb-v-tag{ font-size:13px; color:#666; }

.wmb-v-qr img{ width:160px; height:160px; object-fit:contain; background:#fff; border-radius:8px; }

.wmb-v-body{ margin-top:8px; }
.wmb-v-title{ font-size:24px; line-height:1.3; margin:0 0 8px 0; font-weight:800; }
.wmb-v-meta{ font-size:16px; line-height:1.5; color:#333; display:flex; gap:8px; align-items:center; }
.wmb-v-meta .wmb-v-sep{ opacity:.5; }
.wmb-v-hero{ margin:14px 0; }
.wmb-v-hero img{ width:100%; height:auto; border-radius:10px; object-fit:cover; }

.wmb-v-url{ font-size:13px; color:#666; margin-top:6px; word-break:break-all; }
.wmb-v-foot{
  margin-top:16px; padding-top:10px; border-top:1px dashed #e5e7eb;
  font-size:14px; color:#111;
}
.wmb-v-url-inline{ font-weight:700; }

}
/* Wrapper der Bildbox in der Karte */
.wimabi-card .adverts-media{
  height: 200px;
  background: #fff;
  border-radius: 14px;
  box-sizing: border-box;
  padding: 10px;                  /* Luft nur am Wrapper */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;                 /* kein Inline-Gap */
  overflow: visible !important;   /* NICHT clippen */
}

/* Bild selbst – niemals strecken */
.wimabi-card .adverts-media > img.wimabi-card__img{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 2px) !important;   /* kleine Toleranz gg. Subpixel */
  max-height: calc(100% - 6px) !important;  /* unten nichts mehr abgeschnitten */
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
}

/* Falls style.css noch aggressiver ist (Sicherheitsnetz) */
body .wimabi-card .adverts-media > img.wimabi-card__img{
  width: auto !important;
  height: auto !important;
}
}
