/* Immobilien Fleck: Präsentation der drei Stilvarianten
 * Gemeinsame Grundlage aller Landingpages: Reset, Variantenumschalter,
 * Menü-Icon, Einblenden beim Scrollen, Bewegung reduzieren.
 * Farben und Schriften kommen aus assets/vN/tokens.css der jeweiligen Variante.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--schrift-text);
  font-weight: var(--gewicht-text);
  line-height: 1.6;
  color: var(--farbe-text);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sprung {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: #FFFFFF;
  color: #1D2127;
}
.sprung:focus {
  top: 3.25rem;
}

/* Abschnitte unter dem klebenden Kopf nicht verdecken */
[id] {
  scroll-margin-top: 5.5rem;
}

/* ---------- Variantenumschalter (für alle drei gleich) ---------- */

.umschalter {
  --u-grund: #1D2127;
  --u-text: #FFFFFF;
  --u-leise: #C3C8D0; /* 10,4:1 auf Grund */
  position: relative;
  z-index: 60;
  background: var(--u-grund);
  color: var(--u-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .875rem;
  line-height: 1.2;
}

.umschalter__innen {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: .55rem clamp(1rem, 4vw, 2.5rem);
}

.umschalter__titel {
  color: var(--u-leise);
  text-decoration: none;
  white-space: nowrap;
}
.umschalter__titel:hover,
.umschalter__titel:focus-visible {
  color: var(--u-text);
}

.umschalter__liste {
  display: flex;
  gap: .35rem;
  margin-left: auto;
}

.umschalter__link {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .4rem .75rem;
  border: 1px solid #4A515C;
  border-radius: 999px;
  color: var(--u-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.umschalter__link:hover,
.umschalter__link:focus-visible {
  border-color: var(--u-text);
}
.umschalter__link:focus-visible {
  outline-color: var(--u-text);
}
.umschalter__link[aria-current="page"] {
  background: var(--u-text);
  border-color: var(--u-text);
  color: var(--u-grund);
}
.umschalter__nr {
  font-weight: 700;
}

@media (max-width: 720px) {
  .umschalter__titel {
    display: none;
  }
  .umschalter__liste {
    margin: 0 auto;
  }
  .umschalter__name {
    display: none;
  }
  .umschalter__link::before {
    content: "Variante";
  }
}

/* ---------- Menü-Icon, Burger wird zum X ---------- */

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.burger svg {
  width: 1.6rem;
  height: 1.6rem;
}
.burger line {
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 300ms ease, opacity 200ms ease;
  transform-box: view-box;
  transform-origin: center;
}
.burger[aria-expanded="true"] .burger__oben  { transform: rotate(45deg) translateY(6px); }
.burger[aria-expanded="true"] .burger__mitte { opacity: 0; }
.burger[aria-expanded="true"] .burger__unten { transform: rotate(-45deg) translateY(-6px); }

/* Ohne JavaScript: kein Burger, das Menü steht offen im Kopf */
html:not(.js) .burger {
  display: none;
}
html:not(.js) .kopf__innen {
  flex-wrap: wrap;
  height: auto;
}

/* ---------- Einblenden beim Hereinscrollen ----------
 * Nur wenn JavaScript läuft (Klasse .js auf <html>) und keine reduzierte
 * Bewegung gewünscht ist. Sonst ist alles sofort sichtbar.
 * Die Varianten stellen Weg und Dauer über --einblenden-weg / --einblenden-dauer ein.
 */
@media (prefers-reduced-motion: no-preference) {
  .js .einblenden {
    opacity: 0;
    transform: translateY(var(--einblenden-weg, 16px));
    transition:
      opacity var(--einblenden-dauer, 700ms) cubic-bezier(.16, 1, .3, 1),
      transform var(--einblenden-dauer, 700ms) cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js .einblenden.ist-sichtbar {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Visitenkarte: gemeinsames Format 85 × 55 mm ----------
 * Die umgebende figure ist der Container, damit cqi-Werte auf der Karte
 * selbst (Abstände, Schriftgrößen) sich auf die Kartenbreite beziehen.
 */
.karte__ansicht > figure {
  container-type: inline-size;
}
.vk {
  aspect-ratio: 85 / 55;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* ---------- Einstieg blendet beim Laden einmal ein ---------- */
@media (prefers-reduced-motion: no-preference) {
  .laden > * {
    animation: laden var(--einblenden-dauer, 700ms) cubic-bezier(.16, 1, .3, 1) both;
  }
  .laden > :nth-child(2) { animation-delay: 80ms; }
  .laden > :nth-child(3) { animation-delay: 160ms; }
  .laden > :nth-child(4) { animation-delay: 240ms; }
}
@keyframes laden {
  from { opacity: 0; transform: translateY(var(--einblenden-weg, 16px)); }
  to   { opacity: 1; transform: none; }
}