/* sebastian-knorr.com — Angebotsseiten unter /en/ (machine-check, investment-decision, lenders)
   Claude Opus, 10.11.2026. Ergänzt seite.css, ändert dort nichts.
   Familie B „Redaktion“ (BILDSPRACHE.md §3): Papiergrund, große Serif mit einem kursiven Bruch (G4),
   Haarlinien statt Kästen, Sachleiste unter dem Kopf (G6). Kein Bildfeld, denn die Arbeitsprobe ist das Bild.
   Farben und Schriften aus seite.css, Rostrot bleibt der eine kräftige Ton (G5). */

.angebot .kopf { position: static; border-bottom: 1px solid var(--linie); }
.angebot .kopf nav a { color: var(--leise); }
.angebot .kopf nav a:hover { color: var(--text); }
.angebot .kopf nav a.ruf { color: var(--text); }
@media (max-width: 760px) { .angebot .kopf nav a:not(.ruf) { display: none; } }

/* Kopfteil */
.auftakt { padding: clamp(56px, 9vw, 120px) 0 clamp(44px, 6vw, 80px); }
.auftakt h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1; max-width: 15ch; }
.auftakt .vorspann { max-width: 34em; color: var(--text); }
.auftakt .knoepfe .knopf { background: transparent; }
.auftakt .knoepfe .knopf.voll { background: var(--rost); }

/* Leiste: auf Papier ohne Lichthof, Zahl kleiner als auf der Startseite */
.angebot .leiste b { font-size: clamp(22px, 2vw, 27px); }

/* Abschnitte: Fließtext und Listen */
.text-spalte { max-width: 36em; }
.text-spalte p { margin-top: 16px; color: var(--leise); text-wrap: pretty; }
.text-spalte p:first-child { margin-top: 0; }
.text-spalte p b, .text-spalte li b { font-weight: 500; color: var(--text); }
.punkte { list-style: none; margin-top: 22px; border-top: 1px solid var(--linie); }
.punkte li { position: relative; padding: .7em 0 .7em 20px; border-bottom: 1px solid var(--linie); font-size: 16px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.punkte li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 8px; height: 1px; background: var(--rost); }
.punkte li span { display: block; margin-top: 2px; font-size: 15px; color: var(--leise); }

/* Preis: steht unten im Ablauf, nicht in der Leiste */
.preis { margin-top: 26px; padding-left: 16px; border-left: 2px solid var(--rost); max-width: 32em; }
.preis b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; color: var(--text); }
.preis span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--leise); }

/* Arbeitsprobe: Seite 1 als Bild, daneben was man darin findet */
.probe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; margin-top: 44px; }
.probe figure { margin: 0; }
.probe .blatt { display: block; border: 1px solid var(--linie); background: #fff; box-shadow: 0 1px 0 rgba(31, 38, 33, .04), 0 18px 40px -24px rgba(31, 38, 33, .28); transition: box-shadow .25s; }
.probe .blatt:hover { box-shadow: 0 1px 0 rgba(31, 38, 33, .06), 0 22px 48px -22px rgba(31, 38, 33, .36); }
.probe .blatt img { width: 100%; height: auto; }
.probe figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--leise); }
.probe .text-spalte h3 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; }
.probe .datei { display: inline-block; margin-top: 22px; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--rost); padding-bottom: 1px; }
.probe .datei small { color: var(--leise); font-size: 13px; }
@media (max-width: 820px) { .probe { grid-template-columns: 1fr; } .probe figure { max-width: 420px; } }

/* Grenzen der Arbeit, leise gesetzt */
.grenze { margin-top: 26px; max-width: 36em; font-size: 14px; line-height: 1.55; color: var(--leise); }

/* Schluss mit Mailadresse */
.schluss .post { margin-top: 18px; }
.schluss .lead { margin-top: 18px; }

/* Titelbild in der Hero (10.11.2026, nach Sebastian): Seite 1 der Probe als Ausschnitt, wie die Portfolio-Titelbilder */
.auftakt-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px clamp(40px, 5vw, 80px); align-items: center; }
.titelbild { margin: 0; }
.titelbild a { display: block; border: 1px solid var(--linie); background: #fff; box-shadow: 0 1px 0 rgba(31, 38, 33, .04), 0 24px 50px -26px rgba(31, 38, 33, .32); transition: box-shadow .25s; }
.titelbild a:hover { box-shadow: 0 1px 0 rgba(31, 38, 33, .06), 0 28px 56px -24px rgba(31, 38, 33, .4); }
.titelbild img { width: 100%; height: auto; }
@media (max-width: 900px) { .auftakt-raster { grid-template-columns: 1fr; } .titelbild { max-width: 560px; } }