/* ==========================================================================
   Villa Restaurant - Anfahrt Seite - v1.6 - phase1-20260518-7
   Cards Container 90 Prozent, symmetrisch eingerueckt zur Karte
   ========================================================================== */

.anfahrt-scene { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.anfahrt-inner { max-width: var(--vr-container-lg); }

/* === QUICK ACCESS === */
.anfahrt-quick {
  background: var(--vr-papier);
  border: 2px solid var(--vr-gold);
  border-radius: var(--vr-radius-md);
  padding: var(--vr-space-md) var(--vr-space-lg);
  margin: 0 auto var(--vr-space-lg);
  max-width: var(--vr-container-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--vr-space-md);
  align-items: center;
  box-shadow: var(--vr-shadow-md);
}
@media (max-width: 720px) {
  .anfahrt-quick { grid-template-columns: 1fr; text-align: center; }
}
.anfahrt-quick__addr { display: flex; flex-direction: column; gap: var(--vr-space-4xs); }
.anfahrt-quick__name {
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-md);
  font-weight: var(--vr-fw-medium);
  color: var(--vr-burgund);
}
.anfahrt-quick__line {
  font-family: var(--vr-font-body);
  font-style: italic;
  font-size: var(--vr-text-sm);
  color: var(--vr-text-muted);
}
.anfahrt-quick__buttons { display: flex; gap: var(--vr-space-2xs); flex-wrap: wrap; justify-content: center; }
.anfahrt-quick__btn {
  background: var(--vr-burgund);
  color: var(--vr-creme);
  border: 1px solid var(--vr-gold);
  border-radius: var(--vr-radius-full);
  padding: var(--vr-space-xs) var(--vr-space-md);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-md);
  font-weight: var(--vr-fw-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--vr-space-3xs);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--vr-trans-base), transform var(--vr-trans-base);
}
.anfahrt-quick__btn:hover { background: var(--vr-burgund-tief); transform: translateY(-1px); }
.anfahrt-quick__btn:focus-visible { outline: var(--vr-focus-ring); outline-offset: var(--vr-focus-offset); }
.anfahrt-quick__btn--copy.is-copied { background: var(--vr-success); }
.anfahrt-quick__btn-feedback { font-style: italic; }
.anfahrt-quick__btn-feedback:not(:empty) { margin-left: var(--vr-space-3xs); }

/* === MAP === */
.anfahrt-map-wrap { margin: 0 0 var(--vr-space-2xs); }
.anfahrt-map {
  height: clamp(260px, 38vw, 380px);
  background: var(--vr-papier);
  border: 2px solid var(--vr-gold);
  border-radius: var(--vr-radius-md);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.anfahrt-map__fallback {
  padding: var(--vr-space-md);
  font-family: var(--vr-font-body);
  font-style: italic;
  color: var(--vr-text-muted);
  text-align: center;
}
.anfahrt-map.leaflet-container .anfahrt-map__fallback { display: none; }

.leaflet-container .leaflet-control-attribution {
  background: rgba(251, 247, 238, 0.88);
  color: var(--vr-anthrazit-soft);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-xs);
  padding: 2px 8px;
}
.leaflet-container .leaflet-control-attribution a { color: var(--vr-burgund); }
.leaflet-container { font-family: var(--vr-font-body); }

/* === LEGEND === */
.anfahrt-legend {
  display: flex;
  gap: var(--vr-space-md);
  justify-content: center;
  margin: 0 0 var(--vr-space-lg);
  font-family: var(--vr-font-body);
  font-style: italic;
  font-size: var(--vr-text-sm);
  color: var(--vr-gold-hell);
  flex-wrap: wrap;
}
.anfahrt-legend span { display: inline-flex; align-items: center; gap: var(--vr-space-3xs); }
.anfahrt-legend i { display: inline-block; width: 22px; height: 2px; background: var(--vr-gold-hell); border-radius: 1px; }

/* === SECTION TITLE === */
.anfahrt-section__title {
  text-align: center;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-xs);
  font-weight: var(--vr-fw-medium);
  letter-spacing: var(--vr-tracking-widest);
  text-transform: uppercase;
  color: var(--vr-gold-hell);
  margin: 0 0 var(--vr-space-md);
}

/* === CARDS === */
.anfahrt-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vr-space-md);
  align-items: stretch;
  margin: 0 auto var(--vr-space-lg);
  max-width: 540px;
}
@media (min-width: 700px) {
  .anfahrt-cards {
    grid-template-columns: repeat(2, 1fr);
    max-width: 920px;
  }
}
@media (min-width: 1100px) {
  .anfahrt-cards {
    grid-template-columns: repeat(4, 1fr);
    width: calc(100% + 300px);
    margin-left: -150px;
    margin-right: -150px;
    max-width: none;
  }
}

.anfahrt-card {
  background: var(--vr-papier);
  border: 2px solid var(--vr-gold);
  border-radius: var(--vr-radius-md);
  padding: var(--vr-space-md);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--vr-shadow-md);
}
.anfahrt-card::before,
.anfahrt-card::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0.7;
  pointer-events: none;
}
.anfahrt-card::before { top: 8px; right: 8px; border-top: 1.5px solid var(--vr-gold); border-right: 1.5px solid var(--vr-gold); }
.anfahrt-card::after { bottom: 8px; left: 8px; border-bottom: 1.5px solid var(--vr-gold); border-left: 1.5px solid var(--vr-gold); }

.anfahrt-card__head {
  display: flex;
  align-items: center;
  gap: var(--vr-space-2xs);
  margin: 0 0 var(--vr-space-2xs);
  padding-bottom: var(--vr-space-2xs);
  border-bottom: 1px solid var(--vr-linie);
}
.anfahrt-card__city {
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-md);
  font-weight: var(--vr-fw-medium);
  color: var(--vr-burgund);
  margin: 0;
  line-height: 1.1;
}
.anfahrt-card__dist {
  font-family: var(--vr-font-body);
  font-style: italic;
  font-size: var(--vr-text-xs);
  color: var(--vr-text-muted);
  margin: 4px 0 0;
}
.anfahrt-card__overview {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  line-height: var(--vr-leading-relaxed);
  color: var(--vr-text-secondary);
  margin: 0 0 var(--vr-space-md);
}

/* === BRAND BUTTONS - zwei Zeilen Google / Maps und Apple / Karten === */
.anfahrt-card__brands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vr-space-2xs);
  margin: 0 0 var(--vr-space-2xs);
}
.anfahrt-brand {
  display: flex;
  align-items: center;
  gap: var(--vr-space-2xs);
  background: #FFFFFF;
  border: 1px solid var(--vr-gold);
  border-radius: var(--vr-radius-md);
  padding: 8px 10px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--vr-trans-base), border-color var(--vr-trans-base), transform var(--vr-trans-base);
}
.anfahrt-brand:hover { background: var(--vr-creme-tief); border-color: var(--vr-gold-hell); transform: translateY(-1px); }
.anfahrt-brand:focus-visible { outline: var(--vr-focus-ring); outline-offset: var(--vr-focus-offset); }
.anfahrt-brand__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.anfahrt-brand__stack {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: baseline;
  line-height: 1.1;
  min-width: 0;
  white-space: nowrap;
}
.anfahrt-brand__line {
  font-family: var(--vr-font-body);
  font-style: normal;
  font-size: var(--vr-text-sm);
  font-weight: var(--vr-fw-medium);
  color: var(--vr-burgund);
  white-space: nowrap;
}

/* === DETAILS TOGGLE === */
.anfahrt-details {
  border-top: 1px dashed var(--vr-linie);
  margin-top: var(--vr-space-2xs);
  padding-top: var(--vr-space-2xs);
}
.anfahrt-details__summary {
  text-align: center;
  font-family: var(--vr-font-body);
  font-style: italic;
  font-size: var(--vr-text-xs);
  color: var(--vr-text-muted);
  cursor: pointer;
  padding: var(--vr-space-3xs);
  list-style: none;
  transition: color var(--vr-trans-base);
}
.anfahrt-details__summary::-webkit-details-marker { display: none; }
.anfahrt-details__summary::after {
  content: " \25BE";
  display: inline-block;
  transition: transform var(--vr-trans-base);
}
.anfahrt-details[open] .anfahrt-details__summary::after { transform: rotate(180deg); }
.anfahrt-details__summary:hover { color: var(--vr-burgund); }
.anfahrt-details__summary:focus-visible { outline: var(--vr-focus-ring); outline-offset: 2px; border-radius: var(--vr-radius-sm); }

.anfahrt-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: var(--vr-space-2xs) 0 0;
}
.anfahrt-steps li {
  counter-increment: step;
  padding: var(--vr-space-2xs) 0 var(--vr-space-2xs) 36px;
  border-bottom: 1px solid var(--vr-linie-soft);
  position: relative;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  color: var(--vr-text-secondary);
  line-height: var(--vr-leading-snug);
}
.anfahrt-steps li:last-child { border-bottom: none; }
.anfahrt-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 8px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--vr-gold);
  border-radius: var(--vr-radius-full);
  font-family: var(--vr-font-display);
  font-style: italic;
  font-size: var(--vr-text-sm);
  font-weight: var(--vr-fw-medium);
  color: var(--vr-gold);
  text-align: center;
  line-height: 22px;
}

/* === PROMISE === */
.anfahrt-promise {
  text-align: center;
  margin: var(--vr-space-md) 0 0;
  color: var(--vr-creme);
  font-family: var(--vr-font-hand);
  font-size: var(--vr-text-xl);
  opacity: 0.9;
}

/* === CTA BAR - mittig in beigefarbenem Bereich === */
.anfahrt-scene + .contact-actions {
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* === LEAFLET CUSTOM MARKERS === */
.anfahrt-villa-marker,
.anfahrt-start-marker { background: transparent; border: none; }

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .anfahrt-quick__btn,
  .anfahrt-brand,
  .anfahrt-details__summary,
  .anfahrt-details__summary::after { transition: none !important; }
}

/* === Icon Feinjustage Cards: Google 18px, Apple 21px === */
.anfahrt-card__brands .anfahrt-brand:nth-child(1) .anfahrt-brand__icon svg {
  width: 18px;
  height: 18px;
}
.anfahrt-card__brands .anfahrt-brand:nth-child(2) .anfahrt-brand__icon svg {
  width: 21px;
  height: 21px;
}

/* === Quick Bar Buttons: Schrift sicher hell auf Burgund === */
.anfahrt-quick__btn,
.anfahrt-quick__btn:link,
.anfahrt-quick__btn:visited,
.anfahrt-quick__btn:hover,
.anfahrt-quick__btn:focus,
.anfahrt-quick__btn:active {
  color: var(--vr-creme) !important;
}
.anfahrt-quick__btn-text,
.anfahrt-quick__btn-feedback { color: inherit; }


/* === Cards gleich hoch, Brand Buttons unten am Card Rand === */
.anfahrt-card { height: 100%; }
.anfahrt-card__overview { flex-grow: 1; }
.anfahrt-card__brands { margin-top: auto; }

/* === Modal Overlay Detail Beschreibung === */
.anfahrt-card__more {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: var(--vr-space-2xs);
  background: transparent;
  border: none;
  border-top: 1px dashed var(--vr-linie);
  font-family: var(--vr-font-body);
  font-style: italic;
  font-size: var(--vr-text-xs);
  color: var(--vr-text-muted);
  cursor: pointer;
  text-align: center;
  transition: color var(--vr-trans-base);
}
.anfahrt-card__more:hover { color: var(--vr-burgund); }
.anfahrt-card__more:focus-visible { outline: var(--vr-focus-ring); outline-offset: 2px; border-radius: var(--vr-radius-sm); }
.anfahrt-card__more::after { content: " \25BE"; display: inline-block; }

.anfahrt-modal[hidden] { display: none; }
.anfahrt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.anfahrt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 5, 8, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.anfahrt-modal__panel {
  position: relative;
  background: var(--vr-papier);
  border: 2px solid var(--vr-gold);
  border-radius: var(--vr-radius-md);
  padding: var(--vr-space-lg) var(--vr-space-md) var(--vr-space-md);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  animation: anfahrt-modal-in 0.25s ease-out;
}
@keyframes anfahrt-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.anfahrt-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  color: var(--vr-burgund);
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--vr-radius-sm);
}
.anfahrt-modal__close:hover { background: rgba(110, 26, 36, 0.08); }
.anfahrt-modal__close:focus-visible { outline: var(--vr-focus-ring); outline-offset: 2px; }
.anfahrt-modal__title {
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-lg);
  font-weight: var(--vr-fw-medium);
  color: var(--vr-burgund);
  margin: 0 0 var(--vr-space-md);
  padding-right: 2rem;
}
.anfahrt-modal__steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.anfahrt-modal__steps li {
  counter-increment: step;
  padding: var(--vr-space-2xs) 0 var(--vr-space-2xs) 44px;
  border-bottom: 1px solid var(--vr-linie-soft);
  position: relative;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  color: var(--vr-text-secondary);
  line-height: var(--vr-leading-snug);
}
.anfahrt-modal__steps li:last-child { border-bottom: none; }
.anfahrt-modal__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 8px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--vr-gold);
  border-radius: var(--vr-radius-full);
  font-family: var(--vr-font-display);
  font-style: italic;
  font-size: var(--vr-text-sm);
  font-weight: var(--vr-fw-medium);
  color: var(--vr-gold);
  text-align: center;
  line-height: 26px;
  background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .anfahrt-modal__panel { animation: none; }
}
@media (max-width: 600px) {
  .anfahrt-modal { padding: 0.5rem; }
  .anfahrt-modal__panel { padding: var(--vr-space-md) var(--vr-space-sm) var(--vr-space-sm); }
  .anfahrt-modal__steps li { padding-left: 38px; }
  .anfahrt-modal__steps li::before { width: 24px; height: 24px; line-height: 22px; top: 10px; }
}

/* === TUNING 20260520 ============================================== */
/* 1 Header Block oberhalb der Karte. Spalten Layout. Adresse einzeilig oben, Buttons darunter. */
.anfahrt-quick {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--vr-space-md);
  padding: var(--vr-space-md) var(--vr-space-lg);
}
.anfahrt-quick__addr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  text-align: center;
}
.anfahrt-quick__name {
  font-family: var(--vr-font-display);
  font-style: italic;
  font-size: var(--vr-text-md);
  color: var(--vr-burgund);
  font-weight: var(--vr-fw-medium);
}
.anfahrt-quick__name::after {
  content: " \00b7";
  color: var(--vr-gold);
  margin-left: 0.25rem;
}
.anfahrt-quick__line {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  color: var(--vr-text-secondary);
}
.anfahrt-quick__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vr-space-sm);
  width: 100%;
}
.anfahrt-quick__btn {
  flex: 0 1 auto;
  font-size: var(--vr-text-sm);
  padding: 8px 16px;
  min-height: 38px;
  gap: 6px;
}
.anfahrt-quick__btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* 2 Card Brand Buttons. Stack horizontal, Schrift kleiner, gleiche Innenabstaende. */
.anfahrt-card__brands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.anfahrt-card__brands .anfahrt-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  min-height: 38px;
  background: #fff;
  border: 1px solid var(--vr-linie);
  border-radius: var(--vr-radius-sm);
  text-decoration: none;
  color: var(--vr-burgund);
  transition: border-color var(--vr-trans-base), background var(--vr-trans-base);
}
.anfahrt-card__brands .anfahrt-brand:hover {
  border-color: var(--vr-gold);
  background: rgba(212, 165, 47, 0.05);
}
.anfahrt-card__brands .anfahrt-brand__icon { display: inline-flex; align-items: center; }
.anfahrt-card__brands .anfahrt-brand__icon svg { width: 14px; height: 14px; }
.anfahrt-card__brands .anfahrt-brand__stack {
  display: inline-flex;
  flex-direction: row;
  gap: 4px;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-xs);
  line-height: 1;
  white-space: nowrap;
}
.anfahrt-card__brands .anfahrt-brand__line {
  font-size: var(--vr-text-xs);
  font-weight: var(--vr-fw-medium);
}

/* 3 Tagline Schon auf dem Weg zentriert plus zwei Pixel groesser. */
.anfahrt-promise {
  text-align: center;
  font-size: calc(var(--vr-text-md) + 2px);
  margin: var(--vr-space-lg) auto;
  max-width: 60ch;
}

/* 4 CTA Band unterhalb. Symmetrisches vertikales Padding. Selektor via :has fuer Container der die contact-action Buttons enthaelt. */
section:has(> .contact-action),
section:has(> div > .contact-action) {
  padding-top: var(--vr-space-xl);
  padding-bottom: var(--vr-space-xl);
}

/* === TUNING PHASE 2 20260520 ============================================== */

/* 1. Adresse oben mittig. Block Layout schlaegt aelteres Flex column. */
.anfahrt-quick > .anfahrt-quick__addr {
  display: block;
  width: 100%;
  text-align: center;
}
.anfahrt-quick > .anfahrt-quick__addr .anfahrt-quick__name {
  display: inline;
  vertical-align: baseline;
}
.anfahrt-quick > .anfahrt-quick__addr .anfahrt-quick__line {
  display: inline;
  vertical-align: baseline;
}
.anfahrt-quick > .anfahrt-quick__addr .anfahrt-quick__name::after {
  content: " \00b7 ";
  color: var(--vr-gold);
  margin: 0 0.2rem;
}

/* 2. Apple Logo im Header zwei Pixel groesser als Google. */
.anfahrt-quick__buttons a[href*="apple"] svg {
  width: 16px;
  height: 16px;
}

/* 3. Card Header zentriert. Kompass oben mittig, Titel und Subtitel darunter. */
.anfahrt-card__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--vr-space-3xs);
}
.anfahrt-card__head > div {
  text-align: center;
  width: 100%;
}
.anfahrt-card__city,
.anfahrt-card__dist {
  text-align: center;
  width: 100%;
}

/* 4. CTA Band symmetrisch und kompakt. Schlaegt vorhandene :has Regel ueber section Tag plus Klasse. */
section.contact-actions {
  padding-block: var(--vr-space-xl);
  min-height: auto;
}
section.contact-actions .contact-actions__inner {
  padding-block: 0;
  margin-block: 0;
}

/* 5. Site Footer Sichtbarkeit Fallback. Reveal Effekt darf weiter animieren ueber opacity oder transform. */
.site-footer {
  visibility: visible;
}

/* === TUNING PHASE 3 20260520 ============================================== */

/* 1. Adresse kopieren Button. Text mittig durch explizites inline flex Layout mit justify center. */
.anfahrt-quick__buttons .anfahrt-quick__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.anfahrt-quick__btn-feedback:empty {
  display: none;
}

/* 2. CTA Band kompakt mit symmetrischem Padding. !important schlaegt aeltere Section Regeln. */
section.contact-actions {
  padding-top: var(--vr-space-lg) !important;
  padding-bottom: var(--vr-space-lg) !important;
  min-height: 0 !important;
  height: auto !important;
}
section.contact-actions .contact-actions__inner {
  padding-block: 0 !important;
  margin-block: 0 !important;
}

/* 3. Site Footer Reveal Override. Footer wird in jedem Fall sichtbar gerendert. Reveal Animation darf optional weiter triggern. */
.site-footer,
.site-footer[data-reveal-effect],
.site-footer[data-reveal-effect="footer-stage"] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
.site-footer [data-reveal-child] {
  opacity: 1 !important;
  transform: none !important;
}

/* === TUNING PHASE 4 20260520 ============================================== */

/* CTA Band. Spezifitaet 0,2,2 schlaegt .anfahrt-scene + .contact-actions (0,2,0). Konkrete Pixel garantieren Symmetrie. */
main .anfahrt-scene + section.contact-actions {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  min-height: 0 !important;
  height: auto !important;
}
main .anfahrt-scene + section.contact-actions .contact-actions__inner {
  padding-block: 0 !important;
  margin-block: 0 !important;
}

/* Footer Reveal Override. Spezifitaet 0,3,1 schlaegt html.js-reveal [data-reveal-effect] (0,2,1). Footer wird hart sichtbar gerendert. */
html.js-reveal .site-footer,
html.js-reveal .site-footer[data-reveal-effect],
html.js-reveal .site-footer[data-reveal-effect="footer-stage"] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
html.js-reveal .site-footer [data-reveal-child] {
  opacity: 1 !important;
  transform: none !important;
}