/*
Theme Name: VA Rental-Schüren (Kadence Child)
Theme URI: https://soundmieten.de
Description: Marken-Child-Theme für VA Rental-Schüren — Eventtechnik-Vermietung Herdecke. Setzt auf das Eltern-Theme „Kadence" auf und bringt das dunkelblaue Markenbild (Akzent Blau/Cyan), Buttons, WhatsApp-Button und den Event-Konfigurator mit.
Author: VA Rental-Schüren
Template: kadence
Version: 1.0.0
Text Domain: va-rental-child
*/

/* =========================================================
   1 · MARKEN-TOKENS  (aus dem abgestimmten Design „erste Variante")
   ========================================================= */
:root{
  --va-bg:#070b16;
  --va-surface:#0f1729;
  --va-surface-2:#131d34;
  --va-line:rgba(120,150,210,.14);
  --va-line-strong:rgba(130,165,230,.28);
  --va-text:#e9eefb;
  --va-muted:#9aa7c4;
  --va-accent:#2f6bff;
  --va-accent-2:#19d3e6;
  --va-accent-soft:rgba(47,107,255,.16);
  --va-good:#28c98a;
  --va-radius:18px;
  --va-radius-lg:26px;
}

/* Marken-Schriften via Google Fonts werden in functions.php geladen.
   Fallback bleibt die Theme-Schrift, falls Self-Hosting genutzt wird. */
body{
  font-family:"Manrope",system-ui,sans-serif;
  background:var(--va-bg);
  color:var(--va-text);
}
h1,h2,h3,.va-display{
  font-family:"Bricolage Grotesque",sans-serif;
  letter-spacing:-.02em;
}

/* dezenter Marken-Hintergrund (wie im Original) */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(620px 460px at 82% -8%, rgba(47,107,255,.18), transparent 60%),
    radial-gradient(560px 420px at 6% 8%, rgba(25,211,230,.10), transparent 60%),
    linear-gradient(180deg,var(--va-bg),#0a1020);
}

/* =========================================================
   2 · BUTTONS
   ========================================================= */
.va-btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;
  font-weight:700;font-size:1rem;padding:14px 24px;border-radius:999px;
  transition:.22s ease;text-decoration:none;line-height:1;
}
.va-btn-primary{color:#fff;background:linear-gradient(120deg,var(--va-accent),#4f86ff);
  box-shadow:0 10px 30px -8px rgba(47,107,255,.6);}
.va-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -8px rgba(47,107,255,.75);color:#fff;}
.va-btn-ghost{color:var(--va-text);background:rgba(255,255,255,.04);border:1px solid var(--va-line-strong);}
.va-btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--va-accent);}

/* =========================================================
   3 · WHATSAPP-FLOAT  (in functions.php ausgegeben)
   ========================================================= */
.va-wa-fab{
  position:fixed;right:20px;bottom:20px;z-index:9999;width:60px;height:60px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;color:#fff;text-decoration:none;
  box-shadow:0 14px 34px -8px rgba(37,211,102,.7);transition:.2s;
  animation:va-pulse 2.4s infinite;
}
.va-wa-fab:hover{transform:scale(1.07);color:#fff;}
.va-wa-fab svg{width:30px;height:30px;fill:#fff;}
@keyframes va-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.45),0 14px 34px -8px rgba(37,211,102,.7)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0),0 14px 34px -8px rgba(37,211,102,.7)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 14px 34px -8px rgba(37,211,102,.7)}
}

/* =========================================================
   4 · KONFIGURATOR  (Shortcode [va_konfigurator])
   ========================================================= */
.va-config{
  background:linear-gradient(165deg,var(--va-surface-2),var(--va-surface));
  border:1px solid var(--va-line-strong);border-radius:var(--va-radius-lg);
  padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:34px;color:var(--va-text);
}
.va-config *{box-sizing:border-box;}
.va-cfg-field{margin-bottom:24px;}
.va-cfg-field > label{display:block;font-weight:700;margin-bottom:11px;}
.va-chip-row{display:flex;flex-wrap:wrap;gap:9px;}
.va-chip{padding:9px 16px;border-radius:999px;border:1px solid var(--va-line-strong);
  background:rgba(255,255,255,.03);font-weight:600;font-size:.9rem;cursor:pointer;
  transition:.15s;color:var(--va-muted);}
.va-chip.active{background:var(--va-accent);border-color:var(--va-accent);color:#fff;}
.va-range-val{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:var(--va-accent-2);font-size:1.15rem;}
.va-config input[type=range]{width:100%;accent-color:var(--va-accent);height:6px;cursor:pointer;margin-top:6px;}
.va-toggle-row{display:flex;flex-direction:column;gap:10px;}
.va-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border:1px solid var(--va-line);border-radius:13px;
  background:rgba(255,255,255,.025);cursor:pointer;transition:.15s;}
.va-toggle.on{border-color:var(--va-accent);background:var(--va-accent-soft);}
.va-switch{width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.12);
  position:relative;flex-shrink:0;transition:.18s;}
.va-switch::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  background:#fff;top:3px;left:3px;transition:.18s;}
.va-toggle.on .va-switch{background:var(--va-accent);}
.va-toggle.on .va-switch::after{left:21px;}
.va-cfg-result{background:radial-gradient(400px 200px at 100% 0,rgba(47,107,255,.18),transparent 60%),#0a1020;
  border:1px solid var(--va-line-strong);border-radius:var(--va-radius);padding:26px;
  display:flex;flex-direction:column;}
.va-cfg-result .r-label{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--va-accent-2);font-weight:700;}
.va-cfg-result h3{font-size:1.7rem;margin:8px 0 4px;}
.va-r-list{list-style:none;margin:20px 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.va-r-list li{display:flex;align-items:center;gap:10px;font-size:.95rem;}
.va-r-price{margin-top:auto;padding-top:18px;border-top:1px solid var(--va-line);}
.va-r-price .amt{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.4rem;line-height:1;}
.va-r-note{font-size:.78rem;color:var(--va-muted);margin-top:8px;}

/* =========================================================
   5 · „WARUM LOKAL"-BAND  (Shortcode [va_warum_lokal])
   ========================================================= */
.va-local-band{
  background:linear-gradient(135deg,var(--va-surface-2),var(--va-surface));
  border:1px solid var(--va-line-strong);border-radius:var(--va-radius-lg);
  padding:40px;display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;color:var(--va-text);
}
.va-lb-stat{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:3rem;line-height:1;
  background:linear-gradient(100deg,var(--va-accent-2),var(--va-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.va-lb-stat small{display:block;font-family:"Manrope",sans-serif;font-size:.95rem;color:var(--va-muted);
  font-weight:600;margin-top:8px;-webkit-text-fill-color:var(--va-muted);}
.va-lc-row{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:13px;
  border:1px solid var(--va-line);margin-top:12px;}
.va-lc-row.them{background:rgba(255,93,108,.06);border-color:rgba(255,93,108,.25);}
.va-lc-row.us{background:rgba(40,201,138,.08);border-color:rgba(40,201,138,.30);}

/* =========================================================
   6 · RESPONSIVE
   ========================================================= */
@media(max-width:820px){
  .va-config{grid-template-columns:1fr;padding:24px;}
  .va-local-band{grid-template-columns:1fr;padding:28px;}
  .va-lb-stat{font-size:2.4rem;}
}