/* Landingpages „Du suchst eine Wohnung in …?“ (lib/landing-orte.mjs). Handy zuerst. Runde 2 (Paul 06.11.): Kopfzeile liegt im Foto,
   Fotos in hoher Auflösung (Handy hochkant, PC quer), Zahlen ruhiger, „ganz Österreich“ als Fotokacheln statt Knopf-Wolke. */
.lo { --lo-r: 18px; color: var(--ink); }
.lo .wrap { max-width: 1180px; }

/* Kopfzeile durchsichtig über dem Foto (nur auf diesen Seiten; offenes Menü bleibt hell). Sie scrollt mit weg (kopf.js). */
body:has(.lo-hero) main { padding-top: 0; }
body:has(.lo-hero):not(.menue-offen) .kopf.fest { background: transparent; color: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; --loch: #0c0c0d; }
body:has(.lo-hero):not(.menue-offen) .kopf.fest .kopf-knopf { background: #fff; color: var(--ink); }
body:has(.lo-hero):not(.menue-offen) .kopf.fest .kopf-nav a { opacity: .92; }

/* Kopf mit Foto: füllt am Handy den Bildschirm, Text unten; oben ein leichter Verlauf, damit die Kopfzeile lesbar ist */
.lo-hero { position: relative; display: grid; align-items: end; min-height: 100svh; max-height: 860px; color: #fff; background: #0c0c0d; overflow: hidden; isolation: isolate; }
.lo-hero-bild, .lo-hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lo-hero-bild img { object-fit: cover; object-position: center; }
.lo-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 140px; z-index: 0; background: linear-gradient(to bottom, rgba(12, 12, 13, .5), rgba(12, 12, 13, 0)); }
.lo-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(12, 12, 13, .88) 0%, rgba(12, 12, 13, .62) 32%, rgba(12, 12, 13, .14) 62%, rgba(12, 12, 13, 0) 80%); }
.lo-hero-in { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.lo-kicker { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.rg .lo-hero h1 { margin: 0; max-width: 14ch; font-size: clamp(42px, 11vw, 92px); line-height: .96; letter-spacing: -.05em; color: #fff; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.lo-lead { margin: 16px 0 0; max-width: 33em; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.lo-lead b { color: #fff; }
.lo-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 26px; border-radius: 999px; font: 700 17px/1.1 var(--schrift); text-decoration: none; letter-spacing: -.01em; transition: transform .15s, background .2s; }
.lo-btn:active { transform: scale(.98); }
.lo-hero .lo-btn.voll { background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.lo-btn.voll { background: var(--ink); color: #fff; }
.lo-btn.glas { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lo-btn.hell { background: #fff; color: var(--ink); }
.lo-btn.rand-hell { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.lo-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lo-block .lo-btn:focus-visible, .lo-leiste .lo-btn:focus-visible { outline-color: var(--ink); }
.lo-vertrauen { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.lo-vertrauen li::before { content: "✓"; margin-right: 6px; color: #fff; }

/* Zahlen: ein ruhiges Band ohne Kästen, Trennlinien dazwischen */
.lo-werte { padding-top: 28px; }
.lo-werte ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.lo-werte li { display: grid; align-content: start; gap: 4px; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--linie); min-width: 0; }
.lo-werte li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--linie); }
.lo-werte b { font-size: clamp(30px, 8vw, 44px); letter-spacing: -.05em; line-height: 1; font-variant-numeric: proportional-nums; white-space: nowrap; }
.lo-werte span { font-size: 15px; line-height: 1.3; font-weight: 600; }
.lo-werte small { font-size: 13px; line-height: 1.3; color: var(--grau); }

/* Abschnitte */
.lo-block { padding-top: clamp(48px, 8vw, 88px); }
.rg .lo h2 { margin: 0; font-size: clamp(30px, 6.4vw, 48px); line-height: 1.02; letter-spacing: -.048em; text-wrap: balance; }
.lo-sub { margin: 12px 0 0; max-width: 60ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.lo-fein { margin: 16px 0 0; font-size: 15px; }
.lo-fein a, .lo-mehr { color: var(--ink); font-weight: 700; text-underline-offset: 4px; }
.lo-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.lo-mehr { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }

/* Gerade frei: am Handy wischen, am PC Raster */
.lo-karten { display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 290px); gap: 14px; margin: 20px -20px 0; padding: 0 20px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 20px; list-style: none; scrollbar-width: none; }
.lo-karten::-webkit-scrollbar { display: none; }
.lo-karten li { scroll-snap-align: start; min-width: 0; }
.lo-karten a { display: grid; gap: 3px; color: var(--ink); text-decoration: none; }
.lo-foto { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 10px; border-radius: 16px; overflow: hidden; background: var(--grund); }
.lo-foto-hinweis { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #14161a; font-size: 12px; font-weight: 600; line-height: 1.3; }
.lo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.lo-karten a:hover .lo-foto img { transform: scale(1.04); }
.lo-karten b { font-size: 22px; letter-spacing: -.035em; }
.lo-karten span:not(.lo-foto) { font-size: 15px; color: var(--ink-2); }
.lo-karten small { font-size: 13.5px; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Preise je Größe */
.lo-preise { display: grid; margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.lo-preise li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name wert" "spur spur" "info info"; gap: 6px 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.lo-p-name { grid-area: name; font-weight: 700; font-size: 16px; }
.lo-preise b { grid-area: wert; font-size: 23px; letter-spacing: -.035em; font-variant-numeric: proportional-nums; }
.lo-p-spur { grid-area: spur; display: block; height: 8px; border-radius: 99px; background: var(--grund); overflow: hidden; }
.lo-p-spur i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--ink); }
.lo-preise small { grid-area: info; font-size: 13.5px; color: var(--grau); }

/* Orte */
.lo-staedte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.lo-staedte a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; background: #0c0c0d; }
.lo-staedte img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.lo-staedte span { position: absolute; inset: auto 0 0 0; display: grid; gap: 1px; padding: 30px 12px 10px; background: linear-gradient(to top, rgba(12, 12, 13, .8), transparent); }
.lo-staedte b { font-size: 18px; letter-spacing: -.02em; }
.lo-staedte small { font-size: 13px; color: rgba(255, 255, 255, .85); }
.lo-orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.lo-orte li { display: grid; gap: 2px; padding: 13px 0; border-bottom: 1px solid var(--linie); min-width: 0; }
.lo-orte b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-orte span { font-size: 13.5px; color: var(--grau); }

/* Warum */
.lo-warum { display: grid; margin-top: 20px; border-top: 1px solid var(--ink); }
.lo-warum > div { padding: 18px 0 20px; border-bottom: 1px solid var(--linie); }
.lo-warum b { font-size: 20px; letter-spacing: -.025em; }
.lo-warum p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }

/* Fragen: Optik aus ratgeber.css (.rg-faq) */
.lo-faq { margin-top: 20px; }

/* Ganz Österreich: Bundesländer als Fotokacheln, Hauptstädte als ruhige Liste */
.lo-ueberall { padding-bottom: 8px; }
.rg .lo-gruppe { margin: 28px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.lo-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 699px) { .lo-kacheln li:first-child { grid-column: 1 / -1; } .lo-kacheln li:first-child a { aspect-ratio: 2 / 1; } } /* 9 Bundesländer: Wien breit, dann geht es am Handy in 2 Spalten auf */
.lo-kacheln a { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; background: #0c0c0d; isolation: isolate; }
.lo-kacheln img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.lo-kacheln a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 12, 13, .78) 0%, rgba(12, 12, 13, .2) 55%, rgba(12, 12, 13, 0) 100%); }
.lo-kacheln a:hover img { transform: scale(1.05); }
.lo-k-text { position: absolute; z-index: 1; inset: auto 12px 10px 12px; display: grid; gap: 1px; }
.lo-k-text b { font-size: clamp(17px, 4.6vw, 22px); letter-spacing: -.03em; line-height: 1.1; }
.lo-k-text small { font-size: 13px; color: rgba(255, 255, 255, .85); }
.lo-kacheln a[aria-current="page"] { box-shadow: 0 0 0 3px var(--ink); }
.lo-kacheln a[aria-current="page"] .lo-k-text small { color: #fff; font-weight: 700; }
.lo-zeilen { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.lo-zeilen a { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "name n pfeil" "land n pfeil"; align-items: center; column-gap: 12px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--linie); color: var(--ink); text-decoration: none; }
.lo-zeilen b { grid-area: name; font-size: 18px; letter-spacing: -.02em; }
.lo-zeilen small { grid-area: land; font-size: 13.5px; color: var(--grau); }
.lo-z-n { grid-area: n; font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: proportional-nums; }
.lo-zeilen i { grid-area: pfeil; font-style: normal; font-size: 18px; color: var(--grau); transition: transform .2s; }
.lo-zeilen a:hover i { transform: translateX(3px); color: var(--ink); }
.lo-zeilen a[aria-current="page"] b { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Abschluss dunkel, geht direkt in den dunklen Fuß über */
.lo-ende { margin-top: clamp(56px, 9vw, 96px); padding: clamp(48px, 9vw, 96px) 0 clamp(40px, 7vw, 72px); background: #111112; color: #fff; }
.rg .lo-ende h2 { color: #fff; font-size: clamp(34px, 7.4vw, 64px); }
.lo-ende h2 span { display: block; color: rgba(255, 255, 255, .58); }
.lo-ende p { margin: 14px 0 0; font-size: 17px; color: rgba(255, 255, 255, .8); }

/* Fester Knopf am Handy, erst wenn der Knopf im Kopf weg ist (public/landing-ort.js) */
.lo-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--linie); transform: translateY(110%); transition: transform .25s ease; }
.lo-leiste .lo-btn { min-height: 52px; }
body.lo-leiste-an .lo-leiste { transform: none; }
body.lo-leiste-an .fuss { padding-bottom: 84px; }

@media (max-width: 699px) { .lo-hero::after { background: linear-gradient(to top, rgba(12, 12, 13, .9) 0%, rgba(12, 12, 13, .72) 42%, rgba(12, 12, 13, .38) 68%, rgba(12, 12, 13, .1) 86%, rgba(12, 12, 13, 0) 100%); } }
@media (min-width: 700px) {
  .lo-hero { min-height: min(88vh, 820px); max-height: none; }
  .lo-hero-in { padding-top: 140px; padding-bottom: 56px; }
  .lo-lead { font-size: 19px; }
  .lo-werte ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lo-werte li { padding: 22px 20px 22px 0; border-bottom: 0; }
  .lo-werte li + li { padding-left: 20px; border-left: 1px solid var(--linie); }
  .lo-staedte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lo-orte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lo-warum { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 0; }
  .lo-warum > div { border-top: 1px solid var(--ink); border-bottom: 0; }
  .lo-preise li { grid-template-columns: 150px minmax(0, 1fr) 110px 200px; grid-template-areas: "name spur wert info"; align-items: center; }
  .lo-preise b { text-align: right; }
  .lo-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .lo-zeilen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 900px) {
  .lo-karten { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; margin: 24px 0 0; padding: 0; overflow: visible; gap: 28px 18px; }
  .lo-staedte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lo-orte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lo-zeilen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lo-leiste { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lo-leiste, .lo-foto img, .lo-btn, .lo-kacheln img, .lo-zeilen i { transition: none; } }