/* =========================================================================
   SCHLÜSSELDIENST WOLFHAGEN — page-specific styles
   Self-contained: no dependency on /maps/assets/style.css or any sibling
   location page. Only shared source of truth is /css/global.css.

   STRICT RULE: every color used below is one of global.css's own custom
   properties (--primary, --primary-hover, --primary-l, --c-bg, --c-bg-alt,
   --c-text, --c-text-soft, --c-muted, --c-border, --c-dark / --c-dark-2 /
   --c-dark-soft) or a neutral white/black used only for opacity overlays
   and shadows (the same technique global.css itself uses for --shadow-*).
   No new hue is introduced anywhere in this file. Typography uses only
   var(--font-display) / var(--font-body) — no additional font is loaded.

   Design signature: a "town seal" / stamped-emblem language (fitting
   Wolfhagen's historic fortified old town) — a circular seal in the hero,
   a horizontal snap-scroll service ledger instead of a grid or spine, and
   a flat FAQ grid instead of an accordion. Everything is prefixed `wf-`
   so nothing collides with other location pages. Page kept intentionally
   short: hero, services+pricing, map, FAQ, closing CTA.
   ========================================================================= */

.wf-page, .wf-page p, .wf-page li, .wf-page a, .wf-page span, .wf-page div{
  font-family: var(--font-body);
}
.wf-page h1, .wf-page h2, .wf-page h3, .wf-page h4{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.wf-page section{ padding: 4.4rem 0; }
.wf-page .wf-container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- shared bits ---------- */
.wf-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--primary-hover);
  background: var(--primary-l);
  border-radius: var(--radius-pill);
  padding:.4rem .85rem .4rem .6rem;
}
.wf-eyebrow .wf-dot{ width:7px; height:7px; border-radius:50%; background:var(--primary); flex:0 0 auto; }
.wf-eyebrow.on-dark{ background: rgba(255,255,255,.14); color:#fff; }
.wf-eyebrow.on-dark .wf-dot{ background:#fff; }

.wf-head{ max-width: 620px; margin: 0 auto 2.4rem; text-align:center; }
.wf-head h2{ font-size: 2rem; line-height:1.15; margin:.7rem 0 .7rem; color:var(--c-text); }
.wf-head p{ color: var(--c-text-soft); font-size:1rem; line-height:1.6; margin:0; }
.wf-head.on-dark h2{ color:#fff; }
.wf-head.on-dark p{ color: rgba(255,255,255,.75); }

.wf-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.95rem;
  padding: .9rem 1.45rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.wf-btn-primary{ background: var(--primary); color:#fff; box-shadow: var(--shadow-glow); }
.wf-btn-primary:hover{ background: var(--primary-hover); transform: translateY(-2px); color:#fff; }
.wf-btn-outline{ background: transparent; border-color: var(--c-border); color: var(--c-text); }
.wf-btn-outline:hover{ border-color: var(--primary); color: var(--primary-hover); transform: translateY(-2px); }
.wf-btn-outline.on-dark{ border-color: rgba(255,255,255,.4); color:#fff; }
.wf-btn-outline.on-dark:hover{ border-color:#fff; color:#fff; }
.wf-btn-block{ width:100%; justify-content:center; }
.wf-btn-sm{ padding:.55rem 1rem; font-size:.82rem; }

/* =========================================================================
   HERO — centered, with a stamped circular "town seal" emblem
   ========================================================================= */
.wf-hero{
  position:relative;
  background: var(--c-bg);
  padding: 3.6rem 0 3.2rem;
  text-align:center;
  overflow:hidden;
}
.wf-hero-bg{
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:900px; height:900px; border-radius:50%;
  background: var(--primary-l);
  opacity:.5;
  filter: blur(2px);
}
.wf-hero-inner{ position:relative; z-index:1; max-width: 760px; margin:0 auto; }

.wf-seal{ width:128px; height:128px; margin: 0 auto 1.4rem; position:relative; }
.wf-seal svg{ width:100%; height:100%; }
.wf-seal-ring{ fill:none; stroke: var(--primary); stroke-width:2; }
.wf-seal-ring-dash{ fill:none; stroke: var(--c-border); stroke-width:1.4; stroke-dasharray: 3 5; }
.wf-seal-text{ fill: var(--primary-hover); font-size: 8.4px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-family: var(--font-body); }
.wf-seal-core{ fill: var(--primary-l); stroke: var(--primary); stroke-width:1.4; }
.wf-seal-icon{ color: var(--primary-hover); font-size:1.5rem; }
.wf-seal-icon-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

.wf-hero-inner .wf-eyebrow{ margin-bottom: 1.1rem; }
.wf-hero-inner h1{
  font-size: 2.55rem;
  line-height:1.12;
  color: var(--c-text);
  margin: 0 0 1rem;
}
.wf-hero-inner h1 em{ font-style:normal; color: var(--primary); }
.wf-hero-inner .wf-lead{
  color: var(--c-text-soft);
  font-size:1.05rem; line-height:1.7;
  max-width: 560px; margin: 0 auto 1.8rem;
}
.wf-hero-ctas{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-bottom: 2.2rem; }

.wf-stat-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap: .7rem;
}
.wf-stat-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding: .55rem 1rem;
  box-shadow: var(--shadow-sm);
  font-size:.84rem; font-weight:600; color: var(--c-text);
}
.wf-stat-pill i{ color: var(--primary); font-size:.95rem; }

@media (max-width: 640px){
  .wf-hero-inner h1{ font-size: 1.9rem; }
  .wf-seal{ width:104px; height:104px; }
}

/* =========================================================================
   SERVICES + PRICING — horizontal snap-scroll ledger
   ========================================================================= */
.wf-services{ background: var(--c-bg-alt); }
.wf-scroll-hint{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  font-size:.78rem; color: var(--c-muted); font-weight:600;
  margin-top: -1.4rem; margin-bottom: 2rem;
}
.wf-scroll-hint i{ animation: wf-nudge 1.6s ease-in-out infinite; }
@keyframes wf-nudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(5px);} }
@media (prefers-reduced-motion: reduce){ .wf-scroll-hint i{ animation:none; } }

.wf-ledger{
  display:flex; gap: 1.1rem;
  overflow-x:auto;
  padding: .3rem .2rem 1.1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.wf-ledger::-webkit-scrollbar{ height:6px; }
.wf-ledger::-webkit-scrollbar-thumb{ background: var(--c-border); border-radius: var(--radius-pill); }

.wf-ticket{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 258px;
  background:#fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: var(--shadow-sm);
  position:relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wf-ticket:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(239,73,51,.3); }
.wf-ticket::after{
  content:"";
  position:absolute; left:0; right:0; bottom: 62px;
  border-top: 1.5px dashed var(--c-border);
}
.wf-ticket-badge{
  width:50px; height:50px; border-radius:50%;
  background: var(--primary-l); color: var(--primary-hover);
  display:grid; place-items:center; font-size:1.3rem;
  margin: 0 auto .9rem;
  border: 1.5px dashed var(--primary);
}
.wf-ticket h3{ font-size:1rem; text-align:center; margin: 0 0 .5rem; color: var(--c-text); }
.wf-ticket p{ font-size:.83rem; color: var(--c-text-soft); text-align:center; line-height:1.55; margin: 0 0 1.4rem; min-height: 62px; }
.wf-ticket-price{
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  font-family: var(--font-display); font-weight:700; font-size:1.15rem;
  color: var(--primary-hover); padding-top: 1rem;
}
.wf-ticket-price small{ font-weight:600; color: var(--c-muted); font-size:.72rem; }

.wf-services-note{
  display:flex; align-items:flex-start; gap:.55rem; justify-content:center;
  max-width: 560px; margin: 0 auto; text-align:center;
  color: var(--c-text-soft); font-size:.85rem; line-height:1.6;
}
.wf-services-note i{ color: var(--primary); margin-top:.15rem; }

@media (max-width: 640px){ .wf-ticket{ width: 228px; } }

/* =========================================================================
   MAP
   ========================================================================= */
.wf-map-section{ background: var(--c-bg); }
.wf-map-wrap{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.wf-map{ width:100%; height: 380px; }
.wf-map-card{
  position:absolute; top:20px; left:20px; z-index:500;
  background:#fff; border-radius: var(--radius);
  padding: 1.1rem 1.25rem; width: 226px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border);
}
.wf-map-card i.bi-geo-alt-fill{ color: var(--primary); font-size:1.2rem; margin-bottom:.4rem; display:block; }
.wf-map-card strong{ display:block; font-family: var(--font-display); font-size:.95rem; color: var(--c-text); margin-bottom:.25rem; }
.wf-map-card p{ font-size:.8rem; color: var(--c-text-soft); line-height:1.5; margin:0 0 .8rem; }

.wf-area-tags{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top: 1.6rem; }
.wf-tag{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.42rem .8rem; border-radius: var(--radius-pill);
  background:#fff; border:1px solid var(--c-border);
  font-size:.8rem; font-weight:600; color: var(--c-text);
}
.wf-tag i{ color: var(--primary); font-size:.78rem; }
.wf-tag.wf-tag-core{ background: var(--c-dark-2); color:#fff; border-color: var(--c-dark-2); }
.wf-tag.wf-tag-core i{ color:#fff; }

@media (max-width: 640px){
  .wf-map{ height: 300px; }
  .wf-map-card{ position:static; width:auto; margin-bottom: .9rem; }
}

/* =========================================================================
   FAQ — flat 2-column grid (no accordion)
   ========================================================================= */
.wf-faq{ background: var(--c-bg-alt); }
.wf-faq-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 880px; margin: 0 auto; }
.wf-faq-card{
  background:#fff; border:1px solid var(--c-border); border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
}
.wf-faq-card h3{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.96rem; color: var(--c-text); margin: 0 0 .5rem;
}
.wf-faq-card h3 i{ color: var(--primary); font-size:1rem; margin-top:.15rem; flex:0 0 auto; }
.wf-faq-card p{ margin:0; color: var(--c-text-soft); font-size:.87rem; line-height:1.6; }

@media (max-width: 700px){ .wf-faq-grid{ grid-template-columns: 1fr; } }

/* =========================================================================
   CLOSING — combined CTA + contact panel
   ========================================================================= */
.wf-closing{
  background: var(--c-dark-2);
  color:#fff;
}
.wf-closing-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items:center; }
.wf-closing-copy h2{ font-size: 1.8rem; margin: .7rem 0 .7rem; color:#fff; }
.wf-closing-copy p{ color: rgba(255,255,255,.72); font-size:.98rem; line-height:1.65; margin: 0 0 1.6rem; max-width: 460px; }
.wf-closing-ctas{ display:flex; flex-wrap:wrap; gap:.85rem; }

.wf-contact-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.8rem;
}
.wf-contact-row{ display:flex; align-items:flex-start; gap:.9rem; }
.wf-contact-row + .wf-contact-row{ margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.1); }
.wf-contact-ico{
  width:38px; height:38px; border-radius:10px; flex:0 0 auto;
  background: rgba(255,255,255,.1); color:#fff;
  display:grid; place-items:center; font-size:1rem;
}
.wf-contact-row strong{ display:block; font-size:.86rem; color: rgba(255,255,255,.6); margin-bottom:.15rem; font-weight:600; }
.wf-contact-row a, .wf-contact-row span{ color:#fff; font-size:.94rem; font-weight:600; }

@media (max-width: 860px){ .wf-closing-grid{ grid-template-columns: 1fr; } }