/* ===== APANA CI Variablen (falls du später nur Farben tauschen willst) ===== */
:root{
  --apana-green: #00a1b0;         /* Marken-Grün aus deinem Plenty-CSS */
  --apana-green-50: #e6f7f9;      /* sehr helles Grün für Flächen */
  --apana-text: #1a1a1a;
  --apana-gray-300:#d1d5db;
}

/* ===== Kachel-Styling für Einbauort ===== */
.pf-tile{
  display:block;
  text-align:center;
  padding:.625rem 1rem;            /* 10px 16px */
  border:1px solid var(--apana-gray-300);
  border-radius:12px;
  background:#fff;
  color:var(--apana-text);
  font-weight:500;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.pf-tile--active{
  border-color:var(--apana-green);
  background:var(--apana-green-50);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--apana-green) 30%, transparent);
}

/* Optional: Hover */
label .pf-tile:hover{
  border-color:var(--apana-green);
}

/* (Optional) Primärbutton im Finder angleichen */
#findBtn{
  background:var(--apana-green);
  border-radius:12px;
}
#findBtn:hover{
  filter:brightness(.95);
}
/* ===== Kachel-Styling für Einbauort ===== */
.pf-tile {
  display:block;
  text-align:center;
  padding:.625rem 1rem;           
  border:1px solid var(--apana-gray-300);
  border-radius:12px;
  background:#fff;
  color:var(--apana-text);
  font-weight:500;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

/* Hover */
label:hover .pf-tile {
  border-color:var(--apana-green);
}

/* === Aktiv durch Klick (Radio checked) === */
input[type="radio"]:checked + .pf-tile {
  border-color:var(--apana-green);
  background:var(--apana-green);
  color:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--apana-green) 25%, transparent);
}
/* Produktkarten-Buttons "Jetzt ansehen" im APANA-CI */
.pf-product-btn{
  background-color:#179dab !important;
  color:#fff !important;
  text-decoration:none !important;
  border:none !important;
}
.pf-product-btn:hover{
  background-color:#127a88 !important; /* etwas dunkler beim Hover */
}
/* Mindesthöhe für den Bereich "Deine passenden Artikel" */

#results {
  min-height: 560px !important; /* Wert nach Wunsch */
  outline: 2px dashed #179dab !important;
}