/*
 * Theme Name:  ASIO X Child
 * Description: Child-Theme für Blocksy – ASIO X Kanalinspektion (v3)
 * Template:    blocksy
 * Version:     3.0.0
 * Author:      McWarnecke
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --asio-bg:            #0a0f18;
  --asio-bg-alt:        #141d2e;
  --asio-bg-card:       #161b27;
  --asio-border:        #1e2535;
  --asio-border-hover:  #2d3a52;
  --asio-primary:       #dc2626;
  --asio-primary-hover: #b91c1c;
  --asio-primary-dim:   rgba(220,38,38,.10);
  --asio-primary-bd:    rgba(220,38,38,.22);
  --asio-text:          #f1f5f9;
  --asio-muted:         #64748b;
  --asio-font-heading:  'Barlow', sans-serif;
  --asio-font-body:     'Inter', sans-serif;
  --asio-radius:        12px;
  --asio-radius-sm:     8px;
  --asio-max-w:         1200px;
  --asio-py:            96px;
}

/* ============================================================
   2. GLOBAL BASE
   ============================================================ */
body {
  background-color: var(--asio-bg) !important;
  color: var(--asio-text) !important;
  font-family: var(--asio-font-body) !important;
}

.site-main,
.entry-content {
  padding: 0 !important;
  max-width: none !important;
}

.entry-content > * { max-width: none !important; }

/* Headings */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.wp-block-heading {
  font-family: var(--asio-font-heading) !important;
  color: var(--asio-text) !important;
}

/* Paragraphs */
.entry-content p {
  color: var(--asio-muted);
  line-height: 1.7;
}

/* ============================================================
   3. BLOCKSY HEADER
   ============================================================ */
.ct-header {
  background: rgba(13,17,23,.90) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--asio-border);
}

/* Blocksy native footer ausblenden */
#footer { display: none !important; }

/* ============================================================
   4. HERO  (wp:group statt wp:cover)
   Hintergrundbild via CSS – kann im Block-Inspector unter
   "Stile → Hintergrundbild" auch direkt im Editor gesetzt werden.
   ============================================================ */
.wp-block-group.asio-hero {
  position: relative;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px !important;
  background-image: url('/wp-content/uploads/asiox/hero-drone.webp');
  background-size: cover;
  background-position: center;
  background-color: var(--asio-bg);
  overflow: hidden;
}

/* Gradient-Overlay */
.wp-block-group.asio-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(13,17,23,.50) 0%,
    rgba(13,17,23,.78) 55%,
    rgba(13,17,23,.96) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Alle direkten Kinder über dem Overlay */
.wp-block-group.asio-hero > * {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
}

/* Hero Headline */
.wp-block-group.asio-hero h1.wp-block-heading {
  font-size: clamp(3.5rem, 9vw, 7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
  color: var(--asio-text) !important;
  margin-bottom: 20px !important;
}

/* Rotes "X" */
.wp-block-group.asio-hero h1 .asio-x {
  color: var(--asio-primary);
}

/* Hero Subtext */
.wp-block-group.asio-hero > .wp-block-paragraph {
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  color: var(--asio-muted) !important;
  max-width: 560px !important;
  margin: 0 auto 36px !important;
}

/* Hero Stat-Leiste */
.asio-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 680px;
  margin: 56px auto 0;
}
.asio-hero-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--asio-muted);
  font-size: .875rem;
  font-weight: 500;
  transition: color .2s;
}
.asio-hero-stats__item:hover { color: var(--asio-text); }
.asio-hero-stats__icon { font-size: 1.75rem; line-height: 1; }

@media (max-width: 560px) {
  .asio-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   5. BUTTON
   ============================================================ */
.wp-block-button.asio-btn-primary .wp-block-button__link {
  background-color: var(--asio-primary) !important;
  color: #fff !important;
  padding: 16px 40px !important;
  border-radius: var(--asio-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border: none !important;
  animation: asio-pulse-glow 2.5s ease-in-out infinite;
}
.wp-block-button.asio-btn-primary .wp-block-button__link:hover {
  background-color: var(--asio-primary-hover) !important;
}

@keyframes asio-pulse-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(220,38,38,.45), 0 0 36px rgba(220,38,38,.22); }
  50%       { box-shadow: 0 0 28px rgba(220,38,38,.70), 0 0 56px rgba(220,38,38,.36); }
}

/* ============================================================
   6. SECTION WRAPPERS
   ============================================================ */

/* Alle Gutenberg-Blöcke: Standard-Abstände entfernen */
.entry-content > .wp-block-group,
.entry-content > .wp-block-html,
.entry-content > .wp-block-columns {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Abstände zwischen Blöcken innerhalb von Sektionen ebenfalls normalisieren */
.wp-block-group.asio-section > .wp-block-group,
.wp-block-group.asio-section--alt > .wp-block-group {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Native Sektionen */
.wp-block-group.asio-section {
  padding-top: var(--asio-py) !important;
  padding-bottom: var(--asio-py) !important;
  background-color: var(--asio-bg) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.wp-block-group.asio-section--alt {
  background-color: var(--asio-bg-alt) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Innere Breite */
.wp-block-group.asio-section > *,
.wp-block-group.asio-section--alt > * {
  max-width: var(--asio-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* wp:html Sektionen (<section> Tag) */
section.asio-section,
section.asio-section--alt {
  padding-top: var(--asio-py) !important;
  padding-bottom: var(--asio-py) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: block;
}

/* asio-inner: Inhaltsbreite in wp:html Sektionen */
.asio-inner {
  max-width: var(--asio-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .wp-block-group.asio-section,
  .wp-block-group.asio-section--alt,
  section.asio-section,
  section.asio-section--alt {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   7. TYPOGRAPHY UTILITIES
   ============================================================ */
.asio-eyebrow {
  display: block !important;
  font-family: var(--asio-font-heading) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--asio-primary) !important;
  margin-bottom: 12px !important;
}

.wp-block-heading.asio-gradient-text,
h1.asio-gradient-text,
h2.asio-gradient-text,
h3.asio-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
}

.asio-h-hero { font-size: clamp(3.5rem, 9vw, 7rem) !important; }
.asio-h-lg   { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
.asio-h-md   { font-size: clamp(1.5rem, 3vw, 2.25rem) !important; }

/* Section-Header-Block */
.wp-block-group.asio-section-header {
  text-align: center !important;
  margin-bottom: 56px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wp-block-group.asio-section-header p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.125rem;
}

/* Columns: kein extra Margin oben/unten */
.wp-block-columns.asio-centering-cols,
.wp-block-columns.asio-workflow-cols {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   8. KANALZENTRIERUNG
   ============================================================ */
.wp-block-columns.asio-centering-cols {
  gap: 60px !important;
  align-items: center !important;
}

.wp-block-column.asio-centering-img .wp-block-image img {
  border-radius: var(--asio-radius) !important;
  border: 1px solid var(--asio-border) !important;
  width: 100% !important;
  height: auto !important;
}

/* Step */
.wp-block-group.asio-step {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 32px !important;
}
.asio-step__num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--asio-radius-sm);
  background: var(--asio-primary-dim);
  border: 1px solid var(--asio-primary-bd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--asio-font-heading);
  font-weight: 700;
  font-size: .8125rem;
  color: var(--asio-primary);
  line-height: 1;
}
.wp-block-group.asio-step h3.wp-block-heading {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
}
.wp-block-group.asio-step p {
  font-size: .9rem;
  margin: 0 !important;
}

/* ============================================================
   9. FEATURE CARDS
   ============================================================ */
.wp-block-group.asio-features-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  padding: 0 !important;
}
@media (max-width: 900px) { .wp-block-group.asio-features-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 540px) { .wp-block-group.asio-features-grid { grid-template-columns: 1fr !important; } }

.wp-block-group.asio-feature-card {
  background: var(--asio-bg-card) !important;
  border: 1px solid var(--asio-border) !important;
  border-radius: var(--asio-radius) !important;
  padding: 28px !important;
  transition: border-color .2s;
}
.wp-block-group.asio-feature-card:hover { border-color: var(--asio-primary-bd) !important; }
.wp-block-group.asio-feature-card .asio-card-icon {
  width: 36px; height: 36px;
  color: var(--asio-primary);
  margin-bottom: 20px;
  display: block;
}
.wp-block-group.asio-feature-card h3.wp-block-heading {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  margin: 0 0 10px !important;
}
.wp-block-group.asio-feature-card p {
  font-size: .875rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ============================================================
   10. LIEFERUMFANG (wp:html Tab-Sektion)
   ============================================================ */
/* wp:html <section> Tags: aus dem constrained Layout ausbrechen (wie alignfull) */
.entry-content > section.asio-section,
.entry-content > section.asio-section--alt {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box;
}

/* Sektions-Hintergründe explizit auch für <section>-Tags in wp:html */
section.asio-section,
.wp-block-group.asio-section { background-color: var(--asio-bg) !important; }

section.asio-section--alt,
.wp-block-group.asio-section--alt { background-color: var(--asio-bg-alt) !important; }
.asio-tabs-nav {
  display: flex;
  justify-content: center;
  background: rgba(255,255,255,.05);
  border-radius: var(--asio-radius-sm);
  padding: 4px;
  max-width: 360px;
  margin: 0 auto 48px;
}
.asio-tab-btn {
  flex: 1;
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--asio-muted);
  font-family: var(--asio-font-body);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.asio-tab-btn.is-active {
  background: var(--asio-bg-card);
  color: var(--asio-text);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
/* Delivery Tabs */
.asio-tab-panel { display: none !important; }
.asio-tab-panel.is-active { display: block !important; }

/* Kit Grid – funktioniert für native wp:group UND wp:html Kontext */
.wp-block-group.asio-kit-grid,
.asio-kit-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
  padding: 0 !important;
}
@media (max-width: 1100px) {
  .wp-block-group.asio-kit-grid,
  .asio-kit-grid { grid-template-columns: repeat(4,1fr) !important; }
}
@media (max-width: 760px) {
  .wp-block-group.asio-kit-grid,
  .asio-kit-grid { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 520px) {
  .wp-block-group.asio-kit-grid,
  .asio-kit-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* Kit Item Card – nativer wp:group UND wp:html Kontext */
.wp-block-group.asio-kit-item,
.asio-kit-item {
  background: var(--asio-bg-card) !important;
  border: 1px solid var(--asio-border) !important;
  border-radius: var(--asio-radius) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transition: border-color .2s;
}
.wp-block-group.asio-kit-item:hover,
.asio-kit-item:hover { border-color: var(--asio-primary-bd) !important; }

/* Bildfläche: weißer Hintergrund für Produktfotos */
.wp-block-group.asio-kit-item .wp-block-image,
.asio-kit-item__img {
  width: 100% !important;
  aspect-ratio: 3/2 !important;
  background: rgba(255,255,255,.93) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wp-block-group.asio-kit-item .wp-block-image img,
.asio-kit-item__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform .3s;
}
.wp-block-group.asio-kit-item:hover .wp-block-image img,
.asio-kit-item:hover .asio-kit-item__img img { transform: scale(1.05); }

/* Menge – erscheint VOR dem Namen (qty oben in rot, name darunter) */
.wp-block-group.asio-kit-item p.asio-kit-item__qty,
.asio-kit-item__qty {
  font-size: .8rem !important;
  font-weight: 700 !important;
  color: var(--asio-primary) !important;
  margin: 0 0 3px !important;
  order: 1;
}
.wp-block-group.asio-kit-item p.asio-kit-item__name,
.asio-kit-item__name {
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: var(--asio-text) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  order: 2;
}

/* ============================================================
   11. BRANCHEN (wp:html Tab-Sektion)
   ============================================================ */
.asio-ind-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 48px;
}
.asio-ind-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--asio-border);
  border-radius: var(--asio-radius-sm);
  background: var(--asio-bg-card);
  color: var(--asio-muted);
  font-family: var(--asio-font-body);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.asio-ind-btn:hover { border-color: var(--asio-border-hover); color: var(--asio-text); }
.asio-ind-btn.is-active { background: var(--asio-primary); border-color: var(--asio-primary); color: #fff; }

/* Branchen Panels — WICHTIG: ohne diese Regeln werden alle Panels gleichzeitig angezeigt */
.asio-ind-panel { display: none !important; }
.asio-ind-panel.is-active { display: block !important; }

.asio-ind-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) { .asio-ind-content { grid-template-columns: 1fr; } }

.asio-ind-content__img {
  border-radius: var(--asio-radius);
  border: 1px solid var(--asio-border);
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}
.asio-ind-content__title {
  font-family: var(--asio-font-heading);
  font-weight: 700;
  font-size: 1.625rem;
  color: var(--asio-text);
  margin: 0 0 6px;
}
.asio-ind-content__sub {
  font-size: .9rem;
  font-weight: 500;
  color: var(--asio-primary);
  margin: 0 0 20px;
}
.asio-ind-content__desc {
  font-size: .9rem;
  color: var(--asio-muted);
  line-height: 1.72;
  margin: 0 0 28px;
}
.asio-ind-content__label {
  font-family: var(--asio-font-heading);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--asio-text);
  margin: 0 0 12px;
}
.asio-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.asio-tag { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: .75rem; font-weight: 500; }
.asio-tag--primary { background: var(--asio-primary-dim); color: var(--asio-primary); border: 1px solid var(--asio-primary-bd); }
.asio-tag--neutral { background: rgba(255,255,255,.05); color: var(--asio-text); border: 1px solid var(--asio-border); }

/* ============================================================
   12. WORKFLOW
   ============================================================ */
.wp-block-columns.asio-workflow-cols { gap: 36px !important; }

.wp-block-column.asio-workflow-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.wp-block-column.asio-workflow-step .wp-block-image img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: var(--asio-radius) !important;
  margin-bottom: 20px !important;
}
.asio-workflow-num {
  font-family: var(--asio-font-heading);
  font-size: 3.25rem;
  font-weight: 800;
  color: rgba(220,38,38,.18);
  line-height: 1;
  margin-bottom: 10px;
}
.wp-block-column.asio-workflow-step h3.wp-block-heading {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
}
.wp-block-column.asio-workflow-step p { font-size: .875rem !important; margin: 0 !important; }

/* ============================================================
   13. DEMO CTA
   ============================================================ */
.wp-block-group.asio-demo {
  background-color: var(--asio-bg-alt) !important;
  padding-top: var(--asio-py) !important;
  padding-bottom: var(--asio-py) !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.wp-block-group.asio-demo > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.wp-block-group.asio-demo h2.wp-block-heading {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
}
.wp-block-group.asio-demo p.asio-demo-lead {
  font-size: 1.125rem !important;
  margin-bottom: 14px !important;
}
.wp-block-group.asio-demo p.asio-demo-sub {
  font-size: .9rem !important;
  margin-bottom: 36px !important;
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.wp-block-group.asio-footer {
  background-color: var(--asio-bg) !important;
  border-top: 1px solid var(--asio-border) !important;
  padding: 32px 24px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.wp-block-group.asio-footer .wp-block-columns { align-items: center !important; }
.wp-block-group.asio-footer p { font-size: .875rem !important; color: var(--asio-muted) !important; margin: 0 !important; }
.wp-block-group.asio-footer a { color: var(--asio-muted) !important; text-decoration: none !important; transition: color .2s; }
.wp-block-group.asio-footer a:hover { color: var(--asio-text) !important; }

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .wp-block-group.asio-section,
  .wp-block-group.asio-section--alt,
  .wp-block-group.asio-demo { padding-top: 64px !important; padding-bottom: 64px !important; }
  .wp-block-group.asio-hero { min-height: 100svh; }
}

/* ============================================================
   16. PIPEDRIVE FORMULAR – Zentrierung
   Deckt alle gängigen Pipedrive-Embed-Varianten ab:
   Script-Embed (.pipedriveWebForms), iFrame und data-Attribut.
   ============================================================ */
 
/* Wrapper des Script-Embeds */
.pipedriveWebForms,
[data-pd-webforms] {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box;
}
 
/* Das innere Formular-Element */
.pipedriveWebForms > div,
.pipedriveWebForms form,
[data-pd-webforms] > div {
  max-width: 100% !important;
}
 
/* iFrame-Variante */
iframe[src*="pipedrive"],
iframe[src*="webforms.pipedrive"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 720px !important;
  width: 100% !important;
  border: none;
}
 
/* Eltern-Block zentrieren (falls Formular in wp:group oder wp:html) */
.wp-block-group:has(.pipedriveWebForms),
.wp-block-group:has(iframe[src*="pipedrive"]) {
  display: flex;
  justify-content: center;
}

/* ============================================================
   PIPEDRIVE – Gezielter Fix (iframe ohne width-Angabe)
   ============================================================ */
.pipedriveWebForms {
  display: block !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
 
.pipedriveWebForms iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border: none !important;
}