/* Unterseiten (Rechtliches, Kontakt) im Design der Startseite. Baut auf main.css auf. */
.page { padding: 168px 0 112px; }
.page-head { max-width: 820px; }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); letter-spacing: -0.035em; line-height: 1.04; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.page-head .lead { margin-top: 24px; }
.page-meta { margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); }

.prose { max-width: 740px; margin-top: 64px; }
.prose h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 2.1vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.2; color: var(--text); margin: 56px 0 16px; padding-top: 40px; border-top: 1px solid var(--line); }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-family: var(--display); font-weight: 500; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--text); margin: 32px 0 10px; }
.prose p, .prose li { color: var(--mute); font-size: 16px; line-height: 1.75; }
.prose p + p { margin-top: 14px; }
.prose strong, .prose b { color: var(--text); font-weight: 600; }
.prose a { color: var(--mint-2); text-decoration: underline; text-decoration-color: rgba(138, 245, 195, .35); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--mint-2); }
.prose ul { list-style: disc; padding-left: 1.2em; margin: 12px 0; }
.prose ol { list-style: decimal; padding-left: 1.3em; margin: 12px 0; }
.prose li { margin: 8px 0; padding-left: 4px; }
.prose li::marker { color: var(--mint-3); }
.prose .note { margin: 24px 0; padding: 18px 22px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-2); color: var(--mute); }
.prose .note strong { color: var(--mint); }

.address { display: grid; gap: 4px; margin-top: 8px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); max-width: 420px; }
.address span { color: var(--text); }
.address .muted { color: var(--mute); }

/* Kontakt */
.contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; margin-top: 64px; align-items: start; }
.cform { padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg-2); }
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 14px; color: var(--text); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 14px; padding: 14px 16px; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%238C9C94' stroke-width='1.6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field input::placeholder, .field textarea::placeholder { color: var(--mute-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--mint-2); box-shadow: 0 0 0 4px rgba(194, 255, 225, .1); }
.field .err { display: none; font-size: 13.5px; color: var(--red); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.field.has-error .err { display: block; }
.cform .hint { font-size: 13.5px; color: var(--mute); margin-top: 14px; line-height: 1.6; }
.cform .hint a { color: var(--mint-2); }
.done { display: none; padding: 36px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg-2); }
.done.show { display: block; }
.done h2 { font-family: var(--display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; }
.done p { color: var(--mute); margin-top: 12px; }
.done a { color: var(--mint-2); }
.direct { display: grid; gap: 28px; }
.direct h2 { font-family: var(--display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; }
.direct dl { display: grid; gap: 16px; margin-top: 16px; }
.direct dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); }
.direct dd { margin-top: 4px; }
.direct dd a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.direct dd a:hover { border-color: var(--mint-2); }
.direct p { color: var(--mute); font-size: 15px; }

@media (max-width: 860px) {
  .page { padding: 132px 0 88px; }
  .page-head h1 { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .cform, .done { padding: 24px; }
  .prose { margin-top: 48px; }
}