.kontakt-page main > :where(:not(.direct-contacts)) :where(h1,h2,h3,p) {
margin:0;
}
.kontakt-hero {
height:322px; padding:56px 24px; text-align:center;
}
.kontakt-response-time {
max-width:900px; margin-inline:auto!important; font-size:15px; font-weight:600; line-height:24px; letter-spacing:1.2px;
}
.kontakt-hero h1 {
max-width:820px; margin:16px auto 0!important; font-size:54px; font-weight:900; line-height:58px; letter-spacing:-1.35px;
}
.kontakt-hero-copy {
margin-top:24px!important; font-size:20px; line-height:30px;
}
.kontakt-form-section {
min-height:672px; padding:56px 24px 72px; background:var(--ao-light-blue);
}
.kontakt-form {
width:min(560px,100%); margin-inline:auto; scroll-margin-top:24px;
}
.kontakt-field {
margin-bottom:14px;
}
.kontakt-field label {
display:block; margin-bottom:6px; font-size:14px; line-height:18px;
}
.kontakt-field label > span {
color:var(--ao-orange);
}
.kontakt-field :is(input,select,textarea),
.kontakt-subject-toggle {
display:block; width:100%; height:42px; border:1px solid var(--ao-divider); border-radius:12px; padding:10px 14px; background:white; color:var(--ao-blue); font:400 14px/20px Poppins,Arial,sans-serif; transition:border-color var(--ao-hover-fast) ease-in-out;
}
.kontakt-field :is(input,select,textarea):focus {
border-color:var(--ao-orange); outline:none;
}
.kontakt-field textarea {
height:82px; min-height:82px; resize:none;
}
.kontakt-field-message {
margin-bottom:0;
}
.kontakt-subject {
position:relative;
}
.kontakt-subject select {
appearance:none; padding-left:42px; font-size:13px; background:white url('assets/icons/kontakt-subject-closed.svg') no-repeat 14px center;
}
.kontakt-subject.is-enhanced select {
position:absolute; width:1px; height:1px; padding:0; opacity:0; pointer-events:none;
}
.kontakt-subject-toggle {
position:relative; padding-left:42px; color:#6c7d89; font-size:13px; text-align:left; cursor:pointer;
}
.kontakt-subject-toggle[hidden],
.kontakt-subject-options[hidden] {
display:none;
}
.kontakt-subject-toggle.has-value {
color:var(--ao-blue);
}
.kontakt-subject-toggle[aria-expanded="true"] {
color:#87959f;
}
.kontakt-subject-toggle:focus-visible {
border-color:var(--ao-orange); outline:2px solid var(--ao-orange); outline-offset:2px;
}
.kontakt-subject-icon {
position:absolute; left:14px; top:14px; width:14px; height:14px;
}
.kontakt-subject-icon img {
position:absolute; top:14.58%; left:0;
}
.kontakt-subject-icon-open {
opacity:0;
}
.kontakt-subject-toggle[aria-expanded="true"] .kontakt-subject-icon-open {
opacity:1;
}
.kontakt-subject-toggle[aria-expanded="true"] .kontakt-subject-icon-closed {
opacity:0;
}
.kontakt-subject-options {
position:absolute; top:48px; left:0; z-index:20; width:100%; border:1px solid var(--ao-divider); border-radius:10px; overflow:hidden; box-shadow:0 6px 14px rgba(31,59,77,.14); background:white; animation:kontakt-menu-in var(--ao-hover-normal) ease-in-out;
}
.kontakt-subject-option {
position:relative; display:block; width:100%; min-height:41.5px; padding:10px 14px; color:#7b8c97; background:white; border:0; font:400 12px/21.5px Poppins,Arial,sans-serif; text-align:left; cursor:pointer; transition:background-color var(--ao-hover-fast) ease-in-out,color var(--ao-hover-fast) ease-in-out;
}
.kontakt-subject-option:not(:last-child)::after {
content:""; position:absolute; bottom:0; left:14px; width:min(436px,calc(100% - 28px)); height:1px; background:#e9eef1;
}
.kontakt-subject-option:is(:hover,.is-active) {
background:var(--ao-light-blue); color:var(--ao-blue);
}
.kontakt-consent {
display:grid; grid-template-columns:18px minmax(0,1fr); align-items:start; gap:12px; min-height:38px; margin-top:22px; color:#6c7a83; font-size:13px; line-height:19px;
}
.kontakt-consent input {
appearance:none; display:grid; place-items:center; width:18px; height:18px; margin:2px 0 0; border:1px solid var(--ao-divider); border-radius:4px; background:white; cursor:pointer; transition:background-color var(--ao-hover-fast) ease-in-out,border-color var(--ao-hover-fast) ease-in-out;
}
.kontakt-consent input:checked {
background:var(--ao-orange); border-color:var(--ao-orange);
}
.kontakt-consent input:checked::after {
content:"✓"; color:white; font:500 12px/16px Poppins,Arial,sans-serif;
}
.kontakt-consent input:focus-visible {
outline:2px solid var(--ao-blue); outline-offset:3px;
}
.kontakt-consent label {
min-width:0; cursor:pointer;
}
.kontakt-privacy-link {
display:inline; border:0; padding:0; background:none; color:var(--ao-orange); font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.kontakt-privacy-link:focus-visible {
outline:2px solid var(--ao-blue); outline-offset:2px;
}
.kontakt-submit {
display:block; width:144px; height:50px; margin:8px 0 0 auto; border:0; border-radius:25px; background:var(--ao-orange); color:white; font:600 16px/24px Poppins,Arial,sans-serif; letter-spacing:-.064px; cursor:pointer; transition:background-color var(--ao-hover-fast) ease-out;
}
.kontakt-submit:is(:hover,:focus-visible) {
background:var(--ao-blue);
}
.kontakt-submit:focus-visible {
outline:2px solid var(--ao-blue); outline-offset:3px;
}
.kontakt-form-status {
margin-top:16px!important; font-size:14px; line-height:22px;
}
.kontakt-location {
padding:56px 76px;
}
.kontakt-location-card {
position:relative; display:flex; flex-direction:column; max-width:1288px; height:auto; margin-inline:auto; border-radius:26px; overflow:hidden; background:var(--ao-light-blue);
}
.kontakt-location-info {
position:relative; width:100%; padding:64px;
}
.kontakt-location-eyebrow {
color:#2f5f9f; font-size:14px; font-weight:600; line-height:21px; letter-spacing:-.056px;
}
.kontakt-location h2 {
margin-top:13px!important; font-size:30px; font-weight:900; line-height:45px; letter-spacing:-.12px;
}
.kontakt-location-details {
display:grid; gap:26.5px; margin-top:33px;
}
.kontakt-location-row {
display:grid; grid-template-columns:22px minmax(0,1fr); gap:18px; width:min(340px,100%);
}
.kontakt-location-row > img {
margin-top:4px;
}
.kontakt-location-row strong {
display:block; font-size:16px; font-weight:600; line-height:24px; letter-spacing:-.064px;
}
.kontakt-location-row > span > span,
.kontakt-location-row address {
display:block; margin-top:3px; font-size:15px; font-style:normal; line-height:22.5px; color:#6c7a83; transition:color var(--ao-hover-fast) ease-out;
}
.kontakt-location-row:is(:hover,:focus-visible) > span > span {
color:var(--ao-orange);
}
.kontakt-location-row:focus-visible {
outline:2px solid var(--ao-orange); outline-offset:4px;
}
body.kontakt-page .kontakt-location-visual {
position:relative; width:100%; height:clamp(260px,36vw,480px); min-height:0; aspect-ratio:auto; overflow:hidden; flex-shrink:0;
}
.kontakt-location-visual img {
display:block; width:100%; height:100%; object-fit:cover; object-position:50% 39%;
}
.kontakt-page .kontakt-faq {
padding:50px max(76px,calc((100% - 1288px)/2));
}
.kontakt-faq .leistungen-faq-list {
grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px;
}
.kontakt-faq .leistungen-faq-toggle > span,
.kontakt-faq .leistungen-faq-answer {
width:188px;
}
.kontakt-privacy-dialog {
width:min(920px,calc(100% - 40px)); max-width:none; max-height:calc(100dvh - 40px); height:720px; padding:30px 48px 24px; border:0; border-radius: var(--ao-radius-container); color:var(--ao-blue); box-shadow:0 18px 44px rgba(0,0,0,.18); overflow:hidden;
}
.kontakt-privacy-dialog[open] {
animation:kontakt-fade-in var(--ao-hover-normal) ease-out;
}
.kontakt-privacy-dialog::backdrop {
background:rgba(16,42,67,.45);
}
.kontakt-privacy-header {
position:relative; height:75px; border-bottom:1px solid rgba(16,42,67,.12); padding-right:48px;
}
.kontakt-privacy-header h2 {
margin:0; font-size:30px; font-weight:900; line-height:45px;
}
.kontakt-privacy-header p {
margin:0; font-size:13px; line-height:20px; color:rgba(16,42,67,.62);
}
.kontakt-privacy-close {
position:absolute; right:0; top:0; display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:21px; background:var(--ao-light-blue); color:var(--ao-blue); font:800 25px/32px Poppins,Arial,sans-serif; cursor:pointer;
}
.kontakt-privacy-content {
height:calc(100% - 95px); margin-top:20px; overflow-y:auto; overscroll-behavior:contain; overflow-wrap:anywhere; padding-right:24px; color:rgba(16,42,67,.92); font-size:13.5px; line-height:21px;
}
.kontakt-privacy-content p {
margin:0 0 10px;
}
.kontakt-privacy-strong {
font-weight:600;
}
.kontakt-privacy-content > p.kontakt-privacy-strong {
font-size:14.5px;
}
.kontakt-privacy-content > p:first-child {
font-size:16px;
}
.kontakt-privacy-close:focus-visible,
.kontakt-privacy-content:focus-visible {
outline:2px solid var(--ao-orange); outline-offset:2px;
}
@keyframes kontakt-menu-in {
from {opacity:0;} to {opacity:1;}
}
@keyframes kontakt-fade-in {
from {opacity:0;} to {opacity:1;}
}
@media (max-width:1399px) {
.kontakt-location {
padding-inline:48px;
}
.kontakt-location-info {
padding-inline:40px;
}
.kontakt-page .kontakt-faq {
padding-inline:48px;
}
.kontakt-faq .leistungen-faq-list {
gap:24px;
}
.kontakt-faq .leistungen-faq-toggle > span,
.kontakt-faq .leistungen-faq-answer {
width:calc(100% - 72px);
}
.kontakt-faq .leistungen-faq-toggle > span {
width:100%;
}

}
@media (max-width:950px) {
.kontakt-location {
padding:48px 32px;
}
.kontakt-location-card {
height:auto; display:flex; flex-direction:column;
}
.kontakt-location-info {
width:100%; padding:40px;
}
.kontakt-location-visual {
position:relative; left:auto; width:100%;
}
.kontakt-location-visual img {
object-position:50% 39%;
}
.kontakt-faq .leistungen-faq-list {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.kontakt-hero h1 {
font-size:48px; line-height:56px;
}
.kontakt-response-time {
font-size:13px;
}

}
@media (max-width:600px) {
.kontakt-hero {
height:auto; padding:48px 24px;
}
.kontakt-hero h1 {
font-size:34px; line-height:42px; letter-spacing:-.8px; overflow-wrap:break-word;
}
.kontakt-response-time {
max-width:340px; font-size:11px; line-height:20px; letter-spacing:.8px;
}
.kontakt-hero-copy {
font-size:17px; line-height:27px;
}
.kontakt-form-section {
min-height:0; padding:44px 24px;
}
.kontakt-consent {
font-size:12px; line-height:19px;
}
.kontakt-submit {
margin-top:20px;
}
.kontakt-location {
padding:40px 24px;
}
.kontakt-location-info {
padding:32px 24px;
}
.kontakt-location h2 {
font-size:26px; line-height:36px;
}
.kontakt-location-row {
gap:12px;
}
.kontakt-location-row > span > span,
.kontakt-location-row address {
font-size:14px; overflow-wrap:anywhere;
}
.kontakt-page .kontakt-faq {
padding:40px 24px;
}
.kontakt-faq .leistungen-faq-list {
grid-template-columns:1fr; gap:16px;
}
.kontakt-privacy-dialog {
width:calc(100% - 24px); max-height:calc(100dvh - 24px); padding:24px; border-radius: var(--ao-radius-card);
}
.kontakt-privacy-header {
height:100px;
}
.kontakt-privacy-header h2 {
font-size:22px; line-height:30px; overflow-wrap:anywhere;
}
.kontakt-privacy-header p {
margin-top:8px; font-size:11px; line-height:17px;
}
.kontakt-privacy-content {
height:calc(100% - 120px); padding-right:10px;
}
.kontakt-privacy-close {
width:34px; height:34px;
}

}
@media (max-width:350px) {
.kontakt-hero h1 {
font-size:30px; line-height:38px;
}

}
@media (prefers-reduced-motion:reduce) {
.kontakt-page *,
.kontakt-page *::before,
.kontakt-page *::after {
animation:none!important; transition:none!important; scroll-behavior:auto!important;
}

}

/* Submission feedback only; the untouched form retains its existing layout. */
.kontakt-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.kontakt-field-error { margin:6px 0 0; color:var(--ao-blue); font-size:13px; line-height:20px; }
.kontakt-field-error[hidden] { display:none; }
.kontakt-consent > .kontakt-field-error { grid-column:2; margin-top:0; }
.kontakt-submit:disabled { cursor:wait; }

/* Use the finished homepage's shared gutters and 1328px content boundary. */
body.kontakt-page :is(.kontakt-hero, .kontakt-form-section, .kontakt-location, .kontakt-faq) {
  padding-inline: var(--ao-page-gutter, var(--ao-responsive-gutter, 56px));
}
body.kontakt-page :is(.kontakt-hero-inner, .kontakt-form-inner, .kontakt-location-card, .kontakt-faq > h2, .kontakt-faq > .leistungen-faq-list) {
  width:100%; max-width:1328px; margin-inline:auto;
}
body.kontakt-page .kontakt-form { width:100%; max-width:none; margin-inline:auto; }
@media (min-width:1200px) {
  html:not([data-ao-tablet]):not([data-ao-tablet-header]) body.kontakt-page .kontakt-form { max-width:800px; }
}
body.kontakt-page .kontakt-hero { height:auto; }
body.kontakt-page .kontakt-hero-copy { max-width:820px; margin-inline:auto; }
body.kontakt-page .kontakt-form-section { min-height:0; }
body.kontakt-page .kontakt-field { margin-bottom:20px; }
body.kontakt-page .kontakt-field-message { margin-bottom:0; }
body.kontakt-page .kontakt-field :is(input, select, textarea),
body.kontakt-page .kontakt-subject-toggle { height:44px; }
body.kontakt-page .kontakt-field textarea { height:144px; min-height:144px; max-height:144px; overflow-y:auto; }
body.kontakt-page .kontakt-field :is(input,select,textarea):focus-visible {
  outline:2px solid var(--ao-orange); outline-offset:2px;
}
body.kontakt-page .kontakt-subject-toggle { display:flex; align-items:center; }
body.kontakt-page .kontakt-subject-toggle[hidden] { display:none; }
body.kontakt-page .kontakt-subject-icon { top:50%; transform:translateY(-50%); }
body.kontakt-page .kontakt-subject-icon img { top:0; bottom:0; margin-block:auto; }
body.kontakt-page .kontakt-subject-toggle[aria-expanded="true"] { color:var(--ao-blue); }
body.kontakt-page .kontakt-subject-options { top:calc(100% + 6px); }
body.kontakt-page .kontakt-subject-option { min-height:44px; color:var(--ao-blue); }
body.kontakt-page .kontakt-subject-option::after { width:calc(100% - 28px); }
body.kontakt-page .kontakt-subject-option[aria-selected="true"] { background:var(--ao-light-blue); font-weight:500; }
body.kontakt-page .kontakt-consent { font-size:13px; line-height:20px; }
body.kontakt-page .kontakt-consent input { position:relative; }
body.kontakt-page .kontakt-consent input::before { content:""; position:absolute; inset:-13px; }
body.kontakt-page .kontakt-field-error { margin:6px 0 0; }
body.kontakt-page .kontakt-consent > .kontakt-field-error { margin:0; }
body.kontakt-page .kontakt-submit { margin-top:24px; flex-shrink:0; }
body.kontakt-page .kontakt-submit:disabled { background:var(--ao-orange); }
body.kontakt-page .kontakt-form-status {
  padding:16px 20px; border:1px solid var(--ao-divider); border-radius:12px;
  background:white; color:var(--ao-blue); overflow-wrap:anywhere;
}
body.kontakt-page .kontakt-faq .leistungen-faq-toggle > span { width:100%; }
body.kontakt-page .kontakt-faq .leistungen-faq-answer { width:calc(100% - 72px); }

/* Portrait tablets use the same stacked content family as the finished pages. */
html[data-ao-tablet="portrait"] body.kontakt-page .kontakt-location-card { height:auto; display:flex; flex-direction:column; }
html[data-ao-tablet="portrait"] body.kontakt-page .kontakt-location-info { width:100%; padding:40px; }
html[data-ao-tablet="portrait"] body.kontakt-page .kontakt-faq .leistungen-faq-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (hover:none), (pointer:coarse) {
  body.kontakt-page .kontakt-subject-option:hover:not(.is-active):not([aria-selected="true"]) { background:white; }
  body.kontakt-page .kontakt-submit:hover:not(:focus-visible) { background:var(--ao-orange); }
}
@media (max-width:700px) and (orientation:portrait) {
  body.kontakt-page :is(.kontakt-hero, .kontakt-form-section, .kontakt-location, .kontakt-faq) { padding-block:var(--ao-section-space,44px); }
}

body.kontakt-page .kontakt-message-count { margin-top:6px; text-align:right; color:rgba(16,42,67,.62); font-size:12px; line-height:18px; }

/* Native, keyboard-accessible route chooser for iPhone and iPad. */
.kontakt-route-dialog {
  width:min(360px,calc(100% - 48px)); max-height:calc(100dvh - 48px);
  padding:20px 22px; border:0; border-radius:var(--ao-radius-card);
  background:var(--ao-blue); color:white; box-shadow:0 18px 44px rgba(0,0,0,.18);
  overflow:auto; overscroll-behavior:contain;
}
.kontakt-route-dialog[open] { display:grid; gap:10px; }
.kontakt-route-dialog::backdrop { background:rgba(16,42,67,.45); }
.kontakt-route-dialog h2 { margin:0 0 6px; padding-right:38px; color:white; font-size:22px; line-height:30px; font-weight:700; }
.kontakt-route-close {
  position:absolute; top:13px; right:12px; display:grid; place-items:center;
  width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.07) 15px,transparent 16px);
  color:white; font:400 22px/1 Poppins,Arial,sans-serif; cursor:pointer;
}
.kontakt-route-option {
  display:flex; align-items:center; min-height:52px; padding:12px 16px;
  border:1px solid var(--ao-divider); border-radius:12px; background:var(--ao-light-blue);
  color:var(--ao-blue); font-size:15px; line-height:24px; font-weight:500; text-decoration:none;
  transition:background-color var(--ao-hover-fast) ease-out, border-color var(--ao-hover-fast) ease-out, box-shadow var(--ao-hover-fast) ease-out;
}
.kontakt-route-dialog :is(button,a):focus-visible { outline:2px solid var(--ao-orange); outline-offset:2px; }
.kontakt-route-dialog .kontakt-route-close:focus-visible { outline:1px solid rgba(255,255,255,.7); outline-offset:-6px; }
.kontakt-route-option:active { background:white; border-color:var(--ao-orange); box-shadow:inset 0 0 0 1px var(--ao-orange); }
@media (hover:hover) and (pointer:fine) {
  .kontakt-route-option:hover { background:white; border-color:var(--ao-orange); }
}

/* Desktop location split; retain the current vertical tablet/phone layout. */
@media (min-width: 1200px) {
  html:not([data-ao-tablet]):not([data-ao-tablet-header]) body.kontakt-page .kontakt-location-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html:not([data-ao-tablet]):not([data-ao-tablet-header]) body.kontakt-page .kontakt-location-info {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  html:not([data-ao-tablet]):not([data-ao-tablet-header]) body.kontakt-page .kontakt-location-visual {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    height: auto;
  }
  html:not([data-ao-tablet]):not([data-ao-tablet-header]) body.kontakt-page .kontakt-location-visual img {
    position: absolute;
    inset: 0;
  }
}

/* Focus the existing location frame on the AO Profil sign. */
body.kontakt-page .kontakt-location-visual img { object-position:50% 7%; transform:scale(1.12); transform-origin:50% 0%; }
@media (max-width:1199px) and (min-width:600px) {
  body.kontakt-page .kontakt-location-visual img { object-position:50% 44%; }
}
@media (max-width:599px) {
  body.kontakt-page .kontakt-location-visual img { object-position:50% 12%; }
}