/* =====================================================
   Affiliate – öffentliche Empfehlungsseite + Admin-Ergänzungen
   ===================================================== */

/* ── Öffentliche Seite ──────────────────────────────
   Alle Farben haengen an Variablen. view.php setzt --aff-bg auf die eingestellte
   Farbe und schaltet per .is-dark auf helle Schrift, wenn der Hintergrund dunkel
   ist. So genuegt EINE Farbwahl im Admin – der Rest passt sich an. */
.aff-body{
  --aff-bg:      #ffffff;   /* Seitenhintergrund – im Admin einstellbar */
  --aff-ink:     #1e1e1e;   /* Text */
  --aff-muted:   #666666;   /* gedaempfter Text */
  --aff-card:    #ffffff;   /* Kartenflaeche */
  --aff-line:    #ececec;   /* Rahmen */
  --aff-chip:    #f6f6f6;   /* Filter/Hinweis-Flaeche */
  --aff-btn:     #1e1e1e;   /* Button */
  --aff-btn-ink: #ffffff;
  --aff-accent:  #14b8a6;

  margin:0; background:var(--aff-bg); color:var(--aff-ink);
  font-family:var(--font-content,'Lato','Segoe UI',Arial,sans-serif); line-height:1.55;
}
/* Dunkler Hintergrund -> helle Schrift. Wird von view.php gesetzt, aus der
   Helligkeit der gewaehlten Farbe berechnet. */
.aff-body.is-dark{
  --aff-ink:     #f2f2f2;
  --aff-muted:   #a8a8a8;
  --aff-card:    rgba(255,255,255,.06);
  --aff-line:    rgba(255,255,255,.14);
  --aff-chip:    rgba(255,255,255,.08);
  --aff-btn:     #f2f2f2;
  --aff-btn-ink: #111111;
}

.aff-wrap{ max-width:1100px; margin:0 auto; padding:38px 20px 60px; }

.aff-head{ margin-bottom:26px; }
.aff-title{ font-size:30px; font-weight:800; margin:0 0 8px; }
.aff-intro{ margin:0 0 14px; color:var(--aff-muted); max-width:70ch; }

/* Transparenzhinweis – ruhig, aber nicht zu übersehen */
.aff-disclosure{ font-size:13.5px; color:var(--aff-muted); background:var(--aff-chip);
  border-left:3px solid var(--aff-accent); border-radius:0 8px 8px 0;
  padding:11px 14px; margin:0; max-width:80ch; }

.aff-empty{ color:var(--aff-muted); }

/* Kategorie-Filter */
.aff-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 20px; }
.aff-chip{ border:1px solid var(--aff-line); background:var(--aff-card); color:var(--aff-muted);
  border-radius:999px; padding:7px 15px; font-size:13.5px; font-family:inherit; cursor:pointer;
  transition:border-color .12s, color .12s, background .12s; }
.aff-chip:hover{ border-color:var(--aff-muted); color:var(--aff-ink); }
.aff-chip.on{ background:var(--aff-btn); border-color:var(--aff-btn); color:var(--aff-btn-ink); }

/* Raster */
.aff-grid{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:22px; }
.aff-card{ display:flex; flex-direction:column; background:var(--aff-card);
  border:1px solid var(--aff-line); border-radius:14px; overflow:hidden;
  transition:transform .15s, box-shadow .15s; }
.aff-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.09); }
.aff-card[hidden]{ display:none; }

/* Feste Bildfläche -> kein Layout-Shift beim Nachladen */
.aff-thumb{ aspect-ratio:1; background:var(--aff-chip); overflow:hidden; }
.aff-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.aff-body-txt{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
.aff-meta{ display:flex; align-items:center; gap:8px; margin:0 0 6px; }

/* Kennzeichnung: fest sichtbar. Bewusst NICHT versteckbar (Pflicht in DE). */
.aff-label{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--aff-muted); background:var(--aff-chip); border-radius:4px; padding:2px 6px; }
.aff-cat{ font-size:11.5px; color:var(--aff-muted); text-transform:uppercase; letter-spacing:.05em; }

.aff-name{ font-size:16.5px; font-weight:700; margin:0 0 6px; }
.aff-desc{ font-size:13.5px; color:var(--aff-muted); margin:0 0 14px; }

.aff-btn{ margin-top:auto; display:inline-block; text-align:center; text-decoration:none;
  background:var(--aff-btn); color:var(--aff-btn-ink); border-radius:9px; padding:10px 14px;
  font-size:14px; font-weight:600; transition:opacity .12s; }
.aff-btn:hover{ opacity:.85; }
.aff-btn:focus-visible{ outline:2px solid var(--aff-accent); outline-offset:2px; }
.aff-merchant{ font-weight:400; opacity:.7; }

/* Bewegung nur, wenn gewünscht */
@media (prefers-reduced-motion:reduce){
  .aff-card, .aff-btn, .aff-chip{ transition:none; }
  .aff-card:hover{ transform:none; }
}

/* Dunkles Design */
/* Kein automatischer Dunkel-Modus mehr: die im Admin gewaehlte Hintergrundfarbe
   gilt fuer alle Besucher gleich. Ist sie dunkel, setzt view.php .is-dark und die
   Schrift wird hell (siehe oben). */

@media (max-width:600px){
  .aff-wrap{ padding:26px 16px 44px; }
  .aff-title{ font-size:24px; }
  .aff-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
}

/* ── Admin: Produktliste ──────────────────────────── */
.affa-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.affa-actions{ display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.affa-link{ font-size:12.5px; color:#888; }
.affa-link a{ color:#0f766e; }

.affa-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.affa-card{ position:relative; background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.08); }
.affa-card.off{ opacity:.5; }
.affa-thumb{ aspect-ratio:1; background:#f0f0f0; display:block; overflow:hidden; }
.affa-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.affa-empty-thumb{ width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; color:#bbb; font-size:12px; }
.affa-b{ padding:11px 13px 13px; }
.affa-t{ font-size:14.5px; font-weight:700; margin:0 0 3px; }
.affa-c{ font-size:11.5px; color:#999; text-transform:uppercase; letter-spacing:.05em; }
.affa-stat{ font-size:12px; color:#888; margin-top:6px; }
.affa-tools{ position:absolute; top:8px; right:8px; display:flex; gap:4px; align-items:center;
  opacity:0; transition:opacity .12s; }
.affa-card:hover .affa-tools{ opacity:1; }

/* Sortieren per Ziehen – nur am Griff, damit Klicks/Markieren normal bleiben */
.affa-grip{ width:26px; height:26px; border-radius:6px; background:rgba(0,0,0,.5); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; cursor:grab;
  font-size:13px; user-select:none; }
.affa-grip:active{ cursor:grabbing; }
.affa-card.affa-dragging{ opacity:.4; }
.affa-card.affa-over{ outline:2px dashed #0f766e; outline-offset:2px; }
.affa-tools button{ width:26px; height:26px; border:none; border-radius:6px;
  background:rgba(0,0,0,.5); color:#fff; cursor:pointer; font-size:13px; line-height:1; }
.affa-tools button:hover{ background:rgba(0,0,0,.75); }
.affa-tools button.del:hover{ background:rgba(200,0,0,.85); }

/* Dialog */
#affDlg{ max-width:520px; }
#affDlg label{ display:block; font-size:12px; color:#888; margin:10px 0 4px; }
#affDlg input[type=text], #affDlg input[type=url], #affDlg textarea, #affDlg select{
  width:100%; padding:9px 11px; border:1px solid #e0e0e0; border-radius:9px;
  font-size:14px; font-family:inherit; box-sizing:border-box; }
#affDlg textarea{ min-height:80px; resize:vertical; }
#affDlg input:focus, #affDlg textarea:focus{ outline:none; border-color:#bbb; }
.aff-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.aff-hint{ font-size:11px; color:#aaa; margin-top:3px; }
.aff-pick{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.aff-pick-prev{ width:74px; height:74px; border-radius:8px; background:#f2f2f2;
  flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center;
  color:#bbb; font-size:11px; }
.aff-pick-prev img{ width:100%; height:100%; object-fit:cover; }
.aff-check{ display:flex; align-items:center; gap:7px; margin-top:12px; font-size:13.5px; color:#555; }
.aff-check input{ width:auto; }

/* Hintergrundfarbe waehlen */
.aff-bgpick{ display:flex; align-items:center; gap:10px; }
.aff-bgpick input[type=color]{ width:44px; height:34px; padding:0; border:1px solid #e0e0e0;
  border-radius:8px; background:none; cursor:pointer; flex-shrink:0; }
.aff-bgpick code{ font-size:12px; color:#888; font-family:ui-monospace,Menlo,monospace; }
.aff-bgpre{ display:flex; gap:5px; margin-left:auto; }
.aff-bgpre button{ width:24px; height:24px; border-radius:50%; border:1px solid #ddd;
  cursor:pointer; padding:0; }
.aff-bgpre button:hover{ transform:scale(1.12); border-color:#999; }

/* Rechts-Fuß: Impressum/Datenschutz/Cookie-Einstellungen. Farben erben die
   hell/dunkel-Variablen, passt sich also der eingestellten Hintergrundfarbe an. */
.aff-foot{ border-top:1px solid var(--aff-line); margin-top:8px; }
.aff-foot-in{ max-width:1100px; margin:0 auto; padding:22px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px 16px;
  flex-wrap:wrap; font-size:12.5px; color:var(--aff-muted); }
.aff-foot-legal{ display:flex; gap:16px; flex-wrap:wrap; }
.aff-foot a{ color:var(--aff-muted); text-decoration:none; }
.aff-foot a:hover{ text-decoration:underline; color:var(--aff-ink); }
@media (max-width:640px){
  .aff-foot-in{ flex-direction:column; justify-content:center; text-align:center; gap:10px; }
  .aff-foot-legal{ justify-content:center; }
}

/* Ausgewogene Zeilenumbrüche (systemweit): Überschriften gleichmäßig, Fließtext ohne Einzelwort am Ende. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }