.offering-page .slide {
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: 7rem;
    padding-bottom: 3rem;
}

.offering-shell {
    position: relative;
    z-index: 1;
    width: min(920px, 100%);
    margin-inline: auto;
}

.offering-hero {
    /* 720px liess der laengsten Titelzeile nur 7% Reserve; schon leichter
       Browser-Zoom erzwang eine vierte Zeile. */
    max-width: 860px;
    margin-bottom: 2.5rem;
    text-align: left;
}

.offering-kicker {
    margin-bottom: 0.55rem;
    color: var(--red);
    font: 700 0.72rem/1.4 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.offering-page .offering-title {
    max-width: none;
    margin: 0 0 0.85rem;
    color: var(--ink);
    font: 900 clamp(2.6rem, 5vw, 4.4rem)/0.98 var(--font-display);
    letter-spacing: -0.035em;
    text-align: left;
}

/* Die Überschrift trägt drei Angebote und soll auch als drei Zeilen lesbar sein.
   Blockende <span> statt <br>: auf schmalen Viewports werden sie wieder inline,
   damit der Text normal umbrechen kann statt in drei enge Spalten zu zerfallen. */
.offering-page .offering-title span {
    display: block;
    /* Jede Angebotszeile bleibt eine Zeile. Ohne das bricht die laengste
       ("und Zweitmeinungen") bei Zoom in sich selbst um und der Titel
       laeuft auf vier Zeilen. */
    white-space: nowrap;
}

@media (max-width: 600px) {
    .offering-page .offering-title span { display: inline; white-space: normal; }
}

.offering-intro {
    max-width: 650px;
    margin: 0;
    color: #514a53;
    font: 400 1.08rem/1.6 var(--font);
}

/* Answer box — the extractable one-paragraph summary of the whole page. */
.offering-answer {
    max-width: 780px;
    margin: 0 0 2.2rem;
    padding: 0.95rem 1.2rem;
    border-left: 3px solid var(--red);
    background: rgba(26, 26, 26, 0.035);
    color: #514a53;
    font: 400 0.94rem/1.6 var(--font);
}

.offering-answer strong { color: var(--ink); }

.offering-grid {
    display: grid;
    border-top: 2px solid var(--ink);
}

.offering-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 2.4rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid rgba(26, 26, 26, 0.24);
}

.offering-label {
    margin-bottom: 0.55rem;
    color: var(--red);
    font: 700 0.68rem/1.4 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.offering-card h2 {
    max-width: none;
    margin: 0 0 0.65rem;
    color: var(--ink);
    font: 800 1.8rem/1.1 var(--font-display);
    text-align: left;
}

.offering-summary {
    max-width: 560px;
    color: #514a53;
    font: 400 0.98rem/1.58 var(--font);
}

.offering-summary strong { color: var(--ink); }

.offering-examples {
    max-width: 560px;
    margin-top: 0.9rem;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--plum);
    background: rgba(74, 42, 99, 0.055);
    color: #514a53;
    font: 400 0.82rem/1.5 var(--font);
}

.offering-examples > strong {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--ink);
}

.offering-examples ul { gap: 0.22rem; }

.offering-examples p {
    margin: 0.55rem 0 0;
    color: #6f6772;
    font-size: 0.78rem;
}

.offering-details {
    align-self: start;
    padding-left: 1.4rem;
    border-left: 3px solid var(--gold);
}

.offering-price {
    margin-bottom: 0.8rem;
    color: var(--ink);
    font: 700 0.88rem/1.4 var(--mono);
}

.offering-details-title {
    margin: 0 0 0.45rem;
    color: var(--ink);
    font: 700 0.72rem/1.4 var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Der MWST-Zusatz gehoert zum Preis, soll ihn aber nicht optisch verdraengen. */
.offering-vat {
    display: inline-block;
    margin-left: 0.15rem;
    color: #7a7280;
    font-weight: 500;
    white-space: nowrap;
}

/* Ort und Format stehen unter dem Preis, nie in derselben Zeile: der Preis samt
   MWST bleibt so als eine Aussage lesbar, auch wenn der Ort lang ist. */
.offering-where {
    display: block;
    margin-top: 0.28rem;
    color: #7a7280;
    font-weight: 500;
}

.offering-card ul {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    color: #625b65;
    font: 400 0.82rem/1.48 var(--font);
    list-style: none;
}

/* Markers are absolutely positioned, not grid columns: grid blockifies element
   children, so an inline <a> in a list item would become a third grid item and
   land in the marker column. Same reasoning as `.service-list`. */
.offering-card li {
    position: relative;
    padding-left: 1.2rem;
}

.offering-card li::before {
    position: absolute;
    left: 0;
    content: '→';
    color: var(--red);
    font-weight: 800;
}

.offering-action {
    display: inline-block;
    margin-top: 1rem;
    color: #4a2a63;
    font: 700 0.78rem/1.35 var(--mono);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.24em;
}

.offering-action:hover { color: var(--red); }

/* Always its own line — inline-block would let it ride up next to the
   primary CTA whenever the details column is wide enough. */
.offering-action.secondary {
    display: block;
    width: fit-content;
    margin-top: 0.5rem;
    color: #625b65;
    font-weight: 600;
}

/* Compact step strip inside a card — the three-beat process at a glance. */
.offering-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin: 0.85rem 0 0;
    color: #625b65;
    font: 600 0.72rem/1.4 var(--mono);
}

.offering-flow span {
    padding: 0.22rem 0.55rem;
    border: 1px solid rgba(26, 26, 26, 0.2);
    border-radius: 2px;
}

/* Honest-limits line: what a format is not, so nobody books the wrong one. */
.offering-note {
    margin: 0.85rem 0 0;
    max-width: 560px;
    color: #6f6772;
    font: 400 0.83rem/1.55 var(--font);
}

.offering-excluded {
    margin: 0.85rem 0 0;
    color: #6f6772;
    font: 400 0.79rem/1.5 var(--font);
}

.offering-excluded strong { color: var(--ink); }

.offering-risk {
    margin: 0.9rem 0 0;
    padding: 0.72rem 0.82rem;
    border: 1px solid rgba(199, 62, 29, 0.35);
    background: rgba(199, 62, 29, 0.065);
    color: #5f4b4c;
    font: 400 0.79rem/1.5 var(--font);
}

.offering-risk strong { color: var(--deep-red); }

/* 04 — what happens after the MVP. */
.offering-next {
    margin-top: 2.6rem;
    padding: 1.8rem 1.6rem;
    border: 2px solid var(--ink);
    background: rgba(212, 175, 55, 0.07);
}

.offering-page .offering-next h2,
.offering-page .offering-faq h2 {
    max-width: none;
    margin: 0 0 1.1rem;
    color: var(--ink);
    font: 800 1.8rem/1.12 var(--font-display);
    text-align: left;
}

.offering-next-body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
    gap: 2rem;
    align-items: start;
}

.offering-next-body p {
    margin: 0 0 0.75rem;
    color: #514a53;
    font: 400 0.95rem/1.62 var(--font);
}

.offering-next-body p:last-child { margin-bottom: 0; }
.offering-next-body a { color: #4a2a63; text-decoration: underline; text-underline-offset: 0.2em; }
.offering-next-body a:hover { color: var(--red); }

.offering-next-list {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding-left: 1.3rem;
    border-left: 3px solid var(--gold);
    color: #625b65;
    font: 400 0.84rem/1.5 var(--font);
    list-style: none;
}

.offering-next-list li {
    position: relative;
    padding-left: 1.2rem;
}

.offering-next-list li::before {
    position: absolute;
    left: 0;
    content: '→';
    color: var(--red);
    font-weight: 800;
}

/* FAQ */
.offering-faq { margin-top: 2.6rem; }

.offering-faq-grid {
    display: grid;
    border-top: 1px solid rgba(26, 26, 26, 0.24);
}

.offering-faq details {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(26, 26, 26, 0.24);
}

.offering-faq summary {
    color: var(--ink);
    cursor: pointer;
    font: 700 0.95rem/1.4 var(--font);
    list-style: none;
}

.offering-faq summary::-webkit-details-marker { display: none; }

.offering-faq summary::before {
    content: '+';
    display: inline-block;
    width: 1.1rem;
    color: var(--red);
    font-family: var(--mono);
    font-weight: 800;
}

.offering-faq details[open] summary::before { content: '−'; }

.offering-faq details p {
    margin: 0.55rem 0 0 1.1rem;
    color: #514a53;
    font: 400 0.9rem/1.6 var(--font);
}

.offering-faq details a { color: #4a2a63; text-decoration: underline; text-underline-offset: 0.2em; }
.offering-faq details a:hover { color: var(--red); }

.offering-bottom {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 2rem;
    align-items: end;
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: 2px solid var(--ink);
}

.offering-bottom p {
    margin: 0;
    color: #514a53;
    font: 400 0.92rem/1.55 var(--font);
}

.offering-bottom strong { color: var(--ink); }
.offering-contact { text-align: right; }
.offering-contact a { color: #4a2a63; font: 700 0.8rem/1.4 var(--mono); }

@media (max-width: 760px) {
    .offering-page .slide { padding-top: 9rem; }
    .offering-card { grid-template-columns: 1fr; gap: 1.1rem; }
    .offering-details { padding-left: 1rem; }
    .offering-next-body { grid-template-columns: 1fr; gap: 1.3rem; }
    .offering-next-list { padding-left: 1rem; }
    .offering-bottom { grid-template-columns: 1fr; gap: 1rem; }
    .offering-contact { text-align: left; }
}

@media (max-width: 560px) {
    .offering-page .slide { padding-top: calc(11.2rem + env(safe-area-inset-top, 0px)); }
    .offering-shell { width: 100%; }
    .offering-page .offering-title { font-size: 2.55rem; }
    .offering-card { padding: 1.5rem 0; }
    .offering-answer { padding: 0.85rem 1rem; }
    .offering-next { padding: 1.4rem 1.1rem; }
    .offering-page .offering-next h2,
    .offering-page .offering-faq h2 { font-size: 1.55rem; }
}