/* =========================================================
   Schlüsseldienst Zierenberg – page-specific styles
   -----------------------------------------------------------
   This page intentionally does NOT load /maps/assets/style.css.
   It is a standalone design that only relies on the design
   tokens (--primary, --c-*, --radius, --shadow-*, --container,
   --font-body/--font-display …) already declared in :root by
   /css/global.css. No :root / global tokens are redefined here
   — only page-scoped aliases under .zg-page that point straight
   back to the existing global colors and fonts (no new colors,
   no new fonts introduced).
   ========================================================= */

.zg-page{
  /* page-scoped aliases — all values reference existing global.css tokens */
  --zg-ink:var(--c-dark);          /* #1a2a36 */
  --zg-ink-soft:var(--c-text-soft);/* #475569 */
  --zg-surface-alt:var(--c-bg-alt);/* #f6f7f8 */
  --zg-line:var(--c-border);       /* #e6e8ef */
  --zg-accent:var(--primary);
  --zg-accent-l:var(--primary-l);
  --zg-radius:18px;
  background:#fff;
  color:var(--zg-ink);
  font-family:var(--font-body);
  overflow-x:hidden;
}

.zg-page *{ box-sizing:border-box; }
.zg-page img{ max-width:100%; display:block; }
.zg-container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

.zg-page h1,.zg-page h2,.zg-page h3{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--zg-ink);
  line-height:1.15;
  margin:0 0 .5rem;
}
.zg-page p{ color:var(--zg-ink-soft); line-height:1.75; margin:0 0 1rem; }
.zg-page a{ text-decoration:none; color:inherit; }
.zg-page ul{ list-style:none; margin:0; padding:0; }

/* ---------- buttons (self-contained, brand colors only) ---------- */
.zg-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.4rem; border-radius:var(--radius-pill);
  font-weight:700; font-size:.95rem; border:2px solid transparent;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.zg-btn i{ font-size:1.05em; }
.zg-btn-xl{ padding:1.05rem 1.9rem; font-size:1.02rem; }
.zg-btn-sm{ padding:.55rem 1rem; font-size:.85rem; }
.zg-btn-primary{ background:var(--primary); color:#fff; box-shadow:var(--shadow-glow); }
.zg-btn-primary:hover{ background:var(--primary-hover); transform:translateY(-2px); }
.zg-btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.zg-btn-outline:hover{ background:#fff; color:var(--zg-ink); border-color:#fff; }
.zg-btn-ghost{ background:transparent; color:var(--zg-ink); border-color:var(--zg-line); }
.zg-btn-ghost:hover{ background:var(--zg-surface-alt); }
.zg-btn-dark{ background:var(--zg-ink); color:#fff; }
.zg-btn-dark:hover{ background:#000; transform:translateY(-2px); }
.zg-btn-block{ width:100%; justify-content:center; }

.zg-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary-hover); margin-bottom:.9rem;
}
.zg-eyebrow.light{ color:var(--primary-l); }
.zg-dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); display:inline-block; animation:zg-pulse 1.8s infinite; }
@keyframes zg-pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.45; transform:scale(1.5);} }

.zg-head{ max-width:680px; margin:0 auto 2.6rem; text-align:center; }
.zg-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); }
.zg-head p{ font-size:1.02rem; }
.zg-head.left{ margin:0 0 2.6rem; text-align:left; }

.zg-section{ padding:5rem 0; }
.zg-section--parchment{ background:var(--zg-surface-alt); }
.zg-section--ink{ background:var(--zg-ink); }

/* ---------- sticky quick-contact rail ---------- */
.zg-rail{
  position:fixed; z-index:60; right:18px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:12px;
}
.zg-rail a{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--zg-ink); box-shadow:var(--shadow-lg);
  font-size:1.2rem; border:1px solid var(--zg-line);
  transition:transform .2s ease, background .2s ease, color .2s ease, width .25s ease;
}
.zg-rail a.zg-rail-call{ background:var(--primary); color:#fff; border-color:transparent; }
.zg-rail a.zg-rail-wa{ background:var(--btn-wh); color:#fff; border-color:transparent; }
.zg-rail a:hover{ transform:scale(1.08); }
@media (max-width:1100px){ .zg-rail{ display:none; } }

/* ---------- HERO (diagonal split) ---------- */
.zg-hero{
  position:relative; background:var(--zg-ink); color:#fff;
  padding:calc(var(--header-h) + 3.6rem) 0 5.5rem;
  overflow:hidden;
}
.zg-hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center;
}
.zg-hero__text h1{
  color:#fff; font-size:clamp(2.1rem,4.2vw,3.4rem); margin-bottom:1.1rem;
}
.zg-hero__text h1 em{ font-style:normal; color:var(--primary-l); }
.zg-hero__lead{ color:#c7ced6; font-size:1.08rem; max-width:520px; }
.zg-hero__ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.6rem 0 1.8rem; }
.zg-hero__chips{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
.zg-hero__chips li{ display:flex; align-items:center; gap:.5rem; color:#dfe4ea; font-size:.92rem; }
.zg-hero__chips i{ color:var(--primary-l); }

.zg-hero__art{ position:relative; }
.zg-hero__frame{
  position:relative; border-radius:28px; overflow:hidden;
  clip-path:polygon(12% 0,100% 0,100% 88%,88% 100%,0 100%,0 12%);
  box-shadow:var(--shadow-lg);
}
.zg-hero__frame img{ width:100%; height:420px; object-fit:cover; }
.zg-hero__badge{
  position:absolute; left:-18px; bottom:-18px; background:#fff; color:var(--zg-ink);
  border-radius:var(--radius-lg); padding:1rem 1.2rem; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:.8rem; max-width:230px;
}
.zg-hero__badge .zg-badge-num{ font-size:1.6rem; font-weight:800; color:var(--primary); font-family:var(--font-display); }
.zg-hero__badge span small{ display:block; color:var(--zg-ink-soft); font-weight:600; font-size:.78rem; }
.zg-hero__rating{
  position:absolute; top:16px; right:16px; background:rgba(255,255,255,.94); color:var(--zg-ink);
  border-radius:var(--radius-pill); padding:.5rem .9rem; display:flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.85rem; box-shadow:var(--shadow-md);
}
.zg-hero__rating i{ color:var(--primary); }

@media (max-width:960px){
  .zg-hero__grid{ grid-template-columns:1fr; }
  .zg-hero__frame img{ height:300px; }
}

/* ---------- trust ribbon ---------- */
.zg-trust{ background:var(--zg-ink); }
.zg-trust__row{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem;
  padding:1.1rem 0; color:#fff; font-weight:700; font-size:.9rem;
}
.zg-trust__row span{ display:flex; align-items:center; gap:.5rem; }
.zg-trust__row i{ color:var(--primary-l); }

/* ---------- intro (about area) ---------- */
.zg-intro{ padding:5rem 0; }
.zg-intro__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:start; }
.zg-intro__facts{ display:grid; gap:.9rem; }
.zg-fact{
  display:flex; gap:.9rem; align-items:flex-start; background:var(--zg-surface-alt);
  border:1px solid var(--zg-line); border-radius:var(--zg-radius); padding:1rem 1.15rem;
}
.zg-fact i{ color:var(--primary); font-size:1.2rem; margin-top:.15rem; }
.zg-fact strong{ display:block; font-size:.95rem; }
.zg-fact span{ color:var(--zg-ink-soft); font-size:.86rem; }
@media (max-width:900px){ .zg-intro__grid{ grid-template-columns:1fr; } }

/* ---------- SERVICES (staggered honeycomb) ---------- */
.zg-services{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem 1.2rem;
}
.zg-service{
  background:#fff; border:1px solid var(--zg-line); border-radius:var(--zg-radius);
  padding:1.6rem 1.3rem; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.zg-service:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--primary); }
.zg-service:nth-child(2n){ transform:translateY(1.6rem); }
.zg-service:nth-child(2n):hover{ transform:translateY(calc(1.6rem - 6px)); }
.zg-service__icon{
  width:50px; height:50px; border-radius:14px; background:var(--primary-l);
  color:var(--primary-hover); display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:1rem;
}
.zg-service h3{ font-size:1.05rem; margin-bottom:.4rem; }
.zg-service p{ font-size:.88rem; margin-bottom:.8rem; }
.zg-service__price{
  display:inline-block; font-weight:800; font-size:.85rem; color:var(--primary);
  background:var(--primary-l); padding:.3rem .7rem; border-radius:var(--radius-pill);
}
.zg-service--accent{ background:var(--zg-ink); border-color:var(--zg-ink); }
.zg-service--accent h3, .zg-service--accent p{ color:#fff; }
.zg-service--accent .zg-service__icon{ background:var(--primary); color:#fff; }
.zg-service--accent .zg-service__price{ background:var(--primary); color:#fff; }

@media (max-width:1080px){ .zg-services{ grid-template-columns:repeat(2,1fr); } .zg-service:nth-child(2n){ transform:none; } }
@media (max-width:560px){ .zg-services{ grid-template-columns:1fr; } }

/* ---------- PRICING (ticket style, values mirror the other city pages) ---------- */
.zg-tickets{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.zg-ticket{
  position:relative; background:#fff; border:1px solid var(--zg-line);
  border-radius:var(--zg-radius); padding:1.7rem 1.4rem 1.5rem; box-shadow:var(--shadow-sm);
}
.zg-ticket::before,.zg-ticket::after{
  content:""; position:absolute; width:20px; height:20px; background:#fff;
  border:1px solid var(--zg-line); border-radius:50%; top:50%; transform:translateY(-50%);
}
.zg-ticket::before{ left:-11px; } .zg-ticket::after{ right:-11px; }
.zg-ticket--featured{ border:2px solid var(--primary); }
.zg-ticket__badge{
  position:absolute; top:-12px; right:16px; background:var(--primary); color:#fff;
  font-size:.7rem; font-weight:800; letter-spacing:.03em; padding:.3rem .7rem; border-radius:var(--radius-pill);
}
.zg-ticket__tag{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-hover); }
.zg-ticket h3{ font-size:1.08rem; margin:.35rem 0 .2rem; }
.zg-ticket__note{ font-size:.82rem; color:var(--zg-ink-soft); margin-bottom:.9rem; }
.zg-ticket__price{ font-family:var(--font-display); font-size:2.1rem; font-weight:800; color:var(--zg-ink); margin-bottom:1rem; }
.zg-ticket__price span{ font-size:1rem; font-weight:700; }
.zg-ticket ul{ margin-bottom:1.3rem; }
.zg-ticket li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.85rem; color:var(--zg-ink-soft); margin-bottom:.5rem; }
.zg-ticket li i{ color:var(--primary); margin-top:.15rem; }

.zg-price-note{
  display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; color:var(--zg-ink-soft);
  margin-top:2rem; max-width:760px; margin-left:auto; margin-right:auto; text-align:center; justify-content:center;
}
.zg-price-note i{ color:var(--primary); margin-top:.15rem; }

@media (max-width:1080px){ .zg-tickets{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .zg-tickets{ grid-template-columns:1fr; } }

/* ---------- PROCESS (connected horizontal steps) ---------- */
.zg-steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.zg-steps::before{
  content:""; position:absolute; top:26px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(90deg,var(--zg-line) 0 10px,transparent 10px 18px);
  z-index:0;
}
.zg-step{ position:relative; z-index:1; text-align:center; }
.zg-step__num{
  width:54px; height:54px; margin:0 auto 1rem; border-radius:50%; background:#fff;
  border:2px solid var(--primary); color:var(--primary); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-family:var(--font-display); font-size:1.15rem;
}
.zg-step h3{ font-size:1rem; margin-bottom:.35rem; }
.zg-step p{ font-size:.85rem; }
@media (max-width:900px){ .zg-steps{ grid-template-columns:1fr; } .zg-steps::before{ display:none; } }

/* ---------- WHY US (dark, cut-corner cards) ---------- */
.zg-why__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center; }
.zg-why h2{ color:#fff; }
.zg-why__lead{ color:#c7ced6; }
.zg-why__list{ display:grid; gap:1rem; margin-top:1.4rem; }
.zg-why__list li{ display:flex; gap:.9rem; align-items:flex-start; color:#e3e7eb; font-size:.92rem; }
.zg-why__list i{ color:var(--primary-l); font-size:1.15rem; margin-top:.1rem; }
.zg-why__list strong{ display:block; color:#fff; font-size:.98rem; }

.zg-why__cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.zg-wcard{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  padding:1.5rem 1.3rem; color:#fff;
  clip-path:polygon(0 0,100% 0,100% 84%,84% 100%,0 100%);
}
.zg-wcard strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:#fff; }
.zg-wcard span{ font-size:.85rem; color:#c7ced6; }
@media (max-width:900px){ .zg-why__grid{ grid-template-columns:1fr; } }

/* ---------- SERVICE AREAS + MAP ---------- */
.zg-areas{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; }
.zg-areas span{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.86rem; font-weight:600;
  background:#fff; border:1px solid var(--zg-line); padding:.5rem .95rem; border-radius:var(--radius-pill);
}
.zg-areas span i{ color:var(--primary); }
.zg-areas span.zg-area--main{ background:var(--zg-ink); color:#fff; border-color:var(--zg-ink); }
.zg-areas span.zg-area--main i{ color:var(--primary-l); }

.zg-map{ position:relative; border-radius:var(--zg-radius); overflow:hidden; box-shadow:var(--shadow-md); }
.zg-map__canvas{ width:100%; height:380px; }
.zg-map__card{
  position:absolute; left:20px; bottom:20px; background:#fff; padding:1.1rem 1.3rem;
  border-radius:14px; box-shadow:var(--shadow-lg); max-width:250px; z-index:400;
}
.zg-map__card i{ color:var(--primary); font-size:1.3rem; margin-bottom:.4rem; display:block; }
.zg-map__card strong{ display:block; margin-bottom:.2rem; }
.zg-map__card p{ font-size:.85rem; margin-bottom:.7rem; }

/* ---------- gallery strip ---------- */
.zg-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; }
.zg-gallery img{ border-radius:14px; height:150px; width:100%; object-fit:cover; }
@media (max-width:700px){ .zg-gallery{ grid-template-columns:repeat(2,1fr); } }

/* ---------- FAQ ---------- */
.zg-faq{ max-width:820px; margin:0 auto; display:grid; gap:.8rem; }
.zg-faq details{
  background:#fff; border:1px solid var(--zg-line); border-radius:14px; padding:1.1rem 1.3rem;
}
.zg-faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  font-weight:700; font-size:.98rem; color:var(--zg-ink);
}
.zg-faq summary::-webkit-details-marker{ display:none; }
.zg-faq summary i{ transition:transform .2s ease; color:var(--primary); }
.zg-faq details[open] summary i{ transform:rotate(45deg); }
.zg-faq p{ margin-top:.8rem; font-size:.92rem; }

/* ---------- CTA strip ---------- */
.zg-cta{
  background:linear-gradient(120deg,var(--primary),var(--primary-hover));
  color:#fff; padding:3.4rem 0;
}
.zg-cta__inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.6rem; }
.zg-cta h2{ color:#fff; font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:.3rem; }
.zg-cta p{ color:#ffe3da; margin:0; }
.zg-cta__buttons{ display:flex; gap:.9rem; flex-wrap:wrap; }

/* ---------- CONTACT ---------- */
.zg-contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.4rem; }
.zg-contact__list{ display:grid; gap:1rem; }
.zg-contact__list li{ display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid var(--zg-line); border-radius:14px; padding:1rem 1.2rem; }
.zg-contact__list i{ color:var(--primary); font-size:1.2rem; margin-top:.15rem; }
.zg-contact__list strong{ display:block; font-size:.9rem; }
.zg-contact__list a{ color:var(--zg-ink-soft); }
.zg-contact__card{
  background:var(--zg-ink); color:#fff; border-radius:var(--zg-radius); padding:2rem;
  display:flex; flex-direction:column; justify-content:center; gap:1rem;
}
.zg-contact__card h3{ color:#fff; }
.zg-contact__card p{ color:#c7ced6; }
@media (max-width:900px){ .zg-contact{ grid-template-columns:1fr; } }

/* ---------- reveal-on-scroll ---------- */
.zg-reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.zg-reveal.zg-in{ opacity:1; transform:none; }