/* ==========================================================================
   Kontaktseite · Redesign im Designsystem der fertigen Seiten
   Geladen nach contact-page.css. Variablen, Navigation und Footer wie sub-master.css.
   ========================================================================== */
.contact-page{--ink:#16233a;--muted:#3a4a5f;--blue-text:#0660b5;--btn:#0668c9;--sky:#8fd7f5;--soft:#eef5fb;--line:#d3e0ec;
 --gx:var(--heading-gradient-light);--gx-dark:var(--heading-gradient-dark);
 --ease-soft:cubic-bezier(.32,.72,0,1);--wrap:min(var(--page-max,1548px),calc(100% - 48px));color:var(--ink)}
/* ---- Navigation, größer (wie Startseite) ---- */
@media(min-width:1191px){
 body:has(.contact-page) .global-nav{font-size:clamp(14px,1.1vw,16.5px);font-weight:600;letter-spacing:.004em;gap:clamp(15px,1.5vw,34px)}
 body:has(.contact-page) .global-nav>a{color:#16233a;padding-block:18px}
 body:has(.contact-page) .global-nav>a:hover{color:#0660b5}
 body:has(.contact-page) .global-nav>a[aria-current]{color:#0660b5;font-weight:700}
 body:has(.contact-page) .global-nav>a[aria-current]::after{background:#0660b5;bottom:7px}
 body:has(.contact-page) .global-contact strong{font-size:18px;color:#0660b5}
 body:has(.contact-page) .global-contact small{font-size:10px;color:#3a4a5f}
}

/* ---- Footer: Textfarben mit Mindestkontrast (hell, wie Startseite) ---- */
body:has(.contact-page) .global-footer-brand p,body:has(.contact-page) .global-footer-hours dl,body:has(.contact-page) .global-footer-contact .footer-phone-row span,body:has(.contact-page) .global-footer-bottom{color:#3a4a5f}
body:has(.contact-page) .global-footer-contact>a:not(.global-footer-phone),body:has(.contact-page) .global-footer-bottom a{color:#16233a}
body:has(.contact-page) .global-footer-contact .footer-phone-row a,body:has(.contact-page) .footer-credit-brand{color:#0660b5}
body:has(.contact-page) .global-footer{background:#f4f8fc}


.contact-page .gx{background:var(--gx);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.contact-page h1,.contact-page h2{font-family:'Manrope',Arial,sans-serif;font-weight:750;letter-spacing:-.045em;color:var(--ink);text-wrap:balance;margin:0;background:none;-webkit-text-fill-color:currentColor}
.contact-page .contact-eyebrow{display:block;margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-text)}

/* ---- Hero ---- */
.contact-page .contact-hero{background:linear-gradient(180deg,#fff 0,#f7fbfe 100%);border-bottom:0}
.contact-page .contact-hero-inner{width:var(--wrap);margin-inline:auto;padding:clamp(40px,3.6vw,56px) 0 clamp(36px,3.4vw,56px)}
.contact-page .contact-hero-inner:after{content:none;display:none}
.contact-page .contact-hero .contact-eyebrow{display:inline-flex;margin:0 0 18px;padding:7px 14px;border-radius:999px;background:rgba(8,127,229,.08);box-shadow:inset 0 0 0 1px rgba(8,127,229,.16);font-size:11px;letter-spacing:.16em}
.contact-page .contact-hero h1{font-size:clamp(40px,4.2vw,66px);line-height:1;padding-bottom:.18em;margin:0 0 6px;max-width:16em;background:none}
.contact-page .contact-hero-sub{margin:0;max-width:34em;font-size:18px;line-height:1.6;color:var(--muted)}

/* ---- Kontaktfläche: Navy mit großer heller Box, links Wege, rechts Formular ---- */
.contact-page .contact-stage{padding:calc(clamp(56px,5.6vw,88px) * .8) 0;background:radial-gradient(640px 360px at 10% 50%,rgba(8,127,229,.22),transparent 70%),radial-gradient(520px 320px at 96% 40%,rgba(79,180,242,.12),transparent 70%),linear-gradient(180deg,#1c293c 0,#13203a 100%)}
.contact-page .contact-stage-inner{--r:10px;position:relative;isolation:isolate;width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1fr;gap:34px;padding:clamp(30px,3.6vw,56px) clamp(22px,3.6vw,60px);border-radius:var(--r);
 background:linear-gradient(150deg,#fff 0%,#f4f9fe 55%,#e9f3fc 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 40px 70px -36px rgba(0,0,0,.65)}
.contact-page .contact-stage-inner:before{content:'';position:absolute;z-index:-1;inset:-10px -10px 10px 10px;padding:1.5px;border-radius:var(--r);background:linear-gradient(135deg,#8fd7f5,#087fe5 60%,#1c6fd0);opacity:.7;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.contact-page .contact-lead{padding:0}
.contact-page .contact-lead-title{font-size:clamp(28px,2.8vw,40px);line-height:1.08;padding-bottom:.1em;background:none}
.contact-page .contact-ways{margin-top:clamp(22px,2.4vw,34px);max-width:none}
.contact-page .contact-primary{padding-bottom:22px}
.contact-page .contact-kicker{color:var(--muted);font-size:12px;letter-spacing:.14em}
.contact-page .contact-phone{font-size:clamp(34px,3.2vw,46px);color:var(--blue-text);padding:2px 0}
.contact-page .contact-whatsapp-link{margin-top:16px;min-height:60px;padding:8px 8px 8px 22px;border-radius:999px;background:#167a45;box-shadow:0 18px 30px -18px rgba(22,122,69,.8);gap:12px;transition:background-color .3s var(--ease-soft),transform .3s var(--ease-soft)}
.contact-page .contact-whatsapp-link:hover,.contact-page .contact-whatsapp-link:focus-visible{background:#126a3b}
.contact-page .contact-whatsapp-link:active{transform:scale(.98)}
.contact-page .contact-whatsapp-link small{font-size:11px;letter-spacing:.14em}
.contact-page .contact-whatsapp-link strong{font-size:16px}
.contact-page .contact-whatsapp-link b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);font-size:17px}
.contact-page .contact-facts div{border-top:1px solid rgba(8,127,229,.2);padding:16px 0;grid-template-columns:96px minmax(0,1fr)}
.contact-page .contact-facts dt{color:var(--muted);font-size:12px}
.contact-page .contact-facts dd{font-size:18px}
.contact-page .contact-facts a{color:var(--ink);font-weight:650;text-decoration-color:#8fc4ee}
.contact-page .contact-facts a:hover{color:var(--blue-text)}

/* ---- Formular ---- */
.contact-page .contact-form-wrap{padding:0;position:relative}
.contact-page .contact-form-title{margin:0 0 20px;font:750 clamp(26px,2.4vw,34px)/1.1 'Manrope',Arial,sans-serif;letter-spacing:-.04em;text-transform:none;color:var(--ink)}
.contact-page .contact-form-title:after{content:none;display:none}
.contact-page .contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
.contact-page .contact-field-wide,.contact-page .contact-consent,.contact-page .contact-actions,.contact-page .contact-status{grid-column:1 / -1}
.contact-page .contact-field label{display:block;margin-bottom:8px;font-size:16px;font-weight:700;color:var(--ink)}
.contact-page .contact-field label span{color:#0660b5}
.contact-page .contact-field input,.contact-page .contact-field select,.contact-page .contact-field textarea{box-sizing:border-box;width:100%;min-height:58px;padding:15px 18px;border:0;border-radius:10px;background:#fff;color:var(--ink);font:500 17px/1.4 'DM Sans',Arial,sans-serif;box-shadow:inset 0 0 0 1.5px #b9cde0;transition:box-shadow .3s var(--ease-soft),background-color .3s var(--ease-soft)}
.contact-page .contact-field textarea{min-height:140px;height:140px;resize:vertical}
.contact-page .contact-field input::placeholder,.contact-page .contact-field textarea::placeholder{color:#5c6c80}
.contact-page .contact-field input:hover,.contact-page .contact-field select:hover,.contact-page .contact-field textarea:hover{box-shadow:inset 0 0 0 1.5px #7fa6cc}
.contact-page .contact-field input:focus,.contact-page .contact-field select:focus,.contact-page .contact-field textarea:focus{outline:0;box-shadow:inset 0 0 0 2px #087fe5,0 0 0 4px rgba(8,127,229,.18)}
.contact-page .contact-field select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230660b5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/20px;padding-right:46px}
.contact-page .contact-field select:invalid{color:#5c6c80}
.contact-page .contact-field[data-invalid] input,.contact-page .contact-field[data-invalid] select,.contact-page .contact-field[data-invalid] textarea{box-shadow:inset 0 0 0 2px #c0392b}
.contact-page .contact-error{margin:8px 0 0;font-size:15px;line-height:1.4;font-weight:600;color:#a32b1f}
.contact-page .contact-error[hidden]{display:none}
.contact-page .contact-consent{display:flex;gap:14px;align-items:flex-start;color:var(--muted);font-size:15.5px;line-height:1.55}
.contact-page .contact-consent input{flex:none;appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:1px 0 0;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px #7fa6cc;cursor:pointer;display:grid;place-items:center;transition:background-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft)}
.contact-page .contact-consent input:checked{background:#0668c9;box-shadow:inset 0 0 0 1.5px #0668c9}
.contact-page .contact-consent input:checked:after{content:'';width:6px;height:11px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.contact-page .contact-consent input:focus-visible{outline:2px solid #087fe5;outline-offset:3px}
.contact-page .contact-consent[data-invalid] input{box-shadow:inset 0 0 0 2px #c0392b}
.contact-page .contact-consent a{color:var(--blue-text);font-weight:650;text-decoration:underline;text-underline-offset:3px}
/* Absenden: Strichmännchen links, zeigt auf den Button */
.contact-page .contact-actions{display:flex;justify-content:flex-end;margin-top:4px}
.contact-page .contact-submit{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:1 1 auto;max-width:340px;min-height:62px;padding:8px 8px 8px 28px;border:0;border-radius:999px;background:var(--btn);color:#fff;font:700 16px/1 'DM Sans',Arial,sans-serif;cursor:pointer;box-shadow:0 18px 32px -18px rgba(8,127,229,.8);transition:background-color .3s var(--ease-soft),transform .3s var(--ease-soft)}
.contact-page .contact-submit b{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);font-size:18px;font-weight:400;transition:transform .4s var(--ease-soft)}
.contact-page .contact-submit:hover,.contact-page .contact-submit:focus-visible{background:#0557a8}
.contact-page .contact-submit:hover b,.contact-page .contact-submit:focus-visible b{transform:translate(3px,-1px) scale(1.06)}
.contact-page .contact-submit:active{transform:scale(.98)}
.contact-page .contact-submit:focus-visible{outline:2px solid #087fe5;outline-offset:3px}
.contact-page .contact-submit:disabled{opacity:.7;cursor:wait}
.contact-page .contact-status{margin:0;padding:14px 16px;border-radius:10px;font-size:16px;line-height:1.5;font-weight:600}
.contact-page .contact-status.success{background:#e5f4ec;color:#145a37;box-shadow:inset 0 0 0 1px #b9e0cb}
.contact-page .contact-status.error{background:#fdf0ee;color:#8a2a20;box-shadow:inset 0 0 0 1px #f0c6c1}
@media(min-width:1101px){
 .contact-page .contact-stage-inner{grid-template-columns:minmax(0,.4fr) 1px minmax(0,.6fr);column-gap:clamp(36px,5vw,84px);align-items:start}
 .contact-page .contact-stage-inner:after{content:'';grid-column:2;grid-row:1;align-self:stretch;width:1px;background:linear-gradient(180deg,#1c293c,#087fe5 60%,rgba(8,127,229,0))}
 .contact-page .contact-lead{grid-column:1;grid-row:1}
 .contact-page .contact-form-wrap{grid-column:3;grid-row:1}
}
@media(max-width:640px){
 .contact-page .contact-form{grid-template-columns:1fr}
 .contact-page .contact-actions{justify-content:stretch}
 .contact-page .contact-submit{max-width:none}
}
@media(max-width:800px){
 .contact-page{--wrap:calc(100% - 40px)}
 .contact-page .contact-hero-inner{padding:28px 0 24px}
 .contact-page .contact-hero h1{font-size:clamp(36px,5vw,46px);line-height:1.06}
 .contact-page .contact-stage{padding-block:32px}
 .contact-page .contact-stage-inner{gap:26px}
 .contact-page .contact-form{gap:16px 14px}
}
@media(max-width:640px){.contact-page .contact-field textarea{height:124px;min-height:124px}}

/* ---- Standort: bewusster Abschluss ---- */
.contact-page .contact-place{background:linear-gradient(180deg,#eaf2fa 0,#f3f8fd 100%);border-top:0}
.contact-page .contact-place-inner{width:var(--wrap);margin-inline:auto;display:grid;gap:30px;align-items:center;padding:clamp(48px,5vw,80px) 0}
.contact-page .contact-place h2{font-size:clamp(32px,3.6vw,50px);line-height:1.06;padding-bottom:.08em;margin:0 0 20px;background:none}
.contact-page .contact-place address{margin:0 0 6px;font-style:normal;font-size:20px;line-height:1.5;font-weight:600;color:var(--ink)}
.contact-page .contact-route{display:inline-flex;align-items:center;gap:14px;margin-top:20px;padding:8px 8px 8px 24px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #0668c9;color:#0660b5;font-weight:700;font-size:16px;min-width:0;transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft)}
.contact-page .contact-route b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#0668c9;color:#fff;font-size:17px;font-weight:400}
.contact-page .contact-route:hover,.contact-page .contact-route:focus-visible{background:#0668c9;color:#fff}
.contact-page .contact-route:hover b{background:rgba(255,255,255,.18)}
.contact-page .contact-route-note{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.contact-page .contact-route-art{display:block;width:100%;max-width:680px;height:auto;justify-self:end;overflow:visible}
@media(max-width:800px){.contact-page .contact-place-inner{padding-block:36px}}
.contact-page .route-label{font:700 12px 'DM Sans',Arial,sans-serif;letter-spacing:.14em;fill:#3a4a5f;text-transform:uppercase}
@media(min-width:1101px){.contact-page .contact-place-inner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(40px,6vw,104px)}}
.contact-page .contact-whatsapp-link b{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.contact-page .contact-stage-inner:before{width:auto;height:auto;left:auto;top:auto;right:auto;bottom:auto;inset:-10px -10px 10px 10px}
body:has(.contact-page) .global-contact strong{color:#0660b5}
body:has(.contact-page) .global-contact small{color:#3a4a5f}
.contact-page .contact-place h2 .gx{background:var(--gx);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Les Kontakttexts steht auf einer hellen Karte: bewusst schwarzer Verlauf. */
.contact-page .contact-stage .contact-stage-inner .contact-lead-title{background-image:linear-gradient(90deg,#000 0%,#111 42%,#111 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
.contact-page .contact-stage .contact-stage-inner .contact-lead-title .gx{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:transparent!important;color:transparent!important}