/* =========================================================
   BRADA Website — interior page layouts
   Loaded on all pages except the homepage.
   ========================================================= */

main { display: block; }

/* ---------- PAGE HERO ---------- */
.page-hero {
  padding-top: calc(72px + clamp(48px, 8vw, 104px));
  padding-bottom: clamp(36px, 6vw, 72px);
}
.page-hero .crumbs {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: 26px;
}
.page-hero .crumbs a { color: #5a6a6e; }
.page-hero .crumbs a:hover { color: var(--ink); }
.page-hero .crumbs .sep { color: var(--gold); }
.page-hero h1 { max-width: 17ch; margin: 0; }
.page-hero .page-lead { margin: clamp(20px, 3vw, 30px) 0 0; max-width: 56ch; }
.page-hero.center { text-align: center; }
.page-hero.center h1, .page-hero.center .page-lead { margin-inline: auto; }
.page-hero.center .crumbs { justify-content: center; }

/* full-width media band */
.media-band { position: relative; width: 100%; aspect-ratio: 21/9; overflow: hidden; }
.media-band image-slot { width: 100%; height: 100%; }
.media-band .cap {
  position: absolute; bottom: 18px; left: var(--pad); color: rgba(240,235,224,0.78);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(23,35,35,0.42); padding: 6px 12px; backdrop-filter: blur(4px);
}
@media (max-width: 700px) { .media-band { aspect-ratio: 4/3; } }

/* ---------- SPLIT (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.split.flip .split-media { order: 2; }
.split-media { position: relative; aspect-ratio: 5/4; overflow: hidden; border-radius: 2px; }
.split-media image-slot { width: 100%; height: 100%; }
.split-text .eyebrow { margin-bottom: 16px; }
.split-text h2 { margin: 0 0 18px; }
.split-text p { margin: 0 0 16px; color: #3f5152; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split.flip .split-media { order: 0; }
  .split-media { aspect-ratio: 16/10; }
}

/* ---------- FEATURE LIST ---------- */
.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gold-line); border: 1px solid var(--gold-line); border-radius: 2px; overflow: hidden; }
.feature-list .feat { background: var(--cream-soft); padding: clamp(26px, 3vw, 38px) clamp(22px, 2.4vw, 30px); }
.feature-list .feat .n { font-family: var(--serif); font-size: 20px; color: var(--gold-deep); }
.feature-list .feat h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 14px 0 10px; color: var(--ink); }
.feature-list .feat p { margin: 0; font-size: 15px; line-height: 1.65; color: #5a6a6e; }
@media (max-width: 860px) { .feature-list { grid-template-columns: 1fr; } }

/* ---------- STAT BAND ---------- */
.stat-band { border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); }
.stat-band .row { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-band .cell { padding: clamp(34px, 4vw, 56px) clamp(20px, 2vw, 32px); }
.stat-band .cell + .cell { border-left: 1px solid var(--gold-line); }
.stat-band .cell b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--ink); }
.stat-band .cell span { display: block; margin-top: 12px; font-size: 14px; color: #5a6a6e; }
.stat-band.on-ink-band { background: var(--ink); border-color: rgba(240,235,224,0.16); }
.stat-band.on-ink-band .cell { border-color: rgba(240,235,224,0.16); }
.stat-band.on-ink-band .cell b { color: var(--cream); }
.stat-band.on-ink-band .cell span { color: var(--on-ink-2); }
@media (max-width: 760px) {
  .stat-band .row { grid-template-columns: 1fr 1fr; }
  .stat-band .cell:nth-child(3) { border-left: 0; }
  .stat-band .cell:nth-child(odd) { border-left: 0; }
  .stat-band .cell:nth-child(even) { border-left: 1px solid var(--gold-line); }
  .stat-band .cell:nth-child(3), .stat-band .cell:nth-child(4) { border-top: 1px solid var(--gold-line); }
}

/* ---------- STEPS ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.steps .step { padding-top: 22px; border-top: 1px solid var(--gold-line); }
.steps .step .n { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: var(--gold-deep); }
.steps .step h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 14px 0 10px; color: var(--ink); }
.steps .step p { margin: 0; font-size: 15px; line-height: 1.65; color: #5a6a6e; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- SECTION HEADERS ---------- */
.sec-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 52px); }
.sec-head .eyebrow { margin-bottom: 16px; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 18px 0 0; color: #3f5152; }

/* ---------- PROJECTS (reused on projekte.html) ---------- */
.proj-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 980px) { .proj-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .proj-list { grid-template-columns: 1fr; } }
.proj-card { background: var(--cream-soft); border: 1px solid var(--gold-line); border-radius: 2px; overflow: hidden; display: block; transition: box-shadow .3s, transform .3s; }
.proj-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(23,35,35,0.10); }
.proj-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.proj-media image-slot { width: 100%; height: 100%; }
.proj-status { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; background: rgba(240,235,224,0.94); padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink); }
.proj-status i { width: 6px; height: 6px; border-radius: 999px; background: var(--gold); }
.proj-status.is-tbd { color: var(--gold-deep); }
.proj-status.is-tbd i { background: var(--gold-line); }
.proj-stats b .tbd { font-family: var(--serif); }
.proj-note { grid-column: 1 / -1; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--gold-line); }
.proj-note p { margin: 0; max-width: 70ch; font-size: 14.5px; line-height: 1.65; color: #5a6a6e; }

/* ---------- JOBS (Karriere) ---------- */
.jobs { border-top: 1px solid var(--gold-line); }
.job {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid var(--gold-line);
}
.job-main { min-width: 0; }
.job h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; margin: 0; color: var(--ink); }
.job p { margin: 10px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: #5a6a6e; }
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.job-tags span { font-size: 12.5px; letter-spacing: 0.02em; color: #3f5152; padding: 6px 13px; border: 1px solid var(--gold-line); border-radius: 999px; }
.job-apply { flex: none; }
@media (max-width: 720px) {
  .job { grid-template-columns: 1fr; gap: 18px; }
  .job-apply { justify-self: start; }
}
.proj-body { padding: 22px 24px 26px; }
.proj-city { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.proj-name { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; margin: 8px 0 0; color: var(--ink); }
.proj-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border-top: 1px solid var(--gold-line); }
.proj-stats > div { padding: 16px 12px 0 0; }
.proj-stats > div + div { padding-left: 14px; border-left: 1px solid var(--gold-line); }
.proj-stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); }
.proj-stats span { display: block; margin-top: 4px; font-size: 12px; color: #5a6a6e; line-height: 1.3; }

/* filter chips */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
.filters button { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--gold-line); background: transparent; color: #3f5152; cursor: pointer; transition: .2s; }
.filters button:hover { border-color: var(--gold); color: var(--ink); }
.filters button.active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ---------- BLOG ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
@media (max-width: 980px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.post-card { display: block; }
.post-media { aspect-ratio: 3/2; overflow: hidden; border-radius: 2px; margin-bottom: 20px; }
.post-media image-slot { width: 100%; height: 100%; }
.post-meta { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.post-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.14; margin: 12px 0 10px; color: var(--ink); transition: color .2s; }
.post-card:hover h3 { color: var(--gold-deep); }
.post-card p { margin: 0; font-size: 15px; line-height: 1.65; color: #5a6a6e; }

/* featured post */
.post-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--gold-line); }
.post-feature .post-media { aspect-ratio: 16/11; margin: 0; }
.post-feature h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 50px); line-height: 1.06; margin: 16px 0 16px; color: var(--ink); }
.post-feature p { color: #3f5152; }
@media (max-width: 860px) { .post-feature { grid-template-columns: 1fr; } }

/* ---------- ARTICLE / PROSE ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article .prose { font-size: 18px; line-height: 1.75; color: #2a3a3b; font-weight: 300; }
.article .prose > * + * { margin-top: 1.4em; }
.article .prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; color: var(--ink); margin-top: 1.8em; }
.article .prose h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--ink); margin-top: 1.5em; }
.article .prose blockquote { margin: 1.6em 0; padding: 6px 0 6px 28px; border-left: 2px solid var(--gold); font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; color: var(--ink); font-style: italic; }
.article .prose ul { padding-left: 22px; }
.article .prose li { margin-top: 0.5em; }
.article .prose a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-line); }
.article .prose strong { font-weight: 500; color: var(--ink); }

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info dl { margin: 0; }
.contact-info .item { padding: 22px 0; border-top: 1px solid var(--gold-line); }
.contact-info .item:last-child { border-bottom: 1px solid var(--gold-line); }
.contact-info dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.contact-info dd { margin: 8px 0 0; font-size: 18px; color: var(--ink); }
.contact-info dd a { border-bottom: 1px solid var(--gold-line); }
.form { display: grid; gap: 18px; }
.form .field { display: grid; gap: 7px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 540px) { .form .row2 { grid-template-columns: 1fr; } }
.form label { font-size: 13px; letter-spacing: 0.04em; color: #3f5152; }
.form input, .form select, .form textarea {
  font-family: var(--font-sans); font-size: 16px; font-weight: 300; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--border-default); border-radius: 2px; background: var(--cream-soft);
  transition: border-color .2s, box-shadow .2s;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,169,110,0.18); }
.form textarea { resize: vertical; min-height: 130px; }
.audience-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.audience-pick label { cursor: pointer; }
.audience-pick input { position: absolute; opacity: 0; pointer-events: none; }
.audience-pick span { display: inline-block; padding: 10px 18px; border: 1px solid var(--gold-line); border-radius: 999px; font-size: 14px; color: #3f5152; transition: .2s; }
.audience-pick input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ---------- CTA BAND ---------- */
.cta-band { background: var(--ink); color: var(--cream); }
.cta-band .inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.cta-band h2 { margin: 0; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .cta-band .inner { grid-template-columns: 1fr; } }

/* ---------- LEGAL ---------- */
.legal { max-width: 760px; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--ink); margin: 1.8em 0 0.6em; }
.legal p, .legal address { font-size: 16px; line-height: 1.7; color: #2a3a3b; font-style: normal; margin: 0.6em 0; }
.legal a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-line); }

/* =========================================================
   Immobilien-Angebote (Übersicht + Detail)
   ========================================================= */
.immo-typ {
  position: absolute; top: 14px; right: 14px;
  background: var(--ink); color: var(--cream);
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.immo-demo {
  position: absolute; bottom: 14px; right: 14px;
  background: var(--gold-deep); color: #fff;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.proj-status.is-reserviert i { background: #d99a2b; }
.proj-status.is-weg { color: #8a8a8a; }
.proj-status.is-weg i { background: #b3b3b3; }
.immo-empty { color: #5a6a6e; font-size: 17px; }
.immo-empty a { color: var(--gold-deep); }

.immo-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-top: clamp(16px, 2vw, 24px); }
.immo-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.immo-badges .immo-typ, .immo-badges .immo-demo, .immo-badges .proj-status { position: static; }
.immo-price-box { text-align: right; }
.immo-price { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 46px); line-height: 1; color: var(--ink); }
.immo-price-label { margin-top: 8px; font-size: 13px; color: #5a6a6e; }

.immo-gallery-wrap { margin-top: clamp(24px, 3vw, 36px); }
.immo-gallery-main { aspect-ratio: 16/10; border-radius: 3px; overflow: hidden; background: var(--cream-deep); }
.immo-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.immo-gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.immo-thumb { width: 92px; aspect-ratio: 4/3; border: 1px solid var(--gold-line); border-radius: 2px; overflow: hidden; padding: 0; cursor: pointer; background: none; opacity: .6; transition: opacity .2s, border-color .2s; }
.immo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.immo-thumb.active, .immo-thumb:hover { opacity: 1; border-color: var(--gold); }

.immo-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .immo-grid { grid-template-columns: 1fr; } }
.immo-desc { color: #3f5152; line-height: 1.8; font-size: 17px; white-space: pre-line; }
.immo-features { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.immo-features li { position: relative; padding-left: 22px; color: #3f5152; font-size: 15px; }
.immo-features li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--gold); }
@media (max-width: 560px) { .immo-features { grid-template-columns: 1fr; } }

.immo-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .immo-side { position: static; } }
.immo-card { background: var(--cream-soft); border: 1px solid var(--gold-line); border-radius: 3px; padding: 22px 24px; }
.immo-facts { display: flex; flex-direction: column; }
.immo-facts .fact { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--gold-line); }
.immo-facts .fact:last-child { border-bottom: 0; }
.immo-facts dt { color: #5a6a6e; font-size: 14px; }
.immo-facts dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 500; text-align: right; }
.immo-energie h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.immo-cta { display: block; text-align: center; background: var(--ink); color: var(--cream); padding: 15px 22px; border-radius: 2px; font-weight: 600; font-size: 15px; transition: background .2s; }
.immo-cta:hover { background: #2a3a3b; }
.immo-tel { display: block; text-align: center; color: var(--gold-deep); font-size: 14px; }
.immo-energie-note { margin: 0; color: #5a6a6e; font-size: 14px; line-height: 1.6; }