/* ============================================================
   Page styles — inner pages (boats, detail, sell, detailing, about, contact)
   ============================================================ */

/* ---------- generic page hero ---------- */
.page-hero { padding-top: 150px; padding-bottom: clamp(40px, 5vw, 64px); background: var(--paper); }
.page-hero-title { font-size: clamp(36px, 5.6vw, 72px); margin-top: 18px; }
.page-hero-lead { margin-top: 22px; font-size: clamp(17px, 1.7vw, 20px); color: var(--slate-500); max-width: 60ch; }

/* ---------- filter bar ---------- */
.boats-listing { padding-bottom: clamp(64px, 9vw, 120px); }
.filter-bar {
  position: sticky; top: 74px; z-index: 40;
  background: oklch(0.985 0.004 230 / 0.9); backdrop-filter: blur(12px);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 18px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip {
  border: 1px solid var(--line); background: var(--white); color: var(--navy-700);
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; transition: all .2s;
  white-space: nowrap;
}
.fchip:hover { border-color: var(--navy-600); }
.fchip.on { background: var(--navy-800); color: var(--white); border-color: var(--navy-800); }
.filter-controls { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-end; border-top: 1px solid var(--line-soft); padding-top: 18px; }
.frange { display: flex; flex-direction: column; gap: 8px; min-width: 190px; flex: 1; }
.frange label, .fselect label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--slate-500); display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; }
.frange-val, .frange label { white-space: nowrap; }
.frange-val { color: var(--navy-900); font-weight: 700; font-family: var(--font-display); }
.frange input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: var(--line); outline: none; }
.frange input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--navy-800); cursor: pointer; border: 3px solid var(--white); box-shadow: var(--shadow-sm); }
.frange input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--navy-800); cursor: pointer; border: 3px solid var(--white); }
.fselect { display: flex; flex-direction: column; gap: 8px; }
.fselect select {
  font-family: var(--font-body); font-size: 14px; padding: 9px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--white); color: var(--navy-800); cursor: pointer; min-width: 130px;
}
.ftoggle { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--white); padding: 9px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--navy-700); }
.ft-box { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--line); transition: all .2s; }
.ftoggle.on { border-color: var(--brass); color: var(--navy-900); }
.ftoggle.on .ft-box { background: var(--brass); border-color: var(--brass); }
.fsort { margin-left: auto; }

.results-row { display: flex; align-items: center; justify-content: space-between; margin: 26px 2px 24px; }
.results-count { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy-800); white-space: nowrap; }
.reset-btn { background: none; border: none; color: var(--slate-500); font-size: 13.5px; font-weight: 500; }
.reset-btn:hover { color: var(--navy-900); }
.empty-state { text-align: center; padding: 70px 0; display: flex; flex-direction: column; gap: 18px; align-items: center; color: var(--slate-500); }

/* ---------- detail page ---------- */
.detail-top { padding-top: 110px; }
.breadcrumb { background: none; border: none; color: var(--slate-500); font-size: 14px; font-weight: 500; padding: 8px 0; white-space: nowrap; }
.breadcrumb:hover { color: var(--navy-900); }
.detail-main { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 4vw, 64px); padding-top: 18px; align-items: start; }
.gallery { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 92px; }
.gallery-main { position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-md); }
.gallery-zoom { position: absolute; right: 14px; bottom: 14px; color: var(--white); background: oklch(0.2 0.03 250 / 0.5); backdrop-filter: blur(4px); padding: 7px 12px; border-radius: 999px; font-size: 11px; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.gthumb { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent; padding: 0; background: none; transition: border-color .2s; }
.gthumb.on { border-color: var(--brass); }
.gthumb-num { position: absolute; left: 6px; bottom: 5px; color: var(--white); font-size: 9px; opacity: 0.85; }

.detail-info { padding-top: 6px; }
.detail-title { font-size: clamp(30px, 4vw, 50px); margin-top: 14px; }
.detail-blurb { margin-top: 18px; font-size: 17px; color: var(--slate-500); }
.detail-price { display: flex; align-items: baseline; gap: 14px; margin: 26px 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.detail-price .price { font-size: 38px; }
.detail-price .price-old { font-size: 18px; }
.price-note { color: var(--slate-400); }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; }
.spec-row { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.spec-row dt { color: var(--slate-500); font-size: 14px; }
.spec-row dd { margin: 0; font-weight: 600; color: var(--navy-900); font-size: 14.5px; white-space: nowrap; text-align: right; }
.detail-actions { display: flex; gap: 12px; margin: 30px 0 24px; flex-wrap: wrap; }
.detail-assure { display: flex; flex-direction: column; gap: 9px; }
.assure-item { color: var(--navy-700); font-size: 14.5px; }
.related-title { font-size: clamp(24px, 3vw, 34px); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: oklch(0.12 0.02 250 / 0.92); display: flex; align-items: center; justify-content: center; padding: clamp(20px, 5vw, 70px); backdrop-filter: blur(6px); }
.lightbox-close { position: absolute; top: 24px; right: 28px; background: oklch(1 0 0 / 0.12); border: none; color: var(--white); width: 44px; height: 44px; border-radius: 50%; font-size: 18px; }
.lightbox-close:hover { background: oklch(1 0 0 / 0.22); }
.lightbox-stage { width: min(1000px, 100%); aspect-ratio: 4/3; position: relative; }
.lightbox-stage .slot-wrap { height: 100%; border-radius: var(--r-md); overflow: hidden; }
.lightbox-nav { position: absolute; left: 50%; bottom: -56px; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; color: var(--white); }
.lightbox-nav button { background: oklch(1 0 0 / 0.12); border: none; color: var(--white); width: 44px; height: 44px; border-radius: 50%; font-size: 18px; }
.lightbox-nav button:hover { background: oklch(1 0 0 / 0.22); }

/* ---------- packages (sell + detailing) ---------- */
.pkg-sec { background: var(--paper-2); }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); align-items: stretch; }
.pkg-card { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 34px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 16px; position: relative; transition: transform .35s, box-shadow .35s; }
.pkg-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pkg-card.featured { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass), var(--shadow-md); }
.pkg-flag { position: absolute; top: -13px; left: 30px; background: var(--brass); color: var(--navy-900); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }
.pkg-tag { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--brass); text-transform: uppercase; }
.pkg-title { font-size: 23px; }
.pkg-price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.pp-amount { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--navy-900); }
.pp-note { font-size: 13px; color: var(--slate-500); }
.pkg-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pkg-feats li { display: flex; gap: 11px; font-size: 14.5px; color: var(--navy-700); line-height: 1.4; }
.pf-tick { color: var(--brass); font-weight: 700; flex: none; }

/* detailing cards with media */
.detail-card { padding: 0; overflow: hidden; }
.detail-card .detail-card-media { aspect-ratio: 16/10; }
.detail-card-media .slot-wrap { width: 100%; height: 100%; }
.detail-card-body { padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.detail-card-sub { font-size: 14.5px; color: var(--slate-500); }
.detail-card.featured .pkg-flag { top: 16px; right: 16px; left: auto; }

/* before/after */
.ba-sec { background: var(--paper-2); }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ba-item { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.ba-item .slot-wrap { width: 100%; }
.ba-label { position: absolute; top: 16px; left: 16px; background: oklch(0.2 0.03 250 / 0.55); color: var(--white); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; backdrop-filter: blur(4px); }
.ba-label.after { background: var(--brass); color: var(--navy-900); }

/* ---------- forms ---------- */
.form-sec { background: var(--paper); }
.form-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.form-title { font-size: clamp(28px, 3.6vw, 44px); margin-top: 16px; }
.form-lead { margin-top: 18px; font-size: 17px; color: var(--slate-500); }
.form-media { margin-top: 32px; aspect-ratio: 4/3; }
.form-media .slot-wrap { height: 100%; }
.form-card { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(28px, 3.5vw, 44px); box-shadow: var(--shadow-md); }
.val-form { display: flex; flex-direction: column; gap: 20px; }
.vf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vf-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.vf-field { display: flex; flex-direction: column; gap: 8px; }
.vf-field label { font-size: 13px; font-weight: 600; color: var(--navy-700); letter-spacing: 0.01em; }
.vf-field input, .vf-field textarea {
  font-family: var(--font-body); font-size: 15px; padding: 13px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper); color: var(--navy-900); transition: border-color .2s, box-shadow .2s; resize: vertical;
}
.vf-field input:focus, .vf-field textarea:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px oklch(0.4 0.04 250 / 0.1); background: var(--white); }
.vf-field.has-err input { border-color: oklch(0.6 0.18 25); }
.vf-err { font-size: 12px; color: oklch(0.55 0.18 25); }
.pkg-radios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pkg-radio { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); transition: all .2s; }
.pkg-radio:hover { border-color: var(--navy-600); }
.pkg-radio.on { border-color: var(--navy-800); background: var(--white); box-shadow: 0 0 0 2px var(--navy-800); }
.pr-title { font-size: 13px; font-weight: 600; color: var(--navy-900); }
.pr-price { font-size: 12px; color: var(--slate-500); }
.vf-submit { margin-top: 6px; align-self: flex-start; }
.form-success { text-align: center; padding: 30px 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fs-check { width: 64px; height: 64px; border-radius: 50%; background: oklch(0.62 0.13 150 / 0.14); color: oklch(0.5 0.13 150); display: grid; place-items: center; font-size: 30px; }
.form-success h3 { font-size: 26px; }
.form-success p { color: var(--slate-500); max-width: 42ch; }

/* ---------- about ---------- */
.about-hero { padding-top: 130px; }
.about-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.about-portrait { aspect-ratio: 4/5; min-height: 420px; }
.about-portrait .slot-wrap { height: 100%; }
.about-title { font-size: clamp(34px, 5vw, 60px); margin-top: 14px; }
.about-lead { margin-top: 22px; font-size: 20px; color: var(--navy-700); font-weight: 500; }
.about-text { margin-top: 18px; font-size: 16.5px; color: var(--slate-500); }
.about-stats { display: flex; gap: clamp(24px, 4vw, 52px); margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.about-stat { display: flex; flex-direction: column; gap: 4px; }
.as-num { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--navy-900); }
.as-lab { font-size: 13px; color: var(--slate-500); }
.values-band { background: var(--navy-800); color: var(--white); padding-block: clamp(64px, 8vw, 110px); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.value-item { display: flex; flex-direction: column; gap: 12px; }
.vi-num { color: var(--brass); font-size: 13px; }
.value-item h3 { color: var(--white); font-size: 24px; }
.value-item p { color: oklch(0.85 0.015 235); font-size: 15.5px; }

/* ---------- contact ---------- */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 4px; }
.contact-line { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); transition: padding .2s; }
a.contact-line:hover { padding-left: 8px; }
.cl-key { color: var(--brass); font-size: 11px; }
.cl-val { font-size: 18px; font-weight: 500; color: var(--navy-900); }
.contact-map { margin-top: 22px; aspect-ratio: 16/10; border-radius: var(--r-lg); overflow: hidden; }
.contact-map .slot-wrap { width: 100%; height: 100%; }

/* responsive */
@media (max-width: 980px) {
  .detail-main, .form-split, .about-split, .contact-split { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .pkg-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .values-grid { grid-template-columns: 1fr; }
  .about-portrait { aspect-ratio: 16/11; min-height: 0; }
  .fsort { margin-left: 0; }
}
@media (max-width: 600px) {
  .vf-row, .vf-row-3, .pkg-radios, .gallery-thumbs { grid-template-columns: 1fr 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Legal pages — Impressum, Datenschutz, AGB
   ============================================================ */
.legal-sec { padding-top: clamp(8px, 2vw, 20px); padding-bottom: clamp(64px, 9vw, 120px); }
.legal-prose { max-width: 72ch; }
.legal-note {
  margin: 0 0 32px; padding: 14px 18px;
  border-left: 3px solid var(--brass);
  background: var(--paper); border-radius: var(--r-lg);
  color: var(--slate-500); font-size: 15px;
}
.legal-section { margin-bottom: 32px; }
.legal-section:last-child { margin-bottom: 0; }
.legal-h {
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.25;
  color: var(--navy-900); margin: 0 0 12px;
}
.legal-p {
  margin: 0 0 12px; line-height: 1.7;
  color: var(--navy-700); font-size: clamp(15px, 1.5vw, 17px);
}
.legal-p:last-child { margin-bottom: 0; }
.legal-prose a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal-prose a:hover { opacity: 0.8; }

/* ---------- boat detail: description + equipment ---------- */
.detail-desc-sec { padding-top: clamp(8px, 2vw, 24px); }
.detail-desc-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.detail-desc-h, .detail-feats-h { font-size: clamp(20px, 2.4vw, 26px); color: var(--navy-900); margin: 0 0 16px; }
.detail-desc-p { line-height: 1.75; color: var(--navy-700); font-size: clamp(15px, 1.5vw, 17px); margin: 0 0 14px; }
.detail-desc-p:last-child { margin-bottom: 0; }
.detail-feats { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px); }
.detail-feats-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.detail-feats-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; color: var(--navy-700); font-size: clamp(14px, 1.4vw, 16px); }
.df-tick { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--brass); color: var(--white); display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
@media (max-width: 860px) { .detail-desc-grid { grid-template-columns: 1fr; } }