/* Dokumentseiten (Rechtstexte, Kontakt): helles Papier unter der dunklen Nav, lange Texte gut lesbar. */

body.doc-page { padding-top: 120px; }
.doc { width: min(760px, 100vw - 2 * var(--gutter)); margin: 0 auto; padding: 0 0 var(--sp); }
.doc .back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 36px; font: 600 13px/1 var(--font-sans); letter-spacing: .04em; color: var(--t-fg-3); transition: color .3s; }
.doc .back:hover { color: var(--t-fg); }
.doc h1 { font-size: clamp(40px, 6vw, 72px); margin-bottom: 14px; }
.doc .meta { font: 600 12px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--t-fg-3); margin: 0 0 36px; }
.doc .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--t-fg-2); margin: 0 0 12px; }
.doc p, .doc li { color: var(--t-fg-2); font-size: 16.5px; line-height: 1.65; }
.doc p { margin: 0 0 12px; }
.doc a:not(.back):not(.btn) { color: var(--ember-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc a:not(.back):not(.btn):hover { color: var(--t-fg); }
.doc .pre { white-space: pre-line; }
.doc ul, .doc ol { margin: 0 0 12px; padding-left: 22px; }
.doc li { margin: 0 0 6px; }
.doc strong, .doc b { color: var(--t-fg); }

.doc-section { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--t-line); }
.doc-section h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 14px; font-variation-settings: "opsz" 48, "SOFT" 40; }
.doc-section h2 .num { font: 700 12px/1 var(--font-sans); letter-spacing: .12em; color: var(--ember); flex: none; }
.doc-section h3 { font-size: 20px; margin: 18px 0 8px; font-variation-settings: "opsz" 36, "SOFT" 40; }
.doc-card { padding: 22px 24px; border-radius: 18px; background: var(--t-card); box-shadow: 0 20px 40px -30px var(--t-shadow), 0 0 0 1px var(--t-card-border); margin: 16px 0; }

/* Formular */
.form { margin-top: 28px; display: flex; flex-direction: column; gap: 22px; }
.form .field { display: flex; flex-direction: column; gap: 8px; }
.form label, .form .form-legend { font: 700 13px/1.3 var(--font-sans); letter-spacing: .02em; color: var(--t-fg); }
.form label .opt { color: var(--t-fg-3); font-weight: 500; }
.form input[type=text], .form input[type=email], .form textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--t-line); background: var(--t-card); color: var(--t-fg);
  font: 500 16px/1.4 var(--font-sans);
  transition: border-color .3s, box-shadow .3s;
}
.form textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 4px rgba(232,101,95,.14); }
.form .seg { display: flex; gap: 10px; flex-wrap: wrap; }
.form .seg label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--t-line); background: var(--t-card); font-weight: 600; cursor: pointer; transition: border-color .3s, background-color .3s; }
.form .seg label:has(input:checked) { border-color: var(--ember); background: rgba(232,101,95,.1); }
.form .seg input { accent-color: var(--ember); margin: 0; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form .actions .btn { border: 0; font-family: var(--font-sans); }
.form-note { color: var(--t-fg-3); font: 500 14px/1.3 var(--font-sans); }
.form-alert { border-radius: 14px; padding: 14px 16px; font: 500 15px/1.45 var(--font-sans); }
.form-alert.err { background: rgba(232,101,95,.1); border: 1px solid rgba(232,101,95,.3); color: var(--ember-deep); }
.form-ok { margin-top: 24px; padding: 28px; border-radius: 22px; background: var(--t-card); box-shadow: 0 20px 40px -30px var(--t-shadow), 0 0 0 1px var(--t-card-border); }
.form-ok h2 { font-size: 28px; margin-bottom: 8px; }

@media (max-width: 899px) {
  body.doc-page { padding-top: 96px; }
  .doc-section h2 { flex-direction: column; gap: 8px; }
}

/* Formular-Button im Marken-Look (Klasse aus dem Live-Formular) */
.doc .btn-brand { background: linear-gradient(120deg, #D9524D, var(--ember-deep)); color: #fff; box-shadow: 0 16px 40px -14px rgba(232,101,95,.8); cursor: pointer; }
.doc .btn-brand:hover { box-shadow: 0 22px 50px -14px rgba(232,101,95,.95); }