/* Textmarkierung im Markenton statt Browser-Blau */
::selection { background: #1A1A17; color: #FCFBF8; }

/* Sanfte Seitenwechsel (View Transitions) — ohne Browser-Support: wie bisher */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: nh40VtRaus 0.16s cubic-bezier(0.22,1,0.36,1) both; }
  ::view-transition-new(root) { animation: nh40VtRein 0.24s cubic-bezier(0.22,1,0.36,1) both; }
}
@keyframes nh40VtRaus { to { opacity: 0; } }
@keyframes nh40VtRein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Nav-Links: Unterstrich gleitet herein (nur echte Hover-Geraete) */
@media (hover: hover) and (pointer: fine) {
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform 0.22s var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  }
  .nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
}

/* Druckgefuehl: anfassbare Elemente bestaetigen die Beruehrung.
   Transition-Listen der Original-Regeln + transform, damit nichts verloren geht. */
.anfrage-submit { transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), gap 0.2s var(--ease-out), transform 0.16s var(--ease-out); }
.home-sticky-cta a { transition: transform 0.16s var(--ease-out, ease-out); } .anfrage-submit:active, .home-sticky-cta a:active,
.aktivitaeten-vorschau-cta:active, .entfernungs-stern-cta:active { transform: scale(0.98); }

/* Hero-Auftritt: ein ruhiger Atemzug beim ersten Laden (nur Startseite) */
@keyframes nh40HeroAuftritt { to { opacity: 1; transform: none; } }

/* Hover-Vormoment am Haus-Schnitt: Fenster glimmen, bevor das Licht angeht */
.schnitt-svg .fenster { transition: fill 0.35s var(--ease-out, ease-out), opacity 0.3s var(--ease-out, ease-out), filter 0.35s var(--ease-out, ease-out); }
@media (hover: hover) and (pointer: fine) {
  .schnitt-svg:has(.zone-gruppe[data-wohnung="stillach"]:hover) .fenster-stillach,
  .schnitt-svg:has(.zone-gruppe[data-wohnung="catarina"]:hover) .fenster-catarina,
  .schnitt-svg:has(.zone-gruppe[data-wohnung="hannes"]:hover) .fenster-hannes {
    opacity: 1; stroke: #b8955a; fill: rgba(212,170,96,0.4);
    filter: drop-shadow(0 0 3px rgba(196,158,92,0.45));
  }
}


/* NH40 UX v1 — Tap-Targets & CTA-Hierarchie */
/* Sprachschalter: >=44px Trefffläche (WCAG 2.5.8), Optik unverändert —
   Trennlinie wandert vom border-left in ein zentriertes ::before */
.nav-sprache {
  position: relative;
  display: inline-block;
  border-left: 0;
  margin: -0.9rem -0.75rem;
  margin-left: 1.5rem;
  padding: 0.9rem 0.75rem;
  padding-left: 1.5rem;
}
.nav-sprache::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.1em;
  background: var(--graphit-20);
  transform: translateY(-50%);
}
@media (max-width: 720px) {
  .nav-sprache {
    margin: -0.9rem -0.7rem;
    padding: 0.9rem 0.7rem;
  }
  .nav-sprache::before { display: none; }
}

/* Hero: das stärkste visuelle Signal gehört der Buchung, nicht dem Content */
/* Formular: bequeme Eingabehöhen (Touch), Wohnungswahl volle Breite */
.anfrage-input, .anfrage-select { min-height: 2.75rem; }
.anfrage-auswahl { grid-column: 1 / -1; }
/* Haus-Schnitt: Hinweis liest sich als Hinweis, nicht als Button */
.haus-schnitt-hint {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--graphit-60);
}
.haus-schnitt-hint-bullet { display: none; }


/* NH40 Preis-Richtwert v1 — reagiert auf Daten, Gäste und Wohnungswahl */
.anfrage-preis {
  margin: 0.9rem 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--graphit-70);
  font-variant-numeric: tabular-nums;
}
.anfrage-preis b { font-weight: 500; color: var(--graphit); }
.anfrage-preis[hidden] { display: none; }


/* NH40 Schema-Karte v1 — Entfernungen ab Haus, räumlich */
.km-figur { margin: 0 0 3rem; }
.km-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: 620px; margin: 0 auto 0.6rem; }
.km-legende { display: flex; gap: 1.1rem; font-family: 'Inter',sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--graphit-60); }
.km-legende span { display: inline-flex; align-items: center; gap: 0.4rem; }
.km-leg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--graphit); }
.km-leg-dot--rad { background: var(--alabaster); border: 1.2px solid var(--graphit); }
.km-note { font-family: 'Inter',sans-serif; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphit-60); }
.km-svg { width: 100%; max-width: 620px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.km-zone { fill: rgba(196,158,92,0.05); stroke: var(--graphit-10); stroke-width: 1; }
.km-ring { fill: none; stroke: var(--graphit-20); stroke-width: 1; stroke-dasharray: 1 5; }
.km-linie { stroke: var(--graphit-40); stroke-width: 1; opacity: 0.42; transition: opacity 0.3s var(--ease-out), stroke 0.3s var(--ease-out); }
.km-center-ring { fill: var(--alabaster); stroke: var(--graphit); stroke-width: 1.3; }
.km-center { font-family: 'Inter',sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; fill: var(--graphit); }
.km-dot { transition: fill 0.3s var(--ease-out), r 0.25s var(--ease-out); }
.km-dot--fuss { fill: var(--graphit); }
.km-dot--rad { fill: var(--alabaster); stroke: var(--graphit); stroke-width: 1.2; }
.km-label { font-family: 'Inter',sans-serif; font-size: 14px; font-weight: 500; fill: var(--graphit-80); transition: fill 0.25s var(--ease-out); }
.km-poi { cursor: default; outline: none; scroll-margin-block: 6rem; }
.km-poi:focus-visible .km-label { fill: var(--graphit); text-decoration: underline; }
/* Ring um die Trefferflaeche selbst — das Label sitzt oft seitlich versetzt,
   ohne Ring waere unklar, WELCHER Punkt gerade den Fokus traegt. */
.km-poi:focus-visible .km-hit {
  stroke: var(--graphit);
  stroke-width: 2;
  fill: rgba(26,26,23,0.06);
}
.km-caption { text-align: center; margin: 0.7rem 0 0; font-family: 'Newsreader',Georgia,serif; font-style: italic; font-size: 1rem; color: var(--graphit-70); min-height: 1.5em; }
.km-caption b { font-family: 'Inter',sans-serif; font-style: normal; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--graphit); }
@media (prefers-reduced-motion: reduce) {
  .km-linie, .km-dot, .km-label { transition: none; }
}


/* NH40 Shared-Element-Übergang v1 — Karten-Bild morpht in den Detail-Hero */
.wohnungs-karte[data-tone="hannes"] .wohnungs-karte-bild-inner { view-transition-name: vt-apt-hannes; }
.wohnungs-karte[data-tone="catarina"] .wohnungs-karte-bild-inner { view-transition-name: vt-apt-catarina; }
.wohnungs-karte[data-tone="stillach"] .wohnungs-karte-bild-inner { view-transition-name: vt-apt-stillach; }
@media (prefers-reduced-motion: reduce) {
  .wohnungs-karte-bild-inner { view-transition-name: none; }
}


/* Lichtwort in der Karten-Meta: Gold = Sonne, wie auf den Wohnungsseiten */
.v9-karte-licht { color: #A87F3D; display: inline-flex; align-items: center; gap: 0.5em; }
.v9-karte-licht .glut { width: 5px; height: 5px; border-radius: 50%; background: #C49E5C; box-shadow: 0 0 5px rgba(196,158,92,0.8); flex: none; }
@media (prefers-reduced-motion: reduce) { .v9-karte-licht .glut { box-shadow: none; } }

/* V9.3: Der Karten-Name morpht in die Hero-Wordmark der Zielseite.
   Namen muessen dokumentuebergreifend matchen — Gegenstueck in patch-fenster.py. */
.wohnungs-karte[data-tone="stillach"] .wohnungs-karte-overlay { view-transition-name: vt-wm-stillach; }
.wohnungs-karte[data-tone="catarina"] .wohnungs-karte-overlay { view-transition-name: vt-wm-catarina; }
.wohnungs-karte[data-tone="hannes"]   .wohnungs-karte-overlay { view-transition-name: vt-wm-hannes; }


.haus-schnitt-svg-wrap { aspect-ratio: auto; }
.haus-schnitt-svg-wrap svg { height: auto; aspect-ratio: 400 / 480; }