/* ===== Zollern-IT Startseite (Home) ===== */

/* Seam fix: remove gap between video and next block */
.wp-block-cover.alignfull.zti-hero-video{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.wp-block-cover.alignfull.zti-hero-video + .wp-block-group.zti-page{
  margin-top:0 !important;
}
.wp-block-group.zti-page{
  margin-top:0 !important;
  padding-top:0 !important;
}
.wp-block-group.zti-page .wp-block-group.zti-hero{
  margin-top:0 !important;
}

/* ===== HERO VIDEO with pause button ===== */
.zti-hero-video{position:relative}
.zti-hero-video .wp-block-cover__background{opacity:.06 !important;} /* we use our own overlay */

/* Blue overlay */
.zti-hero-video:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(59,130,246,.45), transparent 60%),
    radial-gradient(700px 380px at 95% 0%, rgba(22,179,179,.22), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.18), rgba(2,6,23,.42));
  pointer-events:none;
  z-index:1;
}

/* Text lower + centered */
.zti-hero-video .wp-block-cover__inner-container{
  position:relative; z-index:2;
  min-height:80vh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 16px 9vh;
  text-align:center;
}
.zti-hero-video h1{
  margin:0;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 12px 40px rgba(0,0,0,.45);
  
}
.zti-hero-sub{
  margin:14px auto 0;
  max-width:70ch;
  color:rgba(255,255,255,.92);
  font-weight:600;
  text-shadow:0 12px 40px rgba(0,0,0,.45);
}
@media (min-width:860px){ .zti-hero-video h1{font-size:3.1rem} }
@media (max-width:859px){ .zti-hero-video h1{font-size:2.2rem} }




/* Pause button (bottom center) */
.zti-video-toggle{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(2,6,23,.35);
  color:#fff;
  backdrop-filter:saturate(140%) blur(10px);
  cursor:pointer;
  font-weight:800;
}
.zti-video-toggle:hover{background:rgba(2,6,23,.45)}
.zti-video-toggle:focus{outline:2px solid rgba(59,130,246,.8); outline-offset:3px}
.zti-video-icon{
  width:10px;height:10px;display:inline-block;
  border-left:8px solid #fff;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  margin-left:2px;
}
.zti-video-toggle[data-state="playing"] .zti-video-icon{
  width:12px;height:12px;margin-left:0;
  border:none;
  position:relative;
}
.zti-video-toggle[data-state="playing"] .zti-video-icon:before,
.zti-video-toggle[data-state="playing"] .zti-video-icon:after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:4px; background:#fff; border-radius:1px;
}
.zti-video-toggle[data-state="playing"] .zti-video-icon:before{left:0}
.zti-video-toggle[data-state="playing"] .zti-video-icon:after{right:0}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .zti-hero-video video{display:none !important;}
  .zti-video-toggle{display:none !important;}
}


/* ===== Content Blocks (below video) ===== */
.zti-page{
  --zti-primary:#1b75bc;
  --zti-accent:#2aaae1;
  --zti-dark:#2e383b;

  --zti-text:#111827;
  --zti-muted:#5b6670;
  --zti-border:rgba(46,56,59,.12);
  --zti-card:#ffffff;
  --zti-soft:rgba(42,170,225,.12);
  --zti-radius:18px;

  color:var(--zti-text);
}

.zti-wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.zti-section{padding:44px 0}
.zti-hero{
  margin-top:0 !important;     /* wichtig: kein Abstand zum Video */
  padding:54px 0 40px;

  background:
    radial-gradient(900px 420px at 10% -10%, rgba(42,170,225,.28), transparent 60%),
    radial-gradient(700px 380px at 95% 0%, rgba(27,117,188,.22), transparent 55%),
    linear-gradient(180deg, rgba(27,117,188,.08), rgba(255,255,255,0) 55%);

  border-bottom:1px solid var(--zti-border);
}
.zti-kicker{color:var(--zti-accent);}
.zti-btn-primary{background:var(--zti-primary);}
.zti-dot{background:var(--zti-accent);}

.zti-hero h1{line-height:1.08;margin:0 0 14px;font-weight:800;letter-spacing:-.02em}
.zti-lead{font-size:1.06rem;color:var(--zti-muted);margin:0 0 20px;
   hyphens: auto;
    text-align: justify; /* für Edge */
    -moz-text-align-last: left; /* für Firefox vor 58.0 */
    text-align-last: left;

}
.zti-badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.zti-badges li{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--zti-border);
  border-radius:999px;background:rgba(255,255,255,.65);
  backdrop-filter:saturate(140%) blur(6px);
  font-size:.95rem
}
.zti-dot{width:10px;height:10px;border-radius:999px;background:var(--zti-accent);display:inline-block}
.zti-grid{display:grid;gap:16px}
@media(min-width:860px){
  .zti-grid-2{grid-template-columns:1fr 1fr}
  .zti-grid-3{grid-template-columns:repeat(3,1fr)}
}
.zti-card{
  background:var(--zti-card);
  border:1px solid var(--zti-border);
  border-radius:var(--zti-radius);
  padding:18px 18px;
  box-shadow:0 10px 30px rgba(11,18,32,.06);
}
.zti-card h3{margin:0 0 8px;font-size:1.05rem}
.zti-card p{margin:0;color:var(--zti-muted)}
.zti-card ul{margin:10px 0 0;padding-left:18px;color:var(--zti-muted)}
.zti-kicker{color:var(--zti-accent);font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:.82rem;margin:0 0 8px}
.zti-h2{margin:0 0 14px;font-weight:800;letter-spacing:-.01em}
.zti-sub{margin:0 0 18px;color:var(--zti-muted);max-width:70ch}
.zti-cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0}
.zti-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:12px;border:1px solid var(--zti-border);
  text-decoration:none;font-weight:700
}
.zti-btn-primary{background:var(--zti-accent);color:white;border-color:transparent}
.zti-btn-secondary{background:white;color:var(--zti-text)}
.zti-note{margin-top:12px;color:var(--zti-muted);font-size:.95rem}
.zti-offer{
  background:linear-gradient(135deg, var(--zti-soft), rgba(255,255,255,1) 70%);
  border:1px solid rgba(22,179,179,.25);
}
.zti-steps{counter-reset:step}
.zti-step{position:relative;padding-left:46px}
.zti-step:before{
  counter-increment:step;
  content:counter(step);
  position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:12px;
  background:rgba(22,179,179,.16);
  border:1px solid rgba(22,179,179,.30);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#0b1220
}
.zti-faq details{
  border:1px solid var(--zti-border);
  border-radius:14px;
  padding:12px 14px;
  background:#fff
}
.zti-faq summary{cursor:pointer;font-weight:800;list-style:none}
.zti-faq summary::-webkit-details-marker{display:none}
.zti-faq p{margin:10px 0 0;color:var(--zti-muted)}
.zti-footer-cta{
  background:linear-gradient(180deg, rgba(11,18,32,.02), transparent);
  border-top:1px solid var(--zti-border);
}
/* ===== HERO text: centered, one-line headline ===== */
.zti-hero-video .wp-block-cover__inner-container{
  position:relative; z-index:2;
  min-height:80vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  padding:0 24px 9vh;
  text-align:center !important;
}

.zti-hero-title{
  margin:0 !important;
  color:#fff;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.05;
  text-shadow:0 12px 40px rgba(0,0,0,.45);

  /* one-line */
  white-space:nowrap;
}

.zti-hero-sub{
  margin:0 !important;
  max-width:70ch;
  color:rgba(255,255,255,.92);
  font-weight:600;
  text-shadow:0 12px 40px rgba(0,0,0,.45);
}

/* Responsive sizes */
@media (min-width:1100px){
  .zti-hero-title{font-size:3.1rem;}
  .zti-hero-sub{font-size:1.15rem;}
}
@media (min-width:860px) and (max-width:1099px){
  .zti-hero-title{font-size:2.7rem;}
  .zti-hero-sub{font-size:1.08rem;}
}
@media (max-width:859px){
  /* On small screens we allow wrapping to avoid overflow */
  .zti-hero-title{
    font-size:2.0rem;
    white-space:normal;
  }
  .zti-hero-sub{font-size:1.0rem;}
}
/* ===== Hard center fix (neutralize theme/gutenberg offsets) ===== */
.zti-hero-video .wp-block-cover__inner-container{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

.zti-hero-video .wp-block-cover__inner-container > *{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Ensure the headline is centered by its own box */
.zti-hero-title{
  display:block !important;
  width:fit-content;
  max-width:100%;
  text-align:center !important;
}



/* FIX: remove the padding ONLY for the first group after the hero video */
.site-main .wp-block-cover.alignfull.zti-hero-video + .wp-block-group .wp-block-group__inner-container{
  padding: 0 !important;
}

/* ===== Leistungen Section (dark) ===== */
.zti-section-dark{
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(42,170,225,.18), transparent 60%),
    radial-gradient(700px 380px at 95% 0%, rgba(27,117,188,.16), transparent 55%),
    linear-gradient(180deg, rgba(46,56,59,1), rgba(46,56,59,.92));
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.zti-section-dark .zti-h2,
.zti-section-dark .zti-sub{ color:#fff; }

.zti-section-dark .zti-sub{ opacity:.85; }

.zti-section-dark .zti-kicker{
  color: var(--zti-accent);
}

/* 4er Grid */
@media(min-width:1024px){
  .zti-grid-4{ grid-template-columns:repeat(4, 1fr); }
}
@media(min-width:640px) and (max-width:1023px){
  .zti-grid-4{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:639px){
  .zti-grid-4{ grid-template-columns:1fr; }
}

/* Leistungskarten */
.zti-service-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--zti-radius);
  overflow:hidden;
  padding:0;
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.zti-service-card:hover{
  transform: translateY(-3px);
  border-color: rgba(42,170,225,.35);
  background: rgba(255,255,255,.08);
}
.zti-service-media{
  aspect-ratio: 16/10;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.zti-service-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}
.zti-service-body{
  padding:14px 14px 16px;
}
.zti-service-body h3{
  margin:0 0 8px;
  font-size:1.02rem;
  color:#fff;
}
.zti-service-body p{
  margin:0;
  color: rgba(255,255,255,.82);
  line-height:1.45;
  font-size:.95rem;
}

/* Service-Card als Link ohne optische Änderung */
a.zti-cardlink{
  display:block;
  color: inherit;
  text-decoration: none;
}
a.zti-cardlink:hover,
a.zti-cardlink:active{
  color: inherit;
  text-decoration: none;
}

/* Schöner Fokus für Tastatur */
a.zti-cardlink:focus-visible{
  outline: 2px solid rgba(42,170,225,.85);
  outline-offset: 4px;
  border-radius: 18px; /* passend zu deinem Card-Radius */
}


/* ===== Kunden Section (light gradient) ===== */
.zti-section-light{
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(42,170,225,.22), transparent 60%),
    radial-gradient(700px 380px at 95% 0%, rgba(27,117,188,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
  border-top:1px solid var(--zti-border);
}

.zti-section-light .zti-card{
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(140%) blur(8px);
}

/* ===== Feature-List like example (2 columns with icons) ===== */
.zti-feature-block{
  margin-top:26px;
}

.zti-feature-block .zti-h2{
  margin-bottom:18px;
}

.zti-feature-grid{
  display:grid;
  gap:14px 42px;
}

@media(min-width:900px){
  .zti-feature-grid{
    grid-template-columns: 1fr 1fr;
    gap:18px 56px;
  }
}

.zti-feature{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:8px 0;
}

.zti-feature-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(42,170,225,.14);          /* accent tint */
  border: 1px solid rgba(27,117,188,.18);    /* primary tint */
  flex:0 0 42px;
}

.zti-feature-icon svg{
  width:22px;
  height:22px;
  fill: none;
  stroke: var(--zti-primary, #1b75bc);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zti-feature-text{
  font-weight:700;
  color: var(--zti-dark, #2e383b);
  line-height:1.25;
}

.zti-feature-text small{
  display:block;
  margin-top:4px;
  font-weight:500;
  color: var(--zti-muted, #5b6670);
  line-height:1.45;
}

/* ===== 4er Fokus-Block (Hex Icons) ===== */
.zti-focus{
  background: #e9eff3;
  border-top:1px solid var(--zti-border);
}
.zti-focus .zti-kicker{
  text-align:center;
  color: var(--zti-accent);
  margin-bottom:10px;
}
.zti-focus .zti-h2{
  text-align:center;
  margin-bottom:26px;
}
.zti-focus-grid{
  display:grid;
  gap:22px;
}
@media(min-width:1024px){
  .zti-focus-grid{ grid-template-columns:repeat(4, 1fr); }
}
@media(min-width:640px) and (max-width:1023px){
  .zti-focus-grid{ grid-template-columns:repeat(2, 1fr); }
}

.zti-focus-item{
  text-align:center;
  padding:10px 6px;
}
.zti-hex{
  width:150px;
  height:130px;
  margin:0 auto 16px;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(46,56,59,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.zti-hex svg{
  width:62px;
  height:62px;
  stroke:#111;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.zti-hex .zti-acc{ stroke: var(--zti-accent); }
.zti-focus-item h3{
  margin:0 0 10px;
  font-size:1.2rem;
}
.zti-focus-item p{
  margin:0;
  color: var(--zti-muted);
  line-height:1.55;
  max-width:32ch;
  margin-left:auto;
  margin-right:auto;
}
/* ===== Hardware & Virtualisierung (media + text) ===== */
.zti-split{
  align-items:center;
}
.zti-split-media{
  border-radius: var(--zti-radius);
  overflow:hidden;
  border:1px solid var(--zti-border);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  background:#fff;
}
.zti-split-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.zti-split h2{ margin-top:0; }
.zti-split p{ color: var(--zti-muted); }
.zti-split ul{ color: var(--zti-muted); }

.zti-card-media{
  height: 220px;              /* falls bei dir anders, beibehalten */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== FIX: Hero Video on mobile should not be cropped ===== */
@media (max-width: 859px){
  .wp-block-cover.alignfull.zti-hero-video .wp-block-cover__video-background,
  .wp-block-cover.alignfull.zti-hero-video video{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;      /* show full video */
    object-position: center center !important;
  }

  /* optional: nicer background behind letterboxing */
  .wp-block-cover.alignfull.zti-hero-video{
    background-color: #000;
  }

  /* optional: reduce hero height a bit on phones */
  .zti-hero-video .wp-block-cover__inner-container{
    min-height: 62vh;
  }
}