/*
 * Standort / Kontakt page (page-standort.php) — dark-editorial.
 * Reuses fsr-* tokens. Mobile-first; stacks ≤860px. Base specificity, no !important.
 */

/* ---------- Split hero: storefront (left) + dark panel (right) ---------- */
.st-hero { display:grid; grid-template-columns:1.05fr .95fr; background:var(--fsr-black); min-height:clamp(460px,58vh,620px); }
.st-hero__media { position:relative; overflow:hidden; }
.st-hero__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Vertical rhythm only — horizontal (right rail + inner gutter) owned by salon.css
   round-4 (.st-hero__panel { padding-right: var(--fsr-layout-edge) }). */
.st-hero__panel { display:flex; flex-direction:column; justify-content:center; padding-block:clamp(40px,5vw,76px); }
.st-hero__panel .fsr-h1 { color:#fff; margin:0 0 26px; }
.st-hero__channels { display:flex; flex-direction:column; gap:16px; margin:0 0 30px; }
.st-channel { display:flex; align-items:center; gap:14px; color:rgba(243,237,227,.9); font-family:var(--fsr-sans); font-size:16px; text-decoration:none; }
.st-channel:hover { color:#fff; }
.st-channel__ic { width:44px; height:44px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(198,161,91,.5); display:flex; align-items:center; justify-content:center; color:var(--fsr-gold); font-size:16px; }
/* Inline SVG replaces the old unicode glyphs (⚲/☏/✉ — wrong marks that also
   clipped and drifted off the baseline inside the circle). */
.st-channel__ic svg { display:block; width:19px; height:19px; }
.st-quick__ic svg { display:block; width:18px; height:18px; }
.st-hero__actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Öffnungszeiten + map ---------- */
.st-maprow { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,56px); align-items:start; }
.st-hours .fsr-hours { margin-top:8px; }
.st-hours__note { margin-top:18px; color:#8a7f70; font-size:13.5px; line-height:1.6; }
.st-map__frame { position:relative; border:1px solid rgba(198,161,91,.55); background:var(--fsr-black-2); border-radius:3px; overflow:hidden; aspect-ratio:16/11; }
.st-map__frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.35) contrast(.95) brightness(.92); }
.st-map__pin { position:absolute; left:18px; bottom:18px; display:flex; align-items:center; gap:12px; background:rgba(16,13,11,.92); border:1px solid rgba(198,161,91,.6); border-radius:3px; padding:12px 16px; color:#f3ede3; max-width:70%; }
.st-map__pin-ic { width:30px; height:30px; flex:0 0 auto; border:1px solid var(--fsr-gold); border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--fsr-gold); font-weight:600; font-size:14px; }
.st-map__pin strong { display:block; font-family:var(--fsr-sans); font-size:14px; }
.st-map__pin span span { font-size:12.5px; color:rgba(243,237,227,.7); }

/* ---------- Contact-form split ---------- */
.st-formrow { display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; max-width:var(--fsr-wrap); margin:0 auto; padding:0 32px; gap:clamp(32px,5vw,72px); }
.st-formrow__text { padding:8px 0; max-width:560px; }
.st-formrow__text .fsr-h2 { color:var(--fsr-black); margin:0 0 26px; }
.st-formrow__media { position:relative; min-height:340px; border-radius:3px; overflow:hidden; }
.st-formrow__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* VPF form (service-request) restyled for the ivory section */
.st-form .wsk-form, .st-form .vpf-form-wrapper { max-width:none; margin:0; }
.st-form .vpf-form { display:flex; flex-direction:column; gap:16px; }
.st-form .vpf-field { margin:0; }
.st-form .vpf-field--hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.st-form .vpf-field__label { display:block; font-family:var(--fsr-sans); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#7a6f60; margin:0 0 7px; }
.st-form .vpf-field__input,
.st-form .vpf-field__textarea { width:100%; font-family:var(--fsr-sans); font-size:15px; color:var(--fsr-black); background:#fdfbf6; border:1px solid #d9cdb6; border-radius:2px; padding:14px 16px; transition:border-color .2s ease, box-shadow .2s ease; }
.st-form .vpf-field__textarea { min-height:120px; resize:vertical; }
.st-form .vpf-field__input::placeholder,
.st-form .vpf-field__textarea::placeholder { color:#9a9081; }
.st-form .vpf-field__input:focus,
.st-form .vpf-field__textarea:focus { outline:none; border-color:var(--fsr-gold); box-shadow:0 0 0 3px rgba(198,161,91,.16); }
.st-form .vpf-consent { display:flex; gap:11px; align-items:flex-start; margin:4px 0 2px; }
.st-form .vpf-consent__check { margin-top:3px; accent-color:var(--fsr-gold-deep); width:17px; height:17px; flex:0 0 auto; }
.st-form .vpf-consent__label { font-family:var(--fsr-sans); font-size:13.5px; line-height:1.55; color:#5a5148; }
.st-form .vpf-consent__label a { color:var(--fsr-gold-ink); border-bottom:1px solid var(--fsr-gold); }
.st-form .vpf-errors { color:var(--fsr-error, #b3261e); font-size:13.5px; }
.st-form .vpf-cta-group { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.st-form .vpf-btn { font-family:var(--fsr-sans); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:15px 28px; border-radius:2px; border:1px solid transparent; cursor:pointer; transition:.2s ease; }
.st-form .vpf-btn--primary { background:var(--fsr-gold-deep); color:#fff; }
.st-form .vpf-btn--primary:hover { background:var(--fsr-black); color:#fff; }
.st-form .vpf-btn--secondary { background:transparent; border-color:rgba(20,17,14,.28); color:var(--fsr-gold-ink); }
.st-form .vpf-btn--secondary:hover { border-color:var(--fsr-gold); }
.st-form .vpf-success { color:var(--fsr-black); font-size:15px; }

/* ---------- So erreichen Sie uns ---------- */
.st-dir { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.st-dir__card { border:1px solid rgba(198,161,91,.32); border-radius:3px; padding:clamp(24px,2.5vw,34px); background:rgba(255,255,255,.015); }
.st-dir__ic { width:52px; height:52px; border-radius:50%; border:1px solid rgba(198,161,91,.5); display:flex; align-items:center; justify-content:center; color:var(--fsr-gold); font-size:20px; margin-bottom:20px; }
.st-dir__head { font-family:var(--fsr-sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin:0 0 12px; }
.st-dir__card p { color:rgba(243,237,227,.72); font-size:14.5px; line-height:1.65; margin:0; }

/* ---------- Schnellkontakt strip ---------- */
.st-quick { margin-top:44px; padding-top:38px; border-top:1px solid rgba(255,255,255,.08); }
.st-quick__bar { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:20px; border:1px solid rgba(198,161,91,.3); border-radius:3px; overflow:hidden; }
.st-quick__item { display:flex; align-items:center; gap:13px; padding:18px 22px; background:rgba(23,19,16,.6); color:rgba(243,237,227,.85); text-decoration:none; transition:.2s ease; }
.st-quick__item:hover { background:rgba(23,19,16,.9); }
.st-quick__item--cta { background:var(--fsr-gold); color:#171310; }
.st-quick__item--cta:hover { background:var(--fsr-gold-deep); }
.st-quick__ic { color:var(--fsr-gold); font-size:18px; }
.st-quick__item--cta .st-quick__ic { color:#171310; }
.st-quick__item strong { display:block; font-family:var(--fsr-sans); font-size:14px; font-weight:600; }
.st-quick__item span span { font-size:12.5px; opacity:.75; }

/* ---------- FAQ ---------- */
.st-faq { max-width:860px; }
.st-faq__list { margin-top:22px; border-top:1px solid rgba(20,17,14,.12); }
.st-faq__item { border-bottom:1px solid rgba(20,17,14,.12); }
.st-faq__item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; cursor:pointer; list-style:none; font-family:var(--fsr-serif); font-size:20px; color:var(--fsr-black); }
.st-faq__item summary::-webkit-details-marker { display:none; }
.st-faq__plus { color:var(--fsr-gold-ink); font-size:24px; line-height:1; transition:transform .25s ease; flex:0 0 auto; }
.st-faq__item[open] .st-faq__plus { transform:rotate(45deg); }
.st-faq__answer { padding:0 4px 22px; color:#5a5148; line-height:1.7; font-size:15px; }
.st-faq__answer p { margin:0 0 12px; } .st-faq__answer p:last-child { margin:0; }

/* ================= RESPONSIVE ================= */
@media (max-width:860px){
	.st-hero { grid-template-columns:1fr; }
	.st-hero__media { min-height:260px; }
	.st-maprow { grid-template-columns:1fr; }
	.st-formrow { grid-template-columns:1fr; padding:0 20px; }
	.st-formrow__media { min-height:240px; order:-1; }
	.st-dir { grid-template-columns:1fr; }
	.st-quick__bar { grid-template-columns:1fr; }
}
@media (max-width:640px){
	.st-map__pin { max-width:none; left:12px; right:12px; bottom:12px; }
}

/* ---------- Fable round 3: dark form section (mockup) ---------- */
.st-formsec .fsr-kicker { color:var(--fsr-gold); }
.st-formsec .fsr-h2 { color:#f6f0e6; }
.st-form .wsk-form { background:transparent; border:0; padding:0; box-shadow:none; border-radius:0; }
.st-form .wsk-form__body { padding:0; }
.st-form .vpf-field__label { color:rgba(243,237,227,.55); }
.st-form .vpf-field__input,
.st-form .vpf-field__textarea {
  background:rgba(255,255,255,.04); border:1px solid rgba(198,161,91,.38); color:#f3ede3;
}
.st-form .vpf-field__input::placeholder,
.st-form .vpf-field__textarea::placeholder { color:rgba(243,237,227,.45); }
.st-form .vpf-field__input:focus,
.st-form .vpf-field__textarea:focus { border-color:var(--fsr-gold); box-shadow:0 0 0 1px var(--fsr-gold); outline:none; background:rgba(255,255,255,.06); }
.st-form input[type="date"] { color-scheme:dark; }
.st-form .vpf-consent, .st-form .vpf-form label, .st-form .vpf-field__consent { color:rgba(243,237,227,.72); }
.st-form .vpf-form a { color:var(--fsr-gold); text-decoration:underline; }
.st-form .vpf-form__submit, .st-form button[type="submit"], .st-form .wsk-btn {
  background:var(--fsr-gold); color:#171310; border:0; border-radius:2px; font-family:var(--fsr-sans);
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:15px 28px; cursor:pointer; transition:.22s ease;
}
.st-form .vpf-form__submit:hover, .st-form button[type="submit"]:hover, .st-form .wsk-btn:hover { background:var(--fsr-gold-deep); color:#100d0b; }
.st-form .vpf-form__reset, .st-form button[type="reset"] { background:none; border:0; color:rgba(243,237,227,.55); text-decoration:underline; cursor:pointer; }

/* ---------- Dark map treatment (mockup dark map) ---------- */
.st-map__frame iframe { filter:invert(.92) hue-rotate(185deg) saturate(.28) brightness(.92) contrast(.92); }
.st-map__frame { background:var(--fsr-black-2); border:1px solid rgba(198,161,91,.35); }
.st-form .vpf-form-wrapper { background:transparent; border-radius:0; padding:0; border:0; box-shadow:none; }

/* ---------- Fable round 4c: light contact-form section (Human: "remove the contact form bg color") ----------
 * Two dark layers: the section (.st-formsec inherits .fsr-band → --fsr-black) AND the VPF plugin's navy form
 * card (background: var(--vpf-navy,#06162E), inputs background:transparent color:var(--vpf-text)#fff, loaded
 * after the theme → beats plain class overrides). Fix idiomatically: lighten ONLY this section, and re-point
 * the plugin's OWN --vpf-* design tokens (it is built to be themed via them, GOD-12) so the card + fields go
 * transparent-on-ivory with dark text — no !important, no plugin edit. Tokens set on .st-form inherit to the
 * wrapper and every field, so the plugin's var() lookups resolve to these values wherever its rules load. */
.fsr-band.st-formsec { background:var(--fsr-ivory); }
.fsr-band.st-formsec,
.fsr-band.st-formsec :is(p,li,span,strong,label,.fsr-h2,.fsr-serif) { color:var(--fsr-black); }
.st-formsec .fsr-kicker { color:var(--fsr-gold-ink); }
.st-formsec .fsr-h2 { color:var(--fsr-black); }

.st-form {
  --vpf-navy:              transparent;   /* form card background → none (shows the ivory section) */
  --vpf-form-bg:           transparent;
  --vpf-navy-light:        transparent;
  --vpf-form-surface:      transparent;
  --vpf-text:              #14100c;       /* field text → ink */
  --vpf-field-text:        #14100c;
  --vpf-text-muted:        #7a6f60;       /* labels */
  --vpf-label-text:        #7a6f60;
  --vpf-text-placeholder:  #9a9081;       /* placeholders */
  --vpf-placeholder-text:  #9a9081;
  --vpf-border:            #d9cdb6;       /* field borders on ivory */
  --vpf-palette-border:    #d9cdb6;
  --vpf-border-focus:      var(--fsr-gold);
  --vpf-border-glow:       transparent;   /* wrapper hairline → none */
  --vpf-shadow-luxury:     none;          /* kill the card shadow */
  --vpf-shadow-card:       none;
  --vpf-shadow-hover:      none;
}
/* Strip the plugin card chrome + light the date picker (higher specificity than the plugin's 0,2,0/0,3,0 rules). */
.st-form .wsk-form .vpf-form-wrapper { background:transparent; border:0; box-shadow:none; border-radius:0; padding:0; }
.st-form .wsk-form .vpf-field__input[type="date"] { color-scheme:light; }
.st-form .vpf-form a,
.st-form .vpf-consent__label a { color:var(--fsr-gold-ink); }
.st-form .vpf-form__reset,
.st-form button[type="reset"],
.st-form .vpf-btn--secondary { color:#7a6f60; }
.st-form .vpf-errors { color:var(--fsr-error,#b3261e); }

/* Email row: the address link is nested inside .st-channel (icon stays outside
   the anchor so the Email Shield cannot strip it). Inherit the row's styling. */
.st-channel__link { color:inherit; text-decoration:none; }
.st-channel__link:hover { color:#fff; }