/* ==========================================================================
   zti-service.css – Service-Seiten im Look & Feel der Startseite
   Gilt nur für: /auerswald-telefonanlage/ (Body-Class: zti-service-page)
   ========================================================================== */

/* ------------------------------
   Grundlayout / Lesbarkeit
--------------------------------- */
body.zti-service-page .entry-content {
  line-height: 1.75;
}

/* Einheitliche Section-Abstände */
body.zti-service-page .entry-content > section.wp-block-group {
  padding: clamp(18px, 3.2vw, 56px) 0;
}

/* Headline-Abstände */
body.zti-service-page .entry-content h1 { margin: 0 0 14px; }
body.zti-service-page .entry-content h2 { margin: 24px 0 12px; }
body.zti-service-page .entry-content h3 { margin: 18px 0 10px; }

/* Listen ruhiger */
body.zti-service-page .entry-content ul,
body.zti-service-page .entry-content ol {
  margin: 10px 0 18px 1.2em;
}
body.zti-service-page .entry-content li { margin: 6px 0; }

/* Separator dezent */
body.zti-service-page hr.wp-block-separator {
  margin: clamp(18px, 3vw, 34px) 0;
  opacity: .22;
}

/* Max-Width für Lesetext (innerhalb normaler Sections) */
body.zti-service-page .entry-content > section.wp-block-group .wp-block-group__inner-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------
   HERO (1. Section) – Fullwidth
--------------------------------- */
body.zti-service-page .entry-content > section.wp-block-group:first-of-type {
  /* full-bleed */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;

  margin: 0;
  padding: clamp(60px, 7vw, 120px) 0;

  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(97, 177, 228, .18), transparent 60%),
    linear-gradient(135deg, #0b1220, #0b2a3a);

  text-align: center;
  overflow: hidden;
}

/* Hero-Innencontainer */
body.zti-service-page .entry-content > section.wp-block-group:first-of-type .wp-block-group__inner-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero Textfarbe */
body.zti-service-page .entry-content > section.wp-block-group:first-of-type,
body.zti-service-page .entry-content > section.wp-block-group:first-of-type h1,
body.zti-service-page .entry-content > section.wp-block-group:first-of-type p {
  color: #ffffff;
}

/* Hero H1 etwas größer */
body.zti-service-page .entry-content > section.wp-block-group:first-of-type h1 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  letter-spacing: .2px;
}

/* Hero Lead-Text */
body.zti-service-page .entry-content > section.wp-block-group:first-of-type p.has-large-font-size {
  font-size: clamp(16px, 1.5vw, 20px);
  opacity: .95;
}

/* CTA Buttons mittig + spacing */
body.zti-service-page .entry-content > section.wp-block-group:first-of-type .wp-block-buttons {
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

/* ------------------------------
   Buttons – Startseiten-Look
--------------------------------- */
body.zti-service-page .wp-block-buttons {
  gap: 10px;
}

body.zti-service-page .wp-block-button__link {
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 650;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

body.zti-service-page .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}

body.zti-service-page .is-style-outline .wp-block-button__link {
  background: transparent;
  border-width: 2px;
}

/* ------------------------------
   "Warum Auerswald?" – 2. Section mit hellem Startseiten-Hintergrund
   (erste Section = Hero, zweite Section = Warum)
--------------------------------- */
body.zti-service-page .entry-content > section.wp-block-group:nth-of-type(2) {
  /* full-bleed background */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;

  margin: 0;
  padding: clamp(34px, 5vw, 70px) 0;

  /* Startseiten-ähnlicher, heller Verlauf */
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(97, 177, 228, .28), transparent 60%),
    linear-gradient(180deg, #f7fbff 0%, #eef6ff 45%, #ffffff 100%);
}

/* Text wieder dunkel (wie Startseite) */
body.zti-service-page .entry-content > section.wp-block-group:nth-of-type(2),
body.zti-service-page .entry-content > section.wp-block-group:nth-of-type(2) h1,
body.zti-service-page .entry-content > section.wp-block-group:nth-of-type(2) h2,
body.zti-service-page .entry-content > section.wp-block-group:nth-of-type(2) h3,
body.zti-service-page .entry-content > section.wp-block-group:nth-of-type(2) p,
body.zti-service-page .entry-content > section.wp-block-group:nth-of-type(2) li {
  color: #0b1220;
}

/* ------------------------------
   Cards: Columns (Leistungen) wie Startseite-Kacheln
--------------------------------- */
body.zti-service-page .wp-block-columns {
  gap: clamp(14px, 2vw, 22px);
  margin-top: 14px;
}

body.zti-service-page .wp-block-column {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: clamp(14px, 2.2vw, 22px);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* ------------------------------
   FAQ Details als Accordion
--------------------------------- */
body.zti-service-page details.wp-block-details {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 10px 0;
  background: #fff;
}

body.zti-service-page details.wp-block-details > summary {
  cursor: pointer;
  font-weight: 750;
}

body.zti-service-page details.wp-block-details[open] {
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
}

/* ------------------------------
   CF7 Formular Basics
--------------------------------- */
body.zti-service-page .wpcf7 form { margin-top: 12px; }

body.zti-service-page .wpcf7 input[type="text"],
body.zti-service-page .wpcf7 input[type="email"],
body.zti-service-page .wpcf7 input[type="tel"],
body.zti-service-page .wpcf7 textarea {
  width: 100%;
  max-width: 780px;
}
/* Nur den "Spalt" zwischen Hero (1. Block) und dem hellblauen Abschnitt (2. Block) entfernen,
   aber den INNEREN Padding des 2. Blocks beibehalten. */
body.zti-service-page .entry-content > section.wp-block-group:first-of-type{
  margin-bottom: 0 !important;
}

/* 2. Block soll direkt anstoßen -> kein Außenabstand nach oben */
body.zti-service-page .entry-content > section.wp-block-group:nth-of-type(2){
  margin-top: 0 !important;
  /* WICHTIG: padding-top NICHT ändern, damit der innere Abstand bleibt */
}

/* Falls ein Separator/Spacer dazwischen liegt: entfernen */
body.zti-service-page .entry-content > hr.wp-block-separator,
body.zti-service-page .entry-content > .wp-block-spacer{
  margin: 0 !important;
  height: 0 !important;
  padding: 0 !important;
}