/* Angebotsseiten /onepager/ und /cinematic-website/ (28.09.2026).
   Wird nach style.css, recht.css und ratgeber.css eingebunden und nutzt deren Tokens und Bausteine:
   dunkler Kopf (.doc__hero, .rg-crumbs), heller Leseteil (.rg-kurz, .rg-sec, .rg-h2, .rg-checks), dunkles Band (.rg-offer), FAQ (.qa, .rg-faq).
   Hier steht nur, was die beiden Seiten zusätzlich brauchen. Keine Bilder im CSS, keine Schriften, kein JavaScript. */

/* ---------- Was im Onepager drin ist: Liste mit Linien, ab 720 px in zwei Spalten ---------- */
.doc__body .ang-drin{list-style:none;margin:1.2em 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:44px;border-top:1px solid var(--line)}
.doc__body .ang-drin li{position:relative;margin:0;padding:.8em 0 .85em 1.7em;border-bottom:1px solid var(--line);max-width:none;color:var(--text-primary)}
.ang-drin li::before{content:"";position:absolute;left:0;top:1.62em;width:.85em;height:2px;border-radius:1px;background:var(--accent-ink)}
@media (min-width:720px){.doc__body .ang-drin{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Abschnitte eines Onepagers: Reihenfolge von oben nach unten ----------
   Baut auf .next-steps (style.css) auf. Eine feine Linie verbindet die Nummern wie der Weg beim Scrollen.
   Die letzte Nummer (Kontakt) ist gold, weil die Besucher dort ankommen sollen. */
.doc__body .ang-abschnitte{margin:1.3em 0 1.4em}
.doc__body .ang-abschnitte li{padding:10px 0;border-top:0}
.ang-abschnitte li:last-child{border-bottom:0}
.ang-abschnitte li>span{padding-top:2px}
.ang-abschnitte li:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:46px;bottom:-6px;width:1px;background:#A69E90}
.ang-abschnitte li:last-child::before{background:var(--accent);color:var(--canvas-deep)}

/* ---------- Standbild aus dem Film (nur /cinematic-website/) ----------
   Breitbild wie im Kino (2.39 zu 1), Ausschnitt um Dorf, See und aufreissenden Nebel. Lädt erst beim Hinscrollen. */
.ang-still{margin:1.9em 0 2em}
.ang-still img{width:100%;height:auto;aspect-ratio:2.39/1;object-fit:cover;object-position:50% 62%;border-radius:var(--radius);background:var(--canvas-deep)}
.doc__body .ang-still figcaption{margin-top:.75em;max-width:68ch;font:400 .875rem/1.55 var(--f-body);color:var(--text-secondary)}

/* ---------- Dunkles Band: Preis, Ablauf, Anfrage (Grundstil .rg-offer in ratgeber.css) ----------
   Gleiche Spaltenbreite wie der helle Leseteil (.doc__narrow), damit die Textkante durchläuft. */
.ang-band p{margin:0 0 1em;max-width:68ch;color:var(--text-on-deep-2)}
.ang-band .ang-band__lead{font-size:1.12rem;line-height:1.6;color:var(--text-on-deep)}
.ang-band p a:not(.link-arrow){color:var(--text-on-deep);text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--accent);transition:color .3s var(--ease-out)}
.ang-band p a:not(.link-arrow):hover{color:var(--accent)}
.ang-band .ang-link{display:inline;line-height:1.8}
.ang-sec + .ang-sec{margin-top:clamp(44px,6vw,64px);padding-top:clamp(40px,5.5vw,56px);border-top:1px solid var(--line-deep)}
.ang-h2{margin:0 0 .6em;font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.14;letter-spacing:-.02em;color:var(--text-on-deep);text-wrap:balance}

/* Anfrage am Schluss des Bands: ein Satz, Knopf, Link zu allen Paketen (wie .tarif-end auf der Startseite) */
.ang-cta{margin-top:clamp(48px,6vw,72px);padding-top:clamp(36px,5vw,48px);border-top:1px solid var(--line-deep)}
.ang-band .ang-cta__satz{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.25;letter-spacing:-.01em;color:var(--text-on-deep);text-wrap:balance}
.ang-cta .rg-offer__cta{margin:1.4rem 0 0}
@media (max-width:479px){.ang-cta .btn{width:100%}}

/* ---------- Druck ---------- */
@media print{
  .ang-band,.ang-band p,.ang-h2,.ang-band .ang-cta__satz{color:#000!important}
  .ang-cta{display:none!important}
  .ang-abschnitte li::after{display:none}
  .ang-still{break-inside:avoid}
}