/* Hallmark · shape: kept layout (contact page, two legal long documents) · genre: editorial · theme: brand (locked in DESIGN.md) · redesign: restyle · job: hire, the booking and the enquiry form on /anfrage
 * paper: oklch(95.6% 0.006 62) · accent: oklch(64.4% 0.192 41.7) · display: Plus Jakarta Sans 800 · body: Plus Jakarta Sans 400 · hero: Settled (/anfrage, /impressum, /datenschutz) · nav: edge-aligned bar, the four real pages, the phone and one quiet action, as on index.html · footer: index columns, the local landing pages are a real sitemap, as on index.html
 * copy: verbatim on /impressum and /datenschutz (legal text, only markup and styling changed); /anfrage copy changed only where a Floor gate named it, each line below
 * axes: light/grotesk-heavy/chromatic-orange · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: V, a restyle keeps three layouts it did not choose; the icon tiles, chip pills and stacked cards went so the form and the legal prose carry the page */
/* Hallmark · dropped the eyebrow "Kostenlose Erstberatung" over the /anfrage h1 · 54 names it, and "Kostenlos, ohne Vertrag" stands in the facts right below */
/* Hallmark · dropped the eyebrow "Rechtliches" over the h1 on /impressum and /datenschutz · 54 names it; the h1 already says what the page is */
/* Hallmark · waive 49b · five table-of-contents links on /datenschutz wrap to two lines at 320px · each is a section title of the Datenschutzerklärung, legal wording that cannot be shortened, and none passes two lines */
/* Hallmark · waive 78 · the h2s on /impressum and /datenschutz render at 25px, numbered clauses of a Long Document · fifteen Datenschutz clauses at 52px would make the legal text a poster; the clause titles read as annotation over the prose */
/* Hallmark · waive 59 · the 65 to 81px gap on the legal pages sits between the h1 block and its own text, parted by an ink hairline · the legal-hero section exists only so the h1 block is measured alone at 1920; header and clauses are one document */
/* Hallmark · reworded "Kalender laden →" to "Kalender laden" and "Anfrage senden →" to "Anfrage senden" · 63 names the glued arrow */
/* Hallmark · reworded "Sundern im Sauerland · Einsatz in ganz NRW" to "Sundern im Sauerland, Einsatz in ganz NRW" · 63 names the middle dot */
/* Hallmark · reworded every en dash in the /anfrage copy, its select option and placeholder, and in the three titles, descriptions and og lines to a comma, colon or full stop · 19 names the dash */
/* Hallmark · reworded the visible field labels and the two form group labels from tracked capitals to sentence case by CSS only · 67 names the tracked-caps label; the words are unchanged */
@import url("./site.css");


/* ---------- Pfadnavigation ---------- */
.breadcrumbs.container { padding-top: var(--space-lg); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-muted); }
.breadcrumbs a { color: var(--color-ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.breadcrumbs [aria-current] { color: var(--color-ink); }


/* ---------- Anfrage: Termin ---------- */
main > .anfrage-section { padding-block: var(--space-2xl) var(--section-gap-s); }
.termin-head { max-width: 62rem; }
.termin-head h1 { max-width: 18ch; font-size: var(--text-display-s); line-height: 1.04; }
.termin-head > p { margin-top: var(--space-lg); max-width: 62ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.termin-head > p a, .anfrage-info a:not(.contact-card), .form-note a, .cal-consent a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.termin-head > p a:hover, .form-note a:hover, .cal-consent a:hover { text-decoration-color: var(--color-ink); }
.termin-facts { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-lg) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink); }
.termin-facts li, .trust-chip { display: flex; align-items: center; gap: var(--space-xs); }
.termin-facts svg, .trust-chip svg { flex-shrink: 0; color: var(--color-ink); }
#termin .cal-box { max-width: 62rem; margin-top: var(--space-xl); }
#termin .cal-consent p:not(.cal-consent-t) { max-width: 62ch; }


/* ---------- Anfrage: Formularblock ---------- */
main > #formular { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-top: 1px solid var(--color-rule); }
.anfrage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.anfrage-info h2 { font-size: var(--text-section); max-width: 14ch; }
.anfrage-info > p { margin-top: var(--space-lg); max-width: 48ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }

.contact-cards { display: grid; margin-top: var(--space-xl); border-top: 1px solid var(--color-ink); }
.contact-card { display: flex; align-items: center; gap: var(--space-md); min-height: 64px; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-ink); text-decoration: none; }
.cc-icon { display: grid; place-items: center; flex-shrink: 0; color: var(--color-ink-2); }
.cc-text { display: grid; gap: var(--space-3xs); min-width: 0; }
.cc-label { font-size: var(--text-sm); color: var(--color-ink-2); }
.cc-val { font-weight: 800; }
.cc-nobr { white-space: nowrap; }
a.contact-card .cc-val { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
a.contact-card:hover .cc-val { text-decoration-color: var(--color-accent); }
a.contact-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.contact-card--static { cursor: default; }

.trust-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink); }

.next-steps { display: grid; gap: var(--space-lg); margin-top: var(--space-2xl); }
.ns-item { display: grid; grid-template-columns: var(--space-xl) minmax(0, 1fr); gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.ns-num { font-size: var(--text-xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.ns-item strong { display: block; }
.ns-item p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }

.form-card { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); }
.form-card > h2 { font-size: var(--text-2xl); }
.form-sub { margin-top: var(--space-xs); color: var(--color-ink-2); }
.form-card form { margin-top: var(--space-xl); }

.hp-field { display: none; }

.form-group { min-width: 0; margin: 0 0 var(--space-lg); padding: 0; border: 0; }
.form-group legend { display: block; width: 100%; margin-bottom: var(--space-md); padding: 0 0 var(--space-xs); border-bottom: 1px solid var(--color-rule); font-size: var(--text-md); font-weight: 800; color: var(--color-ink); }

.service-select { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.service-select > :last-child { grid-column: 1 / -1; }
.svc-btn { position: relative; display: block; }
.svc-btn input[type="checkbox"] { position: absolute; top: var(--space-md); left: var(--space-md); width: 1px; height: 1px; margin: 0; opacity: 0; }
.svc-label { display: flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink); font-weight: 800; cursor: pointer; user-select: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.svc-icon { display: grid; place-items: center; flex-shrink: 0; color: var(--color-ink-2); }
.svc-btn input:checked + .svc-label { border-color: var(--color-ink); background: var(--color-paper-3); box-shadow: inset 0 0 0 1px var(--color-ink); }
.svc-btn input:checked + .svc-label .svc-icon { color: var(--color-ink); }
.svc-btn input:focus-visible + .svc-label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.svc-btn input:active + .svc-label { background: var(--color-paper-3); }
.svc-btn input:disabled + .svc-label { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) { .svc-btn:hover input:not(:checked):not(:disabled) + .svc-label { border-color: var(--color-ink-2); } }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.field { min-width: 0; margin-bottom: var(--space-sm); }
.field label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 800; line-height: 1.3; color: var(--color-ink); }
.field input, .field select, .field textarea { display: block; width: 100%; min-height: 52px; margin: 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background-color: var(--color-paper-2); color: var(--color-ink); font: 400 var(--text-md)/1.5 var(--font-body); outline: 2px solid transparent; outline-offset: -3px; appearance: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); opacity: 1; }
@media (hover: hover) { .field input:hover, .field select:hover, .field textarea:hover { background-color: var(--color-paper); } }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .field input:focus, .field select:focus, .field textarea:focus { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.field input:active, .field select:active, .field textarea:active { border-color: var(--color-ink-2); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field select { padding-right: var(--space-2xl); cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%), linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.field::after { content: ""; display: block; min-height: calc(var(--text-sm) * 1.5); margin-top: var(--space-2xs); }
.field:has(.field-hint)::after, .field:has(.field-error)::after { display: none; }
.field:has(.field-error) .field-hint { display: none; }
.field-hint, .field-error { min-height: calc(var(--text-sm) * 1.5); margin-top: var(--space-2xs); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.field-error { font-weight: 800; color: var(--color-error); }

.form-submit-row { display: flex; align-items: center; gap: var(--space-lg); margin-top: var(--space-md); }
.form-submit-row .btn { flex-shrink: 0; }
.form-note { max-width: 40ch; font-size: var(--text-sm); color: var(--color-ink-2); }

.form-success { display: none; padding-block: var(--space-xl); }
.form-success:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.success-icon { display: grid; place-items: center; width: var(--space-xl); height: var(--space-xl); color: var(--color-ink); }
.form-success h3 { margin-top: var(--space-md); font-size: var(--text-2xl); }
.form-success p { margin-top: var(--space-sm); max-width: 48ch; color: var(--color-ink-2); }


/* ---------- Rechtliches: lange Texte ---------- */
main > .legal-hero { padding-block: var(--space-2xl) 0; }
main > .legal-section { padding-block: 0 var(--section-gap-s); }
.legal-wrap { max-width: 64ch; }
.legal-header { padding-bottom: var(--space-xl); }
.legal-header h1 { max-width: none; font-size: var(--text-display-s); hyphens: auto; }
.legal-header p { margin-top: var(--space-md); font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }

.legal-toc { padding-block: var(--space-lg) var(--space-xl); border-top: 1px solid var(--color-ink); }
.legal-toc h2 { font-size: var(--text-md); letter-spacing: 0; line-height: 1.3; }
.legal-toc ol { margin: var(--space-md) 0 0; padding: 0 0 0 var(--space-lg); columns: 2; column-gap: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); }
.legal-toc li { padding-block: var(--space-2xs); break-inside: avoid; }
.legal-toc a { color: var(--color-ink); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }

.legal-block { padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.legal-section .legal-wrap > .legal-block:first-child { border-top-color: var(--color-ink); }
.legal-block h2 { max-width: none; font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.2; hyphens: auto; }
.legal-block h3 { margin-top: var(--space-lg); font-size: var(--text-lg); letter-spacing: -0.01em; }
.legal-block h2 + *, .legal-block h3 + * { margin-top: var(--space-sm); }
.legal-block p, .legal-block li, .legal-address { max-width: 60ch; line-height: 1.7; color: var(--color-ink); }
.legal-block p + p, .legal-block ul + p, .legal-block p + ul { margin-top: var(--space-sm); }
.legal-block ul { margin-bottom: 0; padding-left: var(--space-lg); }
.legal-block li { padding-block: var(--space-3xs); }
.legal-block li::marker { color: var(--color-ink-2); }
.legal-block a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; overflow-wrap: break-word; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.legal-block a:hover { text-decoration-color: var(--color-ink); }
.legal-address { font-style: normal; }
.legal-gap { margin-top: var(--space-sm); }
.legal-stand { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }


/* ---------- Schmal ---------- */
@media (max-width: 60rem) {
  .anfrage-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .legal-toc ol { columns: 1; }
}
@media (max-width: 40rem) {
  .form-card { padding: var(--space-lg) var(--space-md); }
  .field-row, .service-select, .trust-row { grid-template-columns: minmax(0, 1fr); }
  .form-submit-row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-label, .field input, .field select, .field textarea, .contact-card .cc-val, .legal-block a, .termin-head > p a, .form-note a, .cal-consent a { transition: none; }
}