/* mobil365 – Basis-Styles. Seitenspezifisches Layout steht inline im HTML (aus dem Design übernommen). */
@font-face { font-family: 'Dia'; src: url('/assets/fonts/Dia-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Dia'; src: url('/assets/fonts/Dia-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root { --green: #0c3518; --accent: #9be15d; --ink: #10251a; --muted: #4d6656; --bg: #f3f5ef; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Dia', system-ui, sans-serif; }
img { max-width: 100%; }
a { color: var(--green); }
a:hover { color: #1d6b33; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Formulare */
.form-status { margin: 0; font-size: 15px; min-height: 1.4em; }
.form-status.ok { color: #1d5a2e; }
.form-status.err { color: #8f1e18; }
.js-contact label:has(> input[type="checkbox"]) { display: block !important; }
.js-contact label > input[type="checkbox"] { float: left; margin: 2px 12px 0 0 !important; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button[disabled] { opacity: .6; cursor: progress; }

/* Gmunden-Seite */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.stat { background: #164a24; border-radius: 18px; padding: 18px 22px; min-width: 140px; }
.stat-num { font-size: 40px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 14px; color: #cfe3d3; margin-top: 6px; }
.filter-bar { background: #fff; border-radius: 18px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; box-shadow: 0 10px 30px rgba(12,53,24,.10); margin-bottom: 20px; position: relative; z-index: 2; }
.chip { font: inherit; font-size: 15px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0; cursor: pointer; background: #eef4ec; color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--green); color: #fff; }
.lot { font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; border: 2px solid #dfe7dc; background: #fff; color: var(--ink); width: 100%; }
.lot[aria-pressed="true"] { border-color: var(--green); background: #f3f8f1; }
.lot-count { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 14px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.lot-count b { font-size: 22px; }
.lot-count small { font-size: 10px; margin-top: 3px; opacity: .9; }
.lot-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lot-name { font-size: 17px; font-weight: 700; }
.lot-addr { font-size: 14px; color: var(--muted); }
.badge { flex: 0 0 auto; font-size: 12px; padding: 5px 10px; border-radius: 999px; }
.s-many { --c: #1f8a3f; --bg2: #e3f3e6; --fg2: #1d5a2e; }
.s-few { --c: #c97a10; --bg2: #fbefdc; --fg2: #7a470a; }
.s-none { --c: #7d8a80; --bg2: #eef1ec; --fg2: #4d5a51; }
.lot-count { background: var(--c); }
.badge { background: var(--bg2); color: var(--fg2); }
.detail-card { background: #fff; border-radius: 22px; padding: 28px; display: flex; flex-wrap: wrap; gap: 28px; }
.detail-card h2 { margin: 0; font-size: 30px; line-height: 1.1; }
.detail-col { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.detail-free { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.detail-free b { font-size: 56px; line-height: 1; color: var(--c); }
.detail-hint { margin: 0; font-size: 15px; padding: 10px 14px; border-radius: 12px; background: #fbefdc; color: #7a470a; }
.detail-h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: #1d6b33; }
.detail-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.detail-list li { font-size: 15px; line-height: 1.45; padding-bottom: 8px; border-bottom: 1px solid #e6ece3; }
.conn { display: flex; flex-wrap: wrap; gap: 8px; }
.conn a, .conn span { font-size: 14px; padding: 9px 12px; border-radius: 10px; background: #eef4ec; color: var(--ink); text-decoration: none; }
.conn a:hover { background: #dcebd8; }
.btn-nav { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; background: var(--green); color: #fff !important; text-decoration: none; padding: 14px 22px; min-height: 48px; border-radius: 999px; font-weight: 700; }
.map { width: 100%; height: 640px; border-radius: 22px; overflow: hidden; background: #e7ede2; box-shadow: 0 10px 30px rgba(12,53,24,.10); z-index: 1; }
.pin { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid #fff; background: var(--c); box-shadow: 0 6px 14px rgba(12,53,24,.35); display: flex; align-items: center; justify-content: center; }
.pin span { transform: rotate(45deg); color: #fff; font: 700 12px 'Dia', system-ui, sans-serif; }
.pin.sel { width: 46px; height: 46px; border-color: var(--green); }
.leaflet-div-icon.pin-wrap { background: none; border: 0; }
.mobil-card { border: 1.5px solid #dbe5d8; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.mobil-card:hover { border-color: var(--green); transform: translateY(-2px); color: var(--ink); }
.mobil-card h3 { margin: 0; font-size: 19px; }
.mobil-card p { margin: 0; font-size: 15px; line-height: 1.5; color: #3d5546; flex: 1; }
.mobil-link { font-size: 14px; font-weight: 700; color: #1d6b33; }

/* Mobil: große Überschriften und Innenabstände verkleinern (Layout steht inline) */
@media (max-width: 720px) {
  h1 { font-size: 40px !important; }
  h2[style*="font-size: 46px"], h2[style*="font-size: 48px"], h2[style*="font-size: 40px"], h2[style*="font-size: 36px"] { font-size: 30px !important; }
  [style*="padding: 56px"], [style*="padding: 48px"], [style*="padding: 44px"], [style*="padding: 40px"] { padding: 24px !important; }
  [style*="font-size: 60px"], [style*="font-size: 64px"] { font-size: 40px !important; }
  .map { height: 460px; }
  .detail-free b { font-size: 44px; }
}