/* Moontech Labs · Unterseiten (Leistungen und Ratgeber), seit 15.10.2026
   Baut auf main.css auf (Farben, Schrift, Kopf, Fuss, Knöpfe, Formular, Fragen). Hell auf Kalk, ein Exponat im ersten Bildschirm,
   ein Steckbrief, ein Schluss in der Nacht mit dem Mond. Keine Szene, keine Einblendungen beim Scrollen. */

/* Der erste Abschnitt beginnt hinter dem Kopf, damit der Kopf von Anfang an dunkle Schrift trägt (main.js liest data-head) */

/* ---------- Erster Bildschirm: Text auf Kalk, Exponat rechts ---------- */
.s-hero { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--head-h) + var(--frame) + clamp(28px, 5vh, 64px)) 0 clamp(48px, 8vh, 96px); }
.s-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.s-hero h1 { font-size: clamp(40px, 4.4vw, 78px); line-height: 1.02; letter-spacing: -.04em; max-width: 15ch; }
.s-hero h1, .seite .h2 { text-wrap: balance; }
.head__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.s-lead { margin-top: clamp(18px, 2.4vh, 28px); font-size: clamp(19px, 1.35vw, 23px); line-height: 1.5; max-width: 40ch; }
.s-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(24px, 3.4vh, 38px); }

/* Steckbrief: die Fakten in Zeilen, keine Kacheln */
.s-fakten { margin: clamp(26px, 3.6vh, 40px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 44px); max-width: 640px; border-top: 1px solid var(--line); }
.s-fakten > div { padding: 12px 0 13px; border-bottom: 1px solid var(--line); }
.s-fakten dt { font-size: 14px; color: var(--muted); }
.s-fakten dd { margin: 2px 0 0; font-size: 16px; line-height: 1.45; font-weight: 500; }
.s-fakten dd span { font-weight: 400; color: var(--muted); }

/* ---------- Abbildungen: nummeriert, mit Quellenzeile ---------- */
.s-abb { margin: 0; }
.s-abb figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 52ch; }
.s-abb figcaption b { font-weight: 500; color: var(--ink); }
.s-abb figcaption a { color: var(--ink); text-underline-offset: 3px; }
.s-abb--seite { margin-top: clamp(26px, 4vh, 44px); }
.s-abb--seite img { width: 100%; max-width: 680px; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(20, 26, 46, .5); }

/* Die Vitrine der Startseite, hier mit echten Stücken. Sie steigt beim Laden einmal aus der Tiefe (Bewegungs-Vokabular: 14 px) */
.s-hero .exhibit { aspect-ratio: 1 / 1.08; animation: s-steigen 1.1s var(--out) .15s both; }
@keyframes s-steigen { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .s-hero .exhibit { animation: none; } }

/* Blätter in der Vitrine: zwei Seiten eines Berichts */
.s-blatt { position: absolute; z-index: 2; width: 54cqi; border-radius: 1.4cqi; overflow: hidden; background: #fff; box-shadow: 0 3cqi 7cqi rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.s-blatt img { width: 100%; height: auto; }
.s-blatt--hinten { left: 11cqi; top: 9cqi; transform: rotate(-5deg); filter: brightness(.82); }
.s-blatt--vorn { left: 35cqi; top: 21cqi; transform: rotate(3deg); }

/* Browserfenster in der Vitrine: zwei echte Webseiten */
.s-win { position: absolute; z-index: 2; width: 80cqi; border-radius: 1.8cqi; overflow: hidden; background: #fff; box-shadow: 0 3cqi 7cqi rgba(0, 0, 0, .45); }
.s-win__bar { display: flex; align-items: center; gap: 1.2cqi; height: 5.6cqi; padding: 0 2.4cqi; background: #E4E4DF; }
.s-win__bar i { width: 1.5cqi; height: 1.5cqi; border-radius: 50%; background: rgba(20, 26, 46, .28); }
.s-win img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.s-win--hinten { left: 7cqi; top: 10cqi; filter: brightness(.8); }
.s-win--vorn { left: 14cqi; top: 44cqi; }
.s-win--gross { left: 6cqi; right: 6cqi; width: auto; top: 50%; transform: translateY(-50%); }

/* Quartals-Check: ein echtes Messblatt, als Text gesetzt */
.s-check { position: absolute; z-index: 2; left: 12cqi; right: 12cqi; top: 9cqi; padding: 6cqi 6cqi 5cqi; border-radius: 1.6cqi; background: #F7F6F2; color: var(--ink); box-shadow: 0 3cqi 7cqi rgba(0, 0, 0, .45); font-size: max(12px, 3.3cqi); line-height: 1.3; }
.s-check__kopf { display: flex; justify-content: space-between; gap: 2cqi; padding-bottom: 2.6cqi; border-bottom: 1px solid rgba(20, 26, 46, .18); }
.s-check__kopf b { font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: max(11px, 2.9cqi); }
.s-check__kopf span { color: #4A5064; font-size: max(11px, 2.9cqi); }
.s-check__titel { margin-top: 4.5cqi; font-size: 8cqi; line-height: 1; letter-spacing: -.03em; font-weight: 500; }
.s-check ul { list-style: none; margin-top: 4cqi; }
.s-check li { display: flex; justify-content: space-between; gap: 2cqi; padding: 1.9cqi 0; border-bottom: 1px dotted rgba(20, 26, 46, .35); color: #4A5064; }
.s-check li b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-check__rat { margin-top: 3.6cqi; display: grid; gap: 1cqi; }
.s-check__rat b { font-weight: 500; font-size: max(11px, 2.8cqi); letter-spacing: .1em; text-transform: uppercase; color: var(--lamp-ink); }
.s-check__rat span { justify-self: start; background: linear-gradient(transparent 52%, rgba(230, 162, 92, .5) 52%, rgba(230, 162, 92, .5) 92%, transparent 92%); }

/* ---------- Abschnitte ---------- */
.s-sec { padding: clamp(64px, 10vh, 120px) 0; border-top: 1px solid var(--line); }
.s-sec__kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 110px); align-items: start; }
.s-sec__kopf > p { color: var(--muted); max-width: 52ch; padding-top: .5em; }
.s-text { max-width: 62ch; }
.s-text p + p { margin-top: 1em; }
.s-text p { color: var(--ink); }
.s-text p a, .s-sec__kopf > p a, .s-liste dd a, .s-ablauf p a { color: var(--ink); text-underline-offset: 3px; }
.s-text strong { color: var(--ink); font-weight: 500; }

/* Liste mit Begriff und Satz, zweispaltig, nur Linien */
.s-liste { margin: clamp(30px, 4.5vh, 52px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 96px); border-top: 1px solid var(--line); }
.s-liste > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 6px 22px; padding: 18px 0 19px; border-bottom: 1px solid var(--line); }
.s-liste dt { font-weight: 500; }
.s-liste dd { margin: 0; color: var(--muted); }

/* Ablauf: echte Reihenfolge, darum Nummern */
.s-ablauf { list-style: none; margin-top: clamp(34px, 5vh, 60px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 44px); counter-reset: s; }
.s-ablauf > li { counter-increment: s; padding-top: 18px; border-top: 1px solid var(--ink); }
.s-ablauf > li::before { content: "0" counter(s); display: block; font-size: 15px; letter-spacing: .04em; color: #5C6276; font-variant-numeric: tabular-nums; }
.s-ablauf h3 { margin-top: 10px; font-size: clamp(21px, 1.6vw, 27px); line-height: 1.15; letter-spacing: -.02em; }
.s-ablauf .s-preis { margin-top: 4px; font-weight: 500; }
.s-ablauf p:not(.s-preis) { margin-top: 8px; color: var(--muted); }

/* Stufen der KI-Beratung: drei Spalten mit Fakten */
.s-stufen { list-style: none; margin-top: clamp(34px, 5vh, 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 56px); }
.s-stufen { counter-reset: k; }
.s-stufen > li { counter-increment: k; padding-top: 18px; border-top: 1px solid var(--ink); }
.s-stufen > li::before { content: "0" counter(k); display: block; margin-bottom: 10px; font-size: 15px; letter-spacing: .04em; color: #5C6276; font-variant-numeric: tabular-nums; }
.s-weiter { margin-top: 18px; }
.s-stufen h3 { font-size: clamp(24px, 1.9vw, 32px); line-height: 1.1; letter-spacing: -.025em; }
.s-stufen .s-preis { margin-top: 6px; font-weight: 500; }
.s-stufen > li > p:not(.s-preis) { margin-top: 12px; color: var(--muted); }
.s-stufen ul { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); }
.s-stufen ul li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.45; }

/* Referenzen: echte Seiten im Browserrahmen */
.s-refs { list-style: none; margin-top: clamp(34px, 5vh, 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 36px); }
.s-refs a { display: block; text-decoration: none; }
.s-refs .ref__win { box-shadow: 0 0 0 1px var(--line), 0 24px 50px -28px rgba(20, 26, 46, .45); transition: transform .6s var(--out); }
.s-refs a:hover .ref__win { transform: translateY(-4px); }
.s-refs p { margin-top: 14px; color: var(--muted); }
.s-refs strong { display: block; color: var(--ink); font-weight: 500; }

/* Tabellen: Vergleich und Preisspannen */
.s-tabelle-rahmen { margin-top: clamp(30px, 4.5vh, 52px); overflow-x: auto; }
.s-tabelle { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.s-tabelle th, .s-tabelle td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); }
.s-tabelle thead th { font-size: 14px; font-weight: 500; color: var(--muted); border-bottom-color: var(--ink); }
.s-tabelle tbody th { font-weight: 500; }
.s-tabelle td { color: var(--muted); }
.s-tabelle .s-wir th, .s-tabelle .s-wir td, .s-tabelle .s-hl { color: var(--ink); background: rgba(230, 162, 92, .12); }
.s-tabelle .s-hl { padding-left: 12px; }
.s-tabelle--schmal { max-width: 900px; }
.s-tabelle .s-wir th:first-child { padding-left: 12px; }
.s-tabelle caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 14px; color: var(--muted); }

/* Preisgrafik (Abb. 1 im Ratgeber): Spannen je Quelle auf einer Achse, alle Werte direkt beschriftet */
.s-spannen { --achse: 35000; padding: clamp(18px, 2vw, 28px); border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.s-spannen__gruppe + .s-spannen__gruppe { margin-top: 18px; }
.s-spannen__titel { font-size: 15px; font-weight: 500; }
.s-spannen__zeile { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 7px; font-size: 13px; color: var(--muted); }
.s-spannen__bahn { position: relative; height: 22px; }
.s-spannen__bahn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.s-spannen__balken { position: absolute; top: 5px; height: 12px; border-radius: 4px; background: var(--ink); }
.s-spannen__wert { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 8px; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.s-spannen__wir .s-spannen__balken { background: var(--lamp-ink); }
.s-spannen__achse { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.s-spannen__skala { position: relative; height: 16px; border-top: 1px solid var(--ink); }
.s-spannen__skala span { position: absolute; top: 4px; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.s-spannen__skala span:first-child { transform: none; }
.s-spannen__wert--links { padding: 0 8px 0 0; }
.s-spannen__punkt { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--lamp-ink); box-shadow: 0 0 0 2px #fff; }
.s-spannen__wir { color: var(--ink); font-weight: 500; }

/* Prüffragen vor dem Auftrag */
.s-pruef { list-style: none; margin-top: clamp(30px, 4.5vh, 52px); border-top: 1px solid var(--line); max-width: 860px; }
.s-pruef li { padding: 16px 0 17px; border-bottom: 1px solid var(--line); }
.s-pruef b { display: block; font-weight: 500; }
.s-pruef span { display: block; margin-top: 3px; color: var(--muted); }

/* Quellen */
.s-quellen { margin-top: clamp(30px, 4.5vh, 52px); list-style: none; max-width: 860px; font-size: 15px; color: var(--muted); }
.s-quellen li { padding: 8px 0; border-bottom: 1px solid var(--line); }

/* Fragen: das Raster der Startseite, eigene Abstände */
.s-sec.sec--faq { padding: clamp(64px, 10vh, 120px) 0; }

/* ---------- Schluss: die Nacht mit dem Mond, das eine Formular ---------- */
.s-schluss { position: relative; margin: 0 var(--frame) var(--frame); border-radius: var(--radius); overflow: hidden; background: radial-gradient(90% 80% at 14% 18%, #1D2440 0%, var(--night) 62%); color: var(--moon); }
.s-schluss__mond { display: block; width: min(24vw, 320px); height: auto; aspect-ratio: 1; margin-bottom: clamp(28px, 5vh, 52px); border-radius: 50%; }   /* kein Leuchtschatten: das Licht liegt auf dem Mond selbst */
.s-schluss__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 6vw, 100px); align-items: end; padding: clamp(56px, 9vh, 110px) var(--inset) clamp(28px, 4vh, 48px); }
.s-schluss h2 { color: #fff; max-width: 13ch; }
.s-schluss__text > p { margin-top: 18px; max-width: 40ch; color: var(--muted-on-dark); }
.s-zusage { margin-top: 14px; color: #fff; font-weight: 500; }
.s-schluss .f-contact { margin-top: 22px; font-size: 15px; line-height: 1.6; color: var(--muted-on-dark); }
.s-schluss .f-contact a, .s-schluss .f-contact .mail { color: #fff; }
.s-schluss .form.glass--dark { background: rgba(16, 21, 40, .86); }
.s-schluss .field ::placeholder { color: rgba(232, 236, 243, .62); }   /* Kontrast über 4,5 : 1 auf der Nacht (Detektor 15.10.) */

/* ---------- Klein ---------- */
@media (max-width: 1100px) {
  .s-ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-stufen { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 900px) {
  .s-hero { min-height: 0; }
  .s-hero__grid { row-gap: 0; }
  .s-hero__text { display: contents; }
  .s-hero h1 { order: 1; }
  .s-lead { order: 2; }
  .s-hero .s-abb { order: 3; margin-top: 28px; }
  .s-fakten { order: 4; }
  .s-hero .actions { order: 5; }
  .s-hero__grid, .s-sec__kopf, .s-schluss__grid { grid-template-columns: 1fr; }
  .s-hero .exhibit { max-width: 520px; }
  .s-liste { grid-template-columns: 1fr; }
  .s-refs { grid-template-columns: 1fr; max-width: 560px; }
  .s-schluss__mond { width: 44vw; max-width: 240px; }
}
@media (max-width: 560px) {
  .s-fakten { grid-template-columns: 1fr; }
  .s-ablauf { grid-template-columns: 1fr; }
  .s-liste > div { grid-template-columns: 1fr; }
  .s-spannen__zeile, .s-spannen__achse { grid-template-columns: 1fr; gap: 2px; }
  .s-spannen__zeile > span:first-child { margin-top: 4px; }
}
@media (max-width: 700px) {
  .s-tabelle { min-width: 0; }
  .s-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .s-tabelle tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .s-tabelle th, .s-tabelle td { display: block; padding: 2px 0; border: 0; }
  .s-tabelle tbody th { padding-bottom: 6px; font-size: 17px; }
  .s-tabelle td::before { content: attr(data-label); display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
  .s-tabelle .s-hl { padding: 2px 8px 4px; }
  .s-tabelle .s-wir { padding: 14px 12px; background: rgba(230, 162, 92, .12); }
  .s-tabelle .s-wir th, .s-tabelle .s-wir td { background: none; }
}