/* ==== pf.css – CHAMPAGNE LAUNCH GLOBAL (leicht, modern, SEO-freundlich) ==== */

/* ------------------------ */
/* Design-Variablen         */
/* ------------------------ */
:root{
  --pfs-bg:#fff;
  --pfs-text:#0f172a;
  --pfs-muted:#6b7280;
  --pfs-border:#e5e7eb;

  /* Farben: Grün = Badge/Primär, Orange = Hover-Akzent */
  --pfs-primary:#0a7d32;
  --pfs-accent:#ff9900;
  --pfs-accent-hover:#e68a00;

  --pfs-radius-lg:12px;
  --pfs-radius-sm:8px;
  --pfs-gap:16px;
  --pfs-shadow:0 8px 20px rgba(0,0,0,.06);

  /* Vertikaler Rhythmus */
  --pfs-vspace:12px;
  --pfs-vspace-lg:14px;

  /* Typo (System-Stack, schnell) */
  --pfs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/* Einheitliche Schrift für alles in Karten/Grids */
.pfs-deal-grid, .pfs-deal-grid *,.pfs-card, .pfs-card *{ font-family: var(--pfs-font); }

/* ------------------------ */
/* Grid                     */
/* ------------------------ */
.pfs-deal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--pfs-gap);
  margin:24px 0;
}

/* ------------------------ */
/* Karte                    */
/* ------------------------ */
.pfs-card{
  position:relative;                 /* damit Badge auch als Geschwister korrekt positioniert */
  background:#fff;
  border:1px solid var(--pfs-border);
  border-radius:var(--pfs-radius-lg);
  padding:12px;
  display:flex;
  flex-direction:column;             /* wird unten explizit geordnet */
  min-height:100%;
  box-shadow:var(--pfs-shadow);
  transition: box-shadow .18s ease, transform .12s ease, background-image .2s ease;
}
@media (hover:hover){
  .pfs-card:hover{
    box-shadow:0 10px 28px rgba(0,0,0,.08);
    transform: translateY(-2px);
  }
  /* Subtiler „Champagne“-Glanz – 0 Assets, 0 JS */
  .pfs-card{
    background-image: radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  }
}

/* Alt-Wrapper neutralisieren */
.pfs-card-body{margin:0;padding:0;border:0}

/* ------------------------ */
/* Media – Bilder           */
/* ------------------------ */
.pfs-thumb, .pfs-card-media{position:relative;display:block}
.pfs-thumb img, .pfs-card-media img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;        /* Bild niemals beschneiden */
  background:#fff;
  border-radius:10px;
}

/* Badge (funktioniert auch, wenn Badge nicht im Link steckt) */
.pfs-badge{
  position:absolute;left:10px;top:10px;z-index:2;
  background:var(--pfs-primary);color:#fff;font-weight:800;
  font-size:13px;line-height:1;padding:6px 9px;
  border-radius:999px;box-shadow:0 3px 12px rgba(0,0,0,.18)
}

/* ------------------------ */
/* Titel                    */
/* ------------------------ */
.pfs-title, .pfs-card-title{
  font-size:16px;font-weight:800;line-height:1.3;
  margin:var(--pfs-vspace) 0; /* Grundabstand */
  display:-webkit-box;
  -webkit-line-clamp:3;       /* 3 Zeilen clampen – SEO-freundlich, kein JS */
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pfs-title a, .pfs-card-title a{
  color:inherit;
  text-decoration:none;                 /* Standard NICHT unterstrichen */
  text-decoration-skip-ink:auto;
}
.pfs-title a:hover, .pfs-card-title a:hover{
  text-decoration:underline;            /* Nur bei Hover */
  text-underline-offset:2px;
  text-decoration-thickness:from-font;
}

/* ------------------------ */
/* Meta                     */
/* ------------------------ */
.pfs-meta{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
  margin:0 0 var(--pfs-vspace) 0; color:var(--pfs-text)
}
.pfs-price{font-size:22px;font-weight:800}
.pfs-list{font-size:14px;color:var(--pfs-muted);text-decoration:line-through}
.pfs-pct{
  font-size:13px;font-weight:700;color:var(--pfs-primary);
  background:rgba(10,125,50,.08);padding:3px 6px;border-radius:6px
}

/* ------------------------ */
/* Actions – Buttons        */
/* ------------------------ */
.pfs-actions{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--pfs-vspace);
}
.pfs-btn{
  display:inline-block;
  border-radius:var(--pfs-radius-sm);
  border:1px solid #111827;
  padding:10px 12px;
  font-weight:800; letter-spacing:.01em;
  will-change: transform;
  transition: transform .08s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, text-decoration-color .12s ease;
  /* Buttons NIE unterstrichen im Normalzustand – globaler, harter Reset: */
  text-decoration:none !important;
}
.pfs-btn:link,
.pfs-btn:visited{ text-decoration:none !important; }

/* Hover/Focus: Unterstreichen (umgedrehte Logik) */
.pfs-btn:hover,
.pfs-btn:focus-visible{
  text-decoration:underline !important;
  text-underline-offset:2px;
  text-decoration-thickness:from-font;
  transform: translateY(-1px);
}

/* Sekundär-Button */
.pfs-btn-secondary{
  background:#f3f4f6;color:#111827;border-color:#111827
}
.pfs-btn-secondary:hover, .pfs-btn-secondary:focus-visible{
  background:#e5e7eb;
}

/* Amazon/Go-Button: Grün → Orange; Text immer weiß */
.pfs-btn-amzn, .pfs-go{
  background:var(--pfs-primary) !important;     /* Grün wie Badge */
  border-color:var(--pfs-primary) !important;
  color:#fff !important;
  text-decoration:none !important;              /* Standard NICHT unterstrichen */
  background-image: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0)); /* dezenter Glanz */
}
.pfs-btn-amzn:link, .pfs-btn-amzn:visited,
.pfs-go:link, .pfs-go:visited{ color:#fff !important; }

.pfs-btn-amzn:hover, .pfs-go:hover,
.pfs-btn-amzn:focus-visible, .pfs-go:focus-visible{
  background:var(--pfs-accent) !important;      /* Orange */
  border-color:var(--pfs-accent) !important;
  color:#fff !important;
  text-decoration:underline !important;
}

/* Active: wieder runter */
.pfs-btn-amzn:active, .pfs-go:active{ transform:translateY(0) }

/* Fokus-Barrierefreiheit (Tastatur) */
.pfs-card a:focus-visible, .pfs-btn:focus-visible{
  outline:2px solid #2563eb; outline-offset:2px;
}

/* ------------------------ */
/* Reihenfolge & Abstände   */
/* – wirkt auch bei „falscher“ DOM-Reihenfolge (harmonized/legacy) */
/* ------------------------ */
.pfs-card{ display:flex; flex-direction:column; }

/* Visuelle Reihenfolge zentral definieren */
.pfs-card .pfs-thumb{ order: 0; }
.pfs-card .pfs-title{ order: 1; }
.pfs-card .pfs-meta{  order: 2; }
.pfs-card .pfs-actions{ order: 3; }

/* Abstände sauber staffeln */
.pfs-card .pfs-title{
  margin: var(--pfs-vspace) 0 var(--pfs-vspace-lg) 0;  /* mehr Luft zum Buttonbereich */
}
.pfs-card .pfs-meta{
  margin: 0 0 var(--pfs-vspace-lg) 0;
}
.pfs-card .pfs-actions{
  margin-top: var(--pfs-vspace-lg);
}

/* Legacy-Felder (aus alten Karten) ausblenden, damit nichts doppelt steht */
.pfs-card > .pfs-uvp,
.pfs-card > .pfs-price:not(.pfs-meta .pfs-price){
  display:none !important;
}

/* ------------------------ */
/* Affiliate Inline Hinweis */
/* ------------------------ */
.pfs-aff-inline{
  display:block;margin-top:6px;color:var(--pfs-muted);
  font-size:11px;line-height:1.3
}

/* ------------------------ */
/* Ad-Slots                 */
/* ------------------------ */
.pfs-ad-slot{
  border:1px dashed var(--pfs-border);border-radius:var(--pfs-radius-lg);
  min-height:120px;display:flex;align-items:center;justify-content:center;background:#fafafa
}
.pfs-ad-slot ins.adsbygoogle{width:100%}

/* ------------------------ */
/* Loader/Ende              */
/* ------------------------ */
.pfs-loader,.pfs-end{
  color:var(--pfs-muted);text-align:center;margin:12px 0
}

/* ------------------------ */
/* „Verpasst“ dezent        */
/* ------------------------ */
.pfs-card--missed{opacity:.78;filter:grayscale(30%)}

/* ------------------------ */
/* Mobile Feinschliff       */
/* ------------------------ */
@media (max-width: 480px){
  :root{ --pfs-vspace:10px; --pfs-vspace-lg:12px; }
  .pfs-price{ font-size:20px }
  .pfs-title{ font-size:15.5px }
}

/* ------------------------ */
/* Cookiebar Dark (bestehend) */
/* ------------------------ */
#cmplz-cookiebanner,.cky-consent-container,.cli-bar-container{color:#e5e7eb!important}
#cmplz-cookiebanner .cmplz-message,.cky-consent-bar,.cli-bar-container{background:#0c1222!important}
#cmplz-cookiebanner a,.cky-btn,.cli_action_button{color:#fff!important}
#cmplz-cookiebanner .cmplz-btn,.cky-btn-accept,.cli_action_button{background:#16a34a!important;border:none!important}
/* ==== STARTSEITE: strikt 3 Spalten – auch für nachgeladene Karten ==== */
#pfs-feed[data-cols="3"] .pfs-deal-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--pfs-gap);
}

@media (max-width: 1024px){
  #pfs-feed[data-cols="3"] .pfs-deal-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px){
  #pfs-feed[data-cols="3"] .pfs-deal-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Ad-Slot soll eine ganze Spalte füllen und ins Grid passen */
.pfs-ad-slot.pfs-ad--grid{
  min-height: 120px;
  border:1px dashed var(--pfs-border);
  border-radius: var(--pfs-radius-lg);
  background:#fafafa;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--pfs-shadow);
}