/* Preisliste (Stil Frisuren) — Frontend-Styles
   Farben, Schriftarten und Schriftgrößen kommen als CSS-Variablen aus dem
   Admin-Design (siehe includes/render.php -> pl_generate_design_css()).
   Diese Datei enthält nur Layout/Struktur, keine festen Design-Werte. */

.pl-wrap{
  background:transparent !important;
  color:var(--pl-text);
  font-family:var(--pl-font-body);
  max-width:var(--pl-maxwidth);
  margin:0 auto;
  width:100%;
  box-sizing:border-box;
}
.pl-wrap, .pl-wrap *{ box-sizing:border-box; background-color:transparent; }
.pl-wrap img{ max-width:100%; }

/* ---------- Header ---------- */
.pl-header{ text-align:center; padding:0 8px 28px; }
.pl-eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--pl-accent) !important; font-weight:600; margin-bottom:10px;
}
.pl-title{
  font-family:var(--pl-font-heading);
  font-weight:600; font-size:var(--pl-size-title);
  letter-spacing:.02em; margin:0 0 12px; color:var(--pl-text) !important;
}
.pl-note{
  font-size:.88rem; color:var(--pl-muted) !important; max-width:520px;
  margin:0 auto 20px; line-height:1.55; font-weight:300;
}
.pl-controls{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.pl-toggle-all{
  font-family:inherit; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--pl-toggle-text) !important; background:transparent !important;
  border:1px solid var(--pl-toggle-border) !important;
  border-radius:999px; padding:8px 18px; cursor:pointer; transition:.25s ease;
  font-weight:500; box-shadow:none;
}
.pl-toggle-all:hover{ border-color:var(--pl-toggle-hover) !important; color:var(--pl-toggle-hover) !important; }

/* ---------- Team / Marco Umschalter ---------- */
.pl-switch{
  display:inline-flex; gap:4px; padding:4px; margin:0 auto 20px;
  border:1px solid var(--pl-line) !important; border-radius:999px;
  background:rgba(255,255,255,.03) !important;
}
.pl-switch-input{ position:absolute; opacity:0; pointer-events:none; }
.pl-switch-label{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  padding:9px 20px; border-radius:999px; color:var(--pl-muted) !important;
  border:1px solid transparent; transition:.25s ease;
}
.pl-switch-label:hover{ color:var(--pl-text) !important; }
.pl-switch-input:checked + .pl-switch-label{
  background:var(--pl-accent) !important; color:var(--pl-switch-text) !important; border-color:var(--pl-accent) !important;
}
.pl-switch-input:focus-visible + .pl-switch-label{ outline:1px solid var(--pl-accent); outline-offset:2px; }
/* Farbige Punkte in den Umschalter-Labels, passend zu Team-/Marco-Farbe */
.pl-switch-team::before, .pl-switch-marco::before{
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.pl-switch-team{ color:var(--pl-team-color) !important; }
.pl-switch-marco{ color:var(--pl-marco-color) !important; }
.pl-switch-input:checked + .pl-switch-team,
.pl-switch-input:checked + .pl-switch-marco{ color:var(--pl-switch-text) !important; }

/* ---------- Accordion / Kategorien ---------- */
.pl-accordion{ display:flex; flex-direction:column; gap:10px; }
.pl-cat{ border:1px solid var(--pl-line) !important; border-radius:var(--pl-radius); overflow:hidden; }
.pl-cat-input{ position:absolute; opacity:0; pointer-events:none; }

.pl-cat-summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; cursor:pointer; user-select:none;
  transition:background-color .25s ease;
}
.pl-cat-summary:hover{ background-color:var(--pl-hover) !important; }
.pl-cat-title{ display:flex; flex-direction:column; gap:4px; text-align:left; }
.pl-cat-name{
  font-family:var(--pl-font-heading); font-weight:600;
  font-size:var(--pl-size-catname); letter-spacing:.03em; color:var(--pl-text) !important;
}
.pl-cat-count{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--pl-muted) !important; }
.pl-chevron{ flex:none; transition:transform .35s ease; color:var(--pl-chevron-color) !important; }
.pl-cat-input:checked ~ .pl-cat-summary .pl-chevron{ transform:rotate(180deg); }
.pl-cat-input:checked ~ .pl-cat-summary .pl-cat-name{ color:var(--pl-accent) !important; }

.pl-acc{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1); }
.pl-cat-input:checked ~ .pl-acc{ grid-template-rows:1fr; }
.pl-acc-inner{ overflow:hidden; }
.pl-rows{ padding:0 22px 6px; border-top:1px solid var(--pl-line); }

/* ---------- Spalten-Kopfzeile (Leistung | Team | Marco) ---------- */
.pl-col-head{
  display:grid; grid-template-columns:minmax(160px,1.2fr) 2fr;
  gap:18px 24px; padding:14px 0 4px;
}
.pl-col-head-prices{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.pl-col-head-team, .pl-col-head-marco{
  display:flex; align-items:center; gap:6px;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
}
.pl-col-head-team::before, .pl-col-head-marco::before{
  content:''; width:7px; height:7px; border-radius:50%; background:currentColor;
}
.pl-col-head-team{ color:var(--pl-team-color) !important; }
.pl-col-head-marco{ color:var(--pl-marco-color) !important; }

/* ---------- Einzelne Leistungszeile ---------- */
.pl-row{
  display:grid; grid-template-columns:minmax(160px,1.2fr) 2fr;
  gap:18px 24px; align-items:center; padding:18px 0; border-bottom:1px solid var(--pl-line);
}
.pl-row:last-child{ border-bottom:none; }
.pl-name{ font-size:var(--pl-size-name); font-weight:600; color:var(--pl-text) !important; }
.pl-desc{ font-size:var(--pl-size-desc); color:var(--pl-muted) !important; margin-top:3px; font-weight:300; line-height:1.4; }

.pl-prices{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.pl-staff{ display:flex; flex-direction:column; gap:8px; }
.pl-tiers{ display:flex; gap:14px; flex-wrap:wrap; }
.tier{ text-align:center; min-width:52px; }
.tier .val{ display:block; font-weight:600; font-size:var(--pl-size-price); color:var(--pl-text) !important; white-space:nowrap; }
.tier .lbl{ display:block; font-size:var(--pl-size-label); color:var(--pl-muted) !important; margin-top:2px; text-transform:uppercase; letter-spacing:.03em; }
.tier .val.pl-dash{ color:var(--pl-muted) !important; font-weight:400; }

.pl-staff.pl-team .tier .val{ color:var(--pl-team-color) !important; }
.pl-staff.pl-marco .tier .val{ color:var(--pl-marco-color) !important; }

.pl-single .tier{ text-align:left; }

/* ---------- Hinweis-Zeile (auf Anfrage / Aufpreis / nicht verfügbar) ---------- */
.pl-inforow{
  font-size:var(--pl-size-note); color:var(--pl-muted) !important; font-weight:300; font-style:italic;
}
.pl-staff.pl-unavailable{ justify-content:center; }
.pl-staff.pl-unavailable .pl-inforow::before{ content:'– '; }

/* ---------- Sichtbarkeit je nach Team/Marco-Auswahl ----------
   Primär reines CSS (:has()); .pl-filter-team / .pl-filter-marco sind ein
   JS-Fallback (siehe frontend.js) für Browser ohne :has()-Unterstützung. */
.pl-wrap.pl-filter-team .pl-staff.pl-marco,
.pl-wrap:has(input[name^="pl-staff-select"][value="team"]:checked) .pl-staff.pl-marco{ display:none !important; }

.pl-wrap.pl-filter-marco .pl-staff.pl-team,
.pl-wrap:has(input[name^="pl-staff-select"][value="marco"]:checked) .pl-staff.pl-team{ display:none !important; }

.pl-wrap.pl-filter-team .pl-row .pl-prices,
.pl-wrap.pl-filter-marco .pl-row .pl-prices,
.pl-wrap:has(input[name^="pl-staff-select"][value="team"]:checked) .pl-row .pl-prices,
.pl-wrap:has(input[name^="pl-staff-select"][value="marco"]:checked) .pl-row .pl-prices{ grid-template-columns:1fr; }

.pl-wrap.pl-filter-team .pl-row .pl-single .tier,
.pl-wrap.pl-filter-marco .pl-row .pl-single .tier,
.pl-wrap:has(input[name^="pl-staff-select"][value="team"]:checked) .pl-row .pl-single .tier,
.pl-wrap:has(input[name^="pl-staff-select"][value="marco"]:checked) .pl-row .pl-single .tier{ text-align:left; }

.pl-wrap.pl-filter-team .pl-col-head-marco,
.pl-wrap:has(input[name^="pl-staff-select"][value="team"]:checked) .pl-col-head-marco{ display:none; }

.pl-wrap.pl-filter-marco .pl-col-head-team,
.pl-wrap:has(input[name^="pl-staff-select"][value="marco"]:checked) .pl-col-head-team{ display:none; }

.pl-wrap.pl-filter-team .pl-col-head-prices,
.pl-wrap.pl-filter-marco .pl-col-head-prices,
.pl-wrap:has(input[name^="pl-staff-select"][value="team"]:checked) .pl-col-head-prices,
.pl-wrap:has(input[name^="pl-staff-select"][value="marco"]:checked) .pl-col-head-prices{ grid-template-columns:1fr; }

/* ---------- Responsive (Tablet-Breakpoint kommt dynamisch aus dem Design, hier nur Layout) ---------- */
@media (max-width:1024px){
  .pl-row{ gap:14px 18px; }
}
@media (max-width:680px){
  .pl-row{ grid-template-columns:1fr; gap:10px; padding:16px 0; }
  .pl-col-head{ grid-template-columns:1fr; padding:10px 0 2px; }
  .pl-col-head-name{ display:none; }
  .pl-cat-summary{ padding:16px 16px; }
  .pl-rows{ padding:0 16px 4px; }
  .pl-tiers{ gap:10px; }
}