/* KXON Kontaktseite */
.topbar__current { color: #fff; font-weight: 750; }

.contact-cover { position: relative; min-height: 390px; overflow: hidden; color: #fff; background: #071426; }
.contact-cover--compact { min-height: 410px; }
.contact-cover__media { position: absolute; inset: 0; background: url('../img/hero-contact.png') center center / cover no-repeat; transform: scale(1.02); }
.contact-cover__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,15,33,.96) 0%, rgba(7,25,49,.88) 39%, rgba(7,28,56,.36) 70%, rgba(7,28,56,.08) 100%); }
.contact-cover__inner { position: relative; z-index: 2; min-height: inherit; display: flex; align-items: center; }
.contact-cover__content { width: min(700px, 62%); padding: 58px 0 64px; }
.contact-cover__content h1 { margin-bottom: 18px; font-size: clamp(42px, 5vw, 64px); line-height: 1.05; letter-spacing: -.045em; }
.contact-cover__content > p { max-width: 660px; margin-bottom: 28px; color: #dce7f9; font-size: 18px; line-height: 1.7; }
.contact-cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.contact-cover__text-link { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 750; }
.contact-cover__text-link span { transition: transform var(--transition); }
.contact-cover__text-link:hover span { transform: translateX(4px); }
.breadcrumb--cover { display: flex; align-items: center; gap: 9px; margin-bottom: 27px; color: #b9c9df; font-size: 13px; }
.breadcrumb--cover a:hover { color: #fff; }
.eyebrow--hero { color: #b9d1ff; }

.contact-routes__heading { margin-bottom: 42px; }
.contact-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.contact-route-card { position: relative; display: flex; min-height: 360px; flex-direction: column; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: 0 14px 36px rgba(16,24,40,.04); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.contact-route-card:hover { transform: translateY(-4px); border-color: #bdd0f5; box-shadow: var(--shadow-sm); }
.contact-route-card::after { content: ""; position: absolute; width: 160px; height: 160px; right: -70px; bottom: -72px; border: 26px solid rgba(21,94,239,.055); border-radius: 50%; }
.contact-route-card--featured { border-color: #b9cdf8; background: linear-gradient(180deg, #f7faff 0%, #fff 78%); }
.contact-route-card--dark { color: #fff; border-color: #12335e; background: linear-gradient(145deg, #0b1f3a, #12457c); }
.contact-route-card--dark::after { border-color: rgba(255,255,255,.07); }
.contact-route-card__icon { display: grid; width: 54px; height: 54px; margin-bottom: 26px; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); }
.contact-route-card--dark .contact-route-card__icon { color: #89e8d8; background: rgba(255,255,255,.1); }
.contact-route-card__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-route-card__type { margin-bottom: 7px; color: var(--primary); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.contact-route-card--dark .contact-route-card__type { color: #89e8d8; }
.contact-route-card h3 { margin-bottom: 12px; font-size: 25px; line-height: 1.2; }
.contact-route-card p { color: var(--muted); }
.contact-route-card--dark p { color: #c9d8eb; }
.contact-route-card__address { position: relative; z-index: 2; display: inline-flex; margin: auto 0 18px; color: var(--primary); font-size: 18px; font-weight: 800; }
.contact-route-card--dark .button { position: relative; z-index: 2; margin-top: auto; }

.contact-main__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); align-items: start; gap: 34px; }
.contact-form-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 24px 70px rgba(20,45,95,.09); }
.contact-form-card__header { padding: 34px 38px 27px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fbfdff, #f6f9ff); }
.contact-form-card__header h2 { margin-bottom: 11px; font-size: clamp(31px, 3vw, 43px); line-height: 1.12; letter-spacing: -.035em; }
.contact-form-card__header p { margin-bottom: 0; color: var(--muted); }
.contact-form { padding: 34px 38px 38px; }
.form-grid { display: grid; gap: 18px; }
.form-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-field { margin-bottom: 20px; }
.form-field label, .form-field__label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--ink-2); font-size: 14px; font-weight: 750; }
.form-field__optional, .form-field__label-row > span { color: var(--muted); font-size: 11px; font-weight: 600; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: #fff; outline: none; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.form-field input, .form-field select { height: 52px; padding: 0 14px; }
.form-field textarea { min-height: 174px; padding: 13px 14px; resize: vertical; line-height: 1.55; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #79a6fa; box-shadow: 0 0 0 4px rgba(21,94,239,.1); }
.form-field input:invalid:not(:placeholder-shown), .form-field textarea:invalid:not(:placeholder-shown) { border-color: #f0a19a; }
.form-field__hint { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.form-consent { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 11px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.form-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); }
.form-consent a, .contact-form__footer a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.contact-form__footer { display: flex; align-items: center; gap: 20px; margin-top: 26px; padding-top: 25px; border-top: 1px solid var(--line); }
.contact-form__footer p { max-width: 430px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.contact-form__honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 28px 38px 0; padding: 14px 16px; border-radius: 10px; font-size: 14px; }
.form-status--success { color: #05603a; border: 1px solid #a6e8c9; background: #ecfdf3; }
.form-status--error { color: #9a2d24; border: 1px solid #f2b8b2; background: #fff1f0; }

.contact-sidebar { display: grid; gap: 22px; }
.contact-sidebar__visual { position: relative; min-height: 285px; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(145deg, #0b1f3a 0%, #13467d 65%, #0c6c7b 120%); box-shadow: var(--shadow-md); }
.contact-orbit { position: absolute; border: 1px solid rgba(139,218,255,.22); border-radius: 50%; }
.contact-orbit--one { width: 320px; height: 320px; right: -70px; top: -95px; }
.contact-orbit--two { width: 205px; height: 205px; right: -16px; top: -36px; }
.contact-sidebar__badge { position: absolute; top: 28px; left: 28px; display: inline-flex; align-items: center; gap: 8px; color: #dfeafe; font-size: 12px; font-weight: 750; }
.contact-sidebar__badge span { width: 8px; height: 8px; border-radius: 50%; background: #33d9be; box-shadow: 0 0 0 5px rgba(51,217,190,.13); }
.contact-sidebar__message { position: absolute; min-width: 250px; padding: 17px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 20px 48px rgba(4,18,41,.24); }
.contact-sidebar__message strong, .contact-sidebar__message span { display: block; }
.contact-sidebar__message strong { margin-bottom: 3px; color: #14243c; font-size: 14px; }
.contact-sidebar__message span { color: #637287; font-size: 12px; }
.contact-sidebar__message--one { left: 36px; top: 86px; transform: rotate(-1deg); }
.contact-sidebar__message--two { right: 28px; bottom: 32px; transform: rotate(1.5deg); }
.contact-direct, .contact-helpful { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.contact-direct h2 { margin-bottom: 12px; font-size: 30px; line-height: 1.18; letter-spacing: -.03em; }
.contact-direct > p { color: var(--muted); }
.contact-direct__item { padding: 15px 0; border-top: 1px solid var(--line); }
.contact-direct__item span, .contact-direct__item a { display: block; }
.contact-direct__item span { margin-bottom: 3px; color: var(--muted); font-size: 12px; }
.contact-direct__item a { color: var(--primary); font-size: 17px; font-weight: 800; }
.contact-helpful h3 { margin-bottom: 15px; font-size: 19px; }
.contact-helpful ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.contact-helpful li { position: relative; padding-left: 23px; color: var(--ink-2); font-size: 14px; }
.contact-helpful li::before { content: ""; position: absolute; left: 0; top: .45em; width: 11px; height: 6px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }

.contact-process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-process__grid article { position: relative; min-height: 230px; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.contact-process__grid article::after { content: ""; position: absolute; width: 110px; height: 110px; right: -45px; bottom: -48px; border-radius: 50%; background: rgba(21,94,239,.055); }
.contact-process__grid article > span { display: inline-flex; margin-bottom: 28px; color: var(--primary); font-size: 13px; font-weight: 850; letter-spacing: .1em; }
.contact-process__grid h3 { margin-bottom: 11px; font-size: 22px; }
.contact-process__grid p { color: var(--muted); }

.contact-details { padding: 104px 0; background: #fff; }
.contact-details__layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); align-items: start; gap: 70px; }
.contact-details__intro { position: sticky; top: calc(var(--header-height) + 34px); }
.contact-details__intro h2 { margin-bottom: 15px; font-size: clamp(33px, 4vw, 47px); line-height: 1.12; letter-spacing: -.038em; }
.contact-details__intro p { margin-bottom: 25px; color: var(--muted); font-size: 17px; }
.accordion--contact { display: grid; gap: 12px; }
.accordion--contact details { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.accordion--contact summary { position: relative; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; cursor: pointer; font-weight: 780; list-style: none; }
.accordion--contact summary::-webkit-details-marker { display: none; }
.accordion--contact summary span { position: relative; width: 20px; height: 20px; flex: 0 0 20px; }
.accordion--contact summary span::before, .accordion--contact summary span::after { content: ""; position: absolute; top: 9px; left: 3px; width: 14px; height: 2px; border-radius: 2px; background: var(--primary); }
.accordion--contact summary span::after { transform: rotate(90deg); transition: transform var(--transition); }
.accordion--contact details[open] summary span::after { transform: rotate(0); }
.accordion--contact details[open] summary { color: var(--primary); background: #f8faff; }
.accordion--contact details > div { padding: 0 22px 22px; color: var(--muted); }
.accordion--contact details > div p:last-child { margin-bottom: 0; }
.accordion--contact a { color: var(--primary); font-weight: 700; }
.contact-cta { position: relative; overflow: hidden; }
.contact-cta::after { content: ""; position: absolute; width: 280px; height: 280px; right: -85px; bottom: -150px; border: 48px solid rgba(255,255,255,.08); border-radius: 50%; }
.contact-cta > * { position: relative; z-index: 2; }

@media (max-width: 1040px) {
  .contact-route-grid { grid-template-columns: 1fr 1fr; }
  .contact-route-card--dark { grid-column: 1 / -1; min-height: 280px; }
  .contact-main__grid { grid-template-columns: 1fr; }
  .contact-sidebar { grid-template-columns: 1fr 1fr; }
  .contact-sidebar__visual { grid-column: 1 / -1; }
  .contact-details__layout { grid-template-columns: 1fr; gap: 38px; }
  .contact-details__intro { position: static; }
}

@media (max-width: 760px) {
  .contact-cover--compact { min-height: 430px; }
  .contact-cover__media { background-position: 62% center; opacity: .62; }
  .contact-cover__overlay { background: linear-gradient(90deg, rgba(4,15,33,.97), rgba(7,25,49,.82)); }
  .contact-cover__content { width: 100%; padding: 48px 0 55px; }
  .contact-cover__content h1 { font-size: 42px; }
  .contact-route-grid, .contact-process__grid, .contact-sidebar, .form-grid--two { grid-template-columns: 1fr; }
  .contact-route-card--dark { grid-column: auto; }
  .contact-form-card__header, .contact-form { padding-left: 24px; padding-right: 24px; }
  .contact-form__footer { align-items: stretch; flex-direction: column; }
  .contact-form__footer .button { width: 100%; }
  .form-status { margin-left: 24px; margin-right: 24px; }
  .contact-sidebar__message { min-width: 220px; }
}

@media (max-width: 480px) {
  .contact-cover__content h1 { font-size: 36px; }
  .contact-cover__actions { align-items: stretch; flex-direction: column; }
  .contact-cover__actions .button { width: 100%; }
  .contact-form-card__header, .contact-form { padding-left: 19px; padding-right: 19px; }
  .contact-sidebar__message--one { left: 18px; }
  .contact-sidebar__message--two { right: 16px; }
  .contact-route-card { min-height: auto; }
}