/* Contact form: fields for name and how to reach the visitor. */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.field-full{grid-column:1/-1}
.field input,.field textarea{font:inherit;font-weight:400;font-size:16px;line-height:1.4;padding:12px;border:1px solid #ccd2cf;border-radius:3px;background:#fff;color:var(--ink);width:100%}
.field textarea{min-height:96px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid #9a741e;outline-offset:2px}
.field small{font-weight:400;color:var(--muted);font-size:13px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-note{font-size:13px;color:var(--muted);margin:0 0 18px}
.form-note a,.result-block a:not(.button){border-bottom:1px solid currentColor}
.button[aria-busy="true"]{opacity:.7;cursor:progress}
.result-block h3{margin:18px 0 8px}
@media(max-width:760px){.field-grid{grid-template-columns:1fr}}

/* WhatsApp as a third direct contact channel, styled like the email link. */
.contact-details>.whatsapp-link{font-size:19px;letter-spacing:0;border-bottom:1px solid #617981;margin-top:10px}
.personal-note a[href^="https://wa.me"]{border-bottom:1px solid currentColor}
@media(max-width:1000px){.contact-details>.whatsapp-link{font-size:16px}}
@media(max-width:760px){.contact-details>.whatsapp-link{font-size:18px}}

/* Online booking: hidden until a Bookings URL is set in app.js. */
.contact-actions{display:flex;flex-wrap:wrap;gap:14px}
.button-outline{background:transparent;border-color:#8fa5ad;color:#fff}
.button-outline:hover{background:#ffffff14}
.booking-inline{border-bottom:1px solid currentColor}
@media(max-width:760px){.contact-actions .button{width:100%}}

/* Claims: what to do when damage has happened. */
.claim{display:grid;grid-template-columns:.9fr 1.1fr;gap:9%;align-items:start;border-top:1px solid var(--line)}
.claim h2 em{font-family:var(--serif);font-weight:400;color:#86682e}
.claim-intro>p:not(.eyebrow){color:var(--muted);font-size:16px;line-height:1.8;margin:22px 0 26px;max-width:440px}
.claim-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.claim-steps article{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}
.claim-steps article:first-child{padding-top:0}
.claim-steps article>span{font-family:var(--serif);font-size:24px;color:#86682e;margin-top:2px}
.claim-steps h3{font-size:20px;margin:0 0 8px}
.claim-steps p{font-size:15px;line-height:1.75;color:var(--muted);margin:0}
.claim-steps .claim-note{font-size:14px;background:var(--sand);border-left:2px solid var(--gold);padding:14px 16px;margin:22px 0 0}
@media(max-width:760px){.claim{grid-template-columns:1fr;gap:36px}.claim-actions .button{width:100%}}

/* Customer app teaser for existing clients. */
.app-teaser{display:grid;grid-template-columns:.9fr 1.1fr;gap:9%;align-items:center;border-top:1px solid var(--line)}
.app-teaser h2 em{font-family:var(--serif);font-weight:400;color:#86682e}
.app-copy>p:first-child{color:var(--muted);font-size:16px;line-height:1.8;margin:0 0 24px;max-width:520px}
.app-note{font-size:13px;color:var(--muted);margin:16px 0 0;max-width:520px}
@media(max-width:760px){.app-teaser{grid-template-columns:1fr;gap:24px}.app-copy .button{width:100%}}

/* Legal pages: Impressum, Erstinformation, Datenschutz. */
.legal{max-width:800px;margin:0 auto;padding:70px 7% 90px}
.legal h1{font-family:var(--sans);font-weight:500;font-size:clamp(34px,4vw,52px);letter-spacing:-1.5px;line-height:1.15;margin:0 0 14px}
.legal .lead{color:var(--muted);font-size:17px;margin:0 0 30px}
.legal h2{font-size:24px;letter-spacing:-.5px;margin:44px 0 12px;padding-top:30px;border-top:1px solid var(--line)}
.legal h3{font-size:18px;letter-spacing:0;margin:26px 0 6px}
.legal p,.legal li{color:var(--muted);font-size:16px;line-height:1.75}
.legal strong{color:var(--ink)}
.legal a{border-bottom:1px solid currentColor;overflow-wrap:anywhere}
.legal ul{padding-left:20px}
.legal .stand{font-size:14px;margin-top:50px}
mark.todo{background:#fff1b8;color:#5a4300;padding:1px 5px;border-radius:2px}
.legal-page .header .text-link{white-space:nowrap}
@media(max-width:760px){.legal{padding:45px 7% 60px}.legal-page .header{display:flex;flex-wrap:wrap;gap:12px}}
/* „Ruf mich an“-Kästchen: nicht über dem Gesicht. Desktop weiter links außen, Handy unter dem Foto. */
@media(min-width:1001px){.personal-note{left:-130px;bottom:170px}}
@media(max-width:760px){.personal-note{position:relative;left:auto;bottom:auto;margin:-26px 18px 0;justify-content:center;text-align:center}}