/* ============================================================
   Unterseiten (Immobilienvideo, Immobilienfotografie, Social Media)
   Nutzt Tokens und Bausteine aus style.css (.wrap, .grid, .kicker,
   .h2, .lead, .body, .btn, .btn-text, .reveal, .figure, .yt-facade)
   und das .back-link aus legal.css. Hier nur, was die Unterseiten
   zusaetzlich brauchen. Bewusst redaktionell: Haarlinien, keine
   Kartenraster mit Icons.
   ============================================================ */

/* ---------- Kopfbereich ---------- */
.sub-hero {
  padding-top: clamp(8rem, 18vh, 12rem);
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
}
.sub-hero h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 108%;
  font-size: clamp(2.2rem, 6.2vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: 17ch;
  text-wrap: balance;
}
.sub-hero .lead { max-width: 52ch; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.sub-hero .actions { margin-top: clamp(2rem, 4vw, 3rem); }
.sub-from {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sub-from b { color: var(--accent-lift); font-weight: 500; }

/* ---------- Abschnitte ---------- */
.sub-sec {
  padding-block: clamp(4rem, 10vh, 8rem);
  border-top: 1px solid var(--line-soft);
}
.sub-head { grid-column: 1 / span 5; }
.sub-body { grid-column: 7 / span 6; }
.sub-wide { grid-column: 1 / span 12; }
.sub-body > p + p, .sub-wide > p + p { margin-top: 1.1em; }
.sub-body .body, .sub-wide .body { max-width: 62ch; }
.sub-head .h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  overflow-wrap: break-word;
  hyphens: auto;
}
.sub-head .lead { margin-top: 1.25rem; max-width: 40ch; }
.sub-wide > .h2 + p, .sub-wide > .h2 + .lead { margin-top: 1.5rem; }

/* ---------- Schritte ---------- */
.sub-steps { list-style: none; margin: 0; padding: 0; }
.sub-steps li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  column-gap: 1rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.sub-steps li:last-child { border-bottom: 1px solid var(--line); }
.sub-steps .n {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  color: var(--accent-lift);
  padding-top: 0.45rem;
}
.sub-steps h3 {
  font-family: var(--f-display);
  font-weight: 560;
  font-stretch: 104%;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.sub-steps p { margin: 0; color: var(--ink-2); max-width: 58ch; }

/* ---------- Listen mit Haarlinien ---------- */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-2);
  line-height: 1.5;
}
.facts li:last-child { border-bottom: 1px solid var(--line-soft); }
.facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.4rem;
  width: 6px; height: 6px;
  background: var(--accent-lift);
}
.facts li b { color: var(--ink); font-weight: 500; }

/* ---------- Paketzeilen ---------- */
.pkgs { grid-column: 1 / span 12; }
.pkg {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 1.5rem;
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  border-top: 1px solid var(--line);
}
.pkg:last-child { border-bottom: 1px solid var(--line); }
.pkg-id { grid-column: 1 / span 5; }
.pkg-id h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 106%;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
}
.pkg-price {
  margin-top: 0.9rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-stretch: 104%;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pkg-price small {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-left: 0.5rem;
}
.pkg-tag {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--accent-lift);
  color: var(--accent-lift);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pkg-main { grid-column: 7 / span 6; }
.pkg-sum {
  margin: 0 0 1.25rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 46ch;
}
.pkg-main .facts { max-width: 60ch; }

/* ---------- Konditionen ---------- */
.terms { list-style: none; margin: 0; padding: 0; }
.terms li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-2);
  max-width: 70ch;
}
.terms li:last-child { border-bottom: 1px solid var(--line-soft); }
.terms a, .sub-wide a.inline, .sub-body a.inline {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.terms a:hover, .sub-wide a.inline:hover, .sub-body a.inline:hover {
  color: var(--accent-lift);
  border-bottom-color: var(--accent-lift);
}

/* ---------- Beispiele (Video/Foto) ---------- */
.sub-videos {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.sub-videos figure { margin: 0; }
.sv-reel-a { grid-column: 1 / span 4; }
.sv-reel-b { grid-column: 5 / span 4; margin-top: clamp(0rem, 4vw, 3rem); }
.sv-note { grid-column: 9 / span 4; align-self: end; }
.sv-note p { color: var(--ink-2); max-width: 34ch; margin: 0; }
.sv-wide-a { grid-column: 1 / span 8; }
.sv-wide-b { grid-column: 5 / span 8; }

.sub-shots {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.sub-shots figure { margin: 0; }
.ss-a { grid-column: 1 / span 7; }
.ss-b { grid-column: 8 / span 5; margin-top: clamp(0rem, 6vw, 5rem); }
.ss-c { grid-column: 1 / span 5; }
.ss-d { grid-column: 6 / span 7; margin-top: clamp(0rem, 6vw, 5rem); }
.ss-note { grid-column: 8 / span 5; align-self: end; }
.ss-note p { color: var(--ink-2); max-width: 34ch; margin: 0; }

/* ---------- Vergleichstabelle (wie auf der Analyse-Seite) ---------- */
.compare-table { --good: #5bbd2e; --bad: #6c7479; width: 100%; border-collapse: collapse; margin-top: clamp(2rem, 5vh, 2.75rem); font-size: 0.95rem; }
.compare-table th, .compare-table td { padding: 0.95rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; }
.compare-table thead th { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.compare-table thead th:not(:first-child) { text-align: center; }
.compare-table tbody th { font-family: var(--f-text); font-weight: 400; color: var(--ink-2); width: 52%; }
.compare-table td { text-align: center; font-family: var(--f-mono); font-size: 1.05rem; }
.compare-table td.col-bad { color: var(--muted); }
.compare-table td.col-good { color: var(--bad); }
.compare-table td.col-good[aria-label="Ja"] { color: var(--good); }
.compare-close { margin-top: clamp(1.75rem, 4vh, 2.25rem); font-family: var(--f-display); font-size: 1.15rem; font-weight: 550; color: var(--accent-lift); }
@media (max-width: 560px) {
  .compare-table { font-size: 0.85rem; }
  .compare-table th, .compare-table td { padding: 0.7rem 0.4rem; }
}

/* ---------- Fragen ---------- */
.sub-faq { grid-column: 1 / span 12; }
.sub-faq h3 {
  font-family: var(--f-display);
  font-weight: 550;
  font-stretch: 104%;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.sub-faq .qa {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.sub-faq .qa:last-child { border-bottom: 1px solid var(--line); }
.sub-faq .qa > div:first-child { grid-column: 1 / span 5; }
.sub-faq .qa > div:last-child { grid-column: 7 / span 6; }
.sub-faq .qa p { margin: 0; color: var(--ink-2); max-width: 58ch; }

/* ---------- Abschluss und Querverweise ---------- */
.sub-cta .h2 { max-width: 20ch; }
.sub-cta .lead { margin-top: 1.25rem; max-width: 46ch; }
.sub-cta .actions { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.sub-related {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0;
}
.sub-related li { border-top: 1px solid var(--line); }
.sub-related li:last-child { border-bottom: 1px solid var(--line); }
.sub-related a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--f-display);
  font-weight: 550;
  font-stretch: 104%;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s var(--ease), padding-left 0.4s var(--ease);
}
.sub-related a span {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.sub-related a:hover { color: var(--accent-lift); padding-left: 0.6rem; }

/* ---------- Mobil ---------- */
@media (max-width: 1000px) {
  .sub-head, .sub-body, .sub-wide, .pkg-id, .pkg-main,
  .sv-reel-a, .sv-reel-b, .sv-note, .sv-wide-a, .sv-wide-b,
  .ss-a, .ss-b, .ss-c, .ss-d, .ss-note,
  .sub-faq .qa > div:first-child, .sub-faq .qa > div:last-child { grid-column: 1 / span 12; margin-top: 0; }
  .sub-head { margin-bottom: 2rem; }
  .sv-reel-a, .sv-reel-b { grid-column: span 6; }
  .pkg { row-gap: 1.25rem; }
  .sub-faq .qa { row-gap: 0.75rem; }
  .sv-note { order: 5; }
}