/* Zollern-IT – Backup & Restore Landingpage
   Klassen-Präfix: zti-
   Hinweis: Farben sind bewusst neutral gehalten und nutzen CSS-Variablen.
*/

:root{
  --zti-bg: #ffffff;
  --zti-text: #0f172a;           /* slate-900 */
  --zti-muted: #475569;          /* slate-600 */
  --zti-border: rgba(15, 23, 42, .10);
  --zti-shadow: 0 12px 34px rgba(15, 23, 42, .10);

  --zti-brand: #14b8a6;          /* teal-500 */
  --zti-brand-2: #06b6d4;        /* cyan-500 */
  --zti-dark: #0b1220;           /* deep navy */
  --zti-dark-2: #111a2e;

  --zti-radius: 18px;
  --zti-radius-lg: 22px;

  --zti-container: 1180px;
}

.zti-page{
  color: var(--zti-text);
  background: var(--zti-bg);
}

/* Container */
.zti-container{
  max-width: var(--zti-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Sections */
.zti-section{
  padding: 72px 0;
}
@media (max-width: 900px){
  .zti-section{ padding: 54px 0; }
}
@media (max-width: 600px){
  .zti-section{ padding: 44px 0; }
}

/* Hero */
.zti-fullwidth{
  width: 100%;
}
.zti-hero{
  padding: 86px 0;
  position: relative;
  overflow: hidden;
}
.zti-hero--dark{
  color: #fff;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(20,184,166,.24), transparent 60%),
    radial-gradient(700px 500px at 85% 20%, rgba(6,182,212,.18), transparent 55%),
    linear-gradient(180deg, var(--zti-dark), var(--zti-dark-2));
}
@media (max-width: 900px){
  .zti-hero{ padding: 64px 0; }
}
@media (max-width: 600px){
  .zti-hero{ padding: 54px 0; }
}

.zti-hero-grid{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 980px){
  .zti-hero-grid{ grid-template-columns: 1fr; }
}

.zti-hero-content h1{
  margin: 0 0 14px 0;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
.zti-lead{
  margin: 0 0 18px 0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}
.zti-hero-note{
  margin: 14px 0 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}

.zti-hero-bullets{
  margin: 0 0 22px 0;
  padding: 0;
  list-style: none;
}
.zti-hero-bullets li{
  position: relative;
  padding-left: 26px;
  margin: 10px 0;
  color: rgba(255,255,255,.86);
  line-height: 1.5;
}
.zti-hero-bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--zti-brand), var(--zti-brand-2));
  box-shadow: 0 0 0 4px rgba(20,184,166,.16);
}

/* Light gradient section */
.zti-section--lightgrad{
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(6,182,212,.10), transparent 60%),
    radial-gradient(800px 420px at 90% 20%, rgba(20,184,166,.10), transparent 55%),
    linear-gradient(180deg, #f8fbff, #ffffff);
}

/* Alternate / muted section */
.zti-section--alt{
  background: linear-gradient(180deg, #f7fafc, #ffffff);
}

/* Intro text */
.zti-intro{
  margin: 10px 0 0 0;
  color: var(--zti-muted);
  max-width: 72ch;
  line-height: 1.65;
}

/* Split layout */
.zti-split{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 980px){
  .zti-split{ grid-template-columns: 1fr; }
}

/* Card base */
.zti-card{
  background: #fff;
  border: 1px solid var(--zti-border);
  border-radius: var(--zti-radius);
  box-shadow: var(--zti-shadow);
  padding: 22px 22px;
}
.zti-card-title{
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.zti-small{
  margin: 0;
  color: var(--zti-muted);
  line-height: 1.65;
}

/* Dark card */
.zti-card--dark{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
}
.zti-card--dark .zti-card-title{
  color: #fff;
}
.zti-card--dark p,
.zti-card--dark li{
  color: rgba(255,255,255,.86);
}
.zti-card--dark .zti-btn--link{
  color: rgba(255,255,255,.90);
}

/* Stat card stack */
.zti-statcard{
  display: grid;
  gap: 16px;
}

/* Pills */
.zti-pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.zti-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  color: #0f172a;
  background: linear-gradient(90deg, rgba(20,184,166,.14), rgba(6,182,212,.14));
  border: 1px solid rgba(6,182,212,.18);
}

/* Lists */
.zti-bullets{
  margin: 14px 0 0 0;
  padding-left: 18px;
  color: var(--zti-muted);
  line-height: 1.7;
}
.zti-bullets li{ margin: 8px 0; }

.zti-checklist{
  margin: 12px 0 0 0;
  padding: 0;
  list-style: none;
}
.zti-checklist li{
  position: relative;
  padding-left: 28px;
  margin: 10px 0;
  line-height: 1.55;
}
.zti-checklist li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: #0b1220;
  background: linear-gradient(90deg, var(--zti-brand), var(--zti-brand-2));
  box-shadow: 0 0 0 4px rgba(20,184,166,.15);
}

.zti-list{
  margin: 12px 0 0 0;
  padding-left: 18px;
  color: var(--zti-muted);
  line-height: 1.7;
}
.zti-list li{ margin: 7px 0; }

/* Buttons */
.zti-cta-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.zti-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  cursor: pointer;
  user-select: none;
}
.zti-btn:focus{
  outline: 2px solid rgba(6,182,212,.35);
  outline-offset: 3px;
}

.zti-btn--primary{
  color: #0b1220;
  background: linear-gradient(90deg, var(--zti-brand), var(--zti-brand-2));
  box-shadow: 0 10px 24px rgba(6,182,212,.20);
}
.zti-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(6,182,212,.26);
}

.zti-btn--secondary{
  color: #0b1220;
  background: rgba(255,255,255,.90);
  border-color: rgba(255,255,255,.30);
}
.zti-btn--secondary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

.zti-btn--ghost{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.zti-btn--ghost:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.zti-btn--link{
  padding: 10px 0;
  border-radius: 0;
  background: transparent;
  border-color: transparent;
  color: var(--zti-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.zti-btn--link:hover{
  color: var(--zti-brand-2);
}

/* Mini CTA inside cards */
.zti-mini-cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* Cards grid */
.zti-cards{
  margin-top: 26px;
  display: grid;
  gap: 18px;
}
.zti-cards--3{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){
  .zti-cards--3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .zti-cards--3{ grid-template-columns: 1fr; }
}

.zti-card--service{
  padding: 22px 22px;
}
.zti-card--service h3{
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 1.25;
}
.zti-card--service p{
  margin: 0;
  color: var(--zti-muted);
  line-height: 1.65;
}

/* Highlight band */
.zti-highlight{
  margin-top: 26px;
  border-radius: var(--zti-radius-lg);
  background:
    radial-gradient(900px 340px at 15% 30%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(700px 340px at 85% 40%, rgba(6,182,212,.14), transparent 55%),
    linear-gradient(180deg, #0b1220, #101b32);
  color: #fff;
  padding: 26px;
}
.zti-highlight-inner{
  display: grid;
  gap: 10px;
  max-width: 78ch;
}
.zti-highlight h3{
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.zti-highlight p{
  margin: 0;
  color: rgba(255,255,255,.86);
  line-height: 1.6;
}

/* Steps */
.zti-steps{
  margin-top: 24px;
  display: grid;
  gap: 14px;
}
.zti-step{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 18px;
  border: 1px solid var(--zti-border);
  border-radius: var(--zti-radius);
  background: #fff;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.zti-step-num{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #0b1220;
  background: linear-gradient(90deg, rgba(20,184,166,.20), rgba(6,182,212,.18));
  border: 1px solid rgba(6,182,212,.18);
}
.zti-step-body h3{
  margin: 0 0 6px 0;
  font-size: 18px;
}
.zti-step-body p{
  margin: 0;
  color: var(--zti-muted);
  line-height: 1.65;
}

/* Why grid */
.zti-why-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px){
  .zti-why-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .zti-why-grid{ grid-template-columns: 1fr; }
}
.zti-why-grid .zti-card h3{
  margin: 0 0 10px 0;
  font-size: 18px;
}
.zti-why-grid .zti-card p{
  margin: 0;
  color: var(--zti-muted);
  line-height: 1.65;
}

/* Proof block */
.zti-proof{
  margin-top: 20px;
}
.zti-proof-inner{
  padding: 22px;
  border-radius: var(--zti-radius-lg);
  border: 1px solid rgba(6,182,212,.18);
  background: linear-gradient(180deg, rgba(6,182,212,.08), rgba(20,184,166,.06));
}

/* FAQ */
.zti-faq{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.zti-faq-item{
  border: 1px solid var(--zti-border);
  border-radius: var(--zti-radius);
  background: #fff;
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
  overflow: hidden;
}
.zti-faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.zti-faq-item summary::-webkit-details-marker{ display: none; }

.zti-faq-item summary::after{
  content: "+";
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,182,212,.10);
  border: 1px solid rgba(6,182,212,.18);
  color: #0b1220;
  font-weight: 900;
  transition: transform .12s ease;
}
.zti-faq-item[open] summary::after{
  content: "–";
  transform: translateY(-1px);
}
.zti-faq-content{
  padding: 0 18px 16px 18px;
}
.zti-faq-content p{
  margin: 0;
  color: var(--zti-muted);
  line-height: 1.65;
}

/* CTA section */
.zti-section--cta{
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(20,184,166,.14), transparent 60%),
    radial-gradient(800px 420px at 90% 20%, rgba(6,182,212,.12), transparent 55%),
    linear-gradient(180deg, #0b1220, #101b32);
  color: #fff;
}
.zti-section--cta h2,
.zti-section--cta p,
.zti-section--cta li{
  color: #fff;
}
.zti-cta-panel{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px){
  .zti-cta-panel{ grid-template-columns: 1fr; }
}
.zti-cta-text h2{
  margin: 0 0 10px 0;
  font-size: clamp(24px, 2.3vw, 32px);
  letter-spacing: -0.02em;
}
.zti-cta-text .zti-intro{
  color: rgba(255,255,255,.86);
}
.zti-cta-form{
  padding: 18px;
  border-radius: var(--zti-radius-lg);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}
.zti-form-note{
  margin: 12px 0 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.74);
  line-height: 1.5;
}

/* Make CF7 look clean inside CTA */
.zti-cta-form .wpcf7{
  margin: 0;
}
.zti-cta-form input[type="text"],
.zti-cta-form input[type="email"],
.zti-cta-form input[type="tel"],
.zti-cta-form input[type="url"],
.zti-cta-form textarea,
.zti-cta-form select{
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 12px 14px;
  box-sizing: border-box;
}
.zti-cta-form textarea{
  min-height: 130px;
}
.zti-cta-form input::placeholder,
.zti-cta-form textarea::placeholder{
  color: rgba(255,255,255,.65);
}
.zti-cta-form input:focus,
.zti-cta-form textarea:focus,
.zti-cta-form select:focus{
  outline: 2px solid rgba(6,182,212,.35);
  outline-offset: 2px;
}

/* CF7 submit button */
.zti-cta-form input[type="submit"],
.zti-cta-form button[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(90deg, var(--zti-brand), var(--zti-brand-2));
  color: #0b1220;
  font-weight: 750;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 24px rgba(6,182,212,.20);
}
.zti-cta-form input[type="submit"]:hover,
.zti-cta-form button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(6,182,212,.26);
}

/* Spacing helpers for Gutenberg defaults */
.zti-page h2{
  margin: 0 0 10px 0;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.02em;
}
.zti-page h3{
  letter-spacing: -0.01em;
}
.zti-page p{
  margin: 10px 0 0 0;
}
.zti-page p + ul,
.zti-page p + ol{
  margin-top: 12px;
}

/* Safer link styling inside sections */
.zti-page a{
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
.zti-hero--dark a{ color: #fff; }