/* Contact hero (15.10.2026, after diabrowser.com; white since 16.10.2026): the dot field of the CTA section behind it,
   a serif kicker, the word "Kontakt" very large, and a window with the form that sits on its lower half. */
.kh { --kh-word: clamp(4rem, 23vw, 22rem); position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fff 18%, #f7f6f3 100%); padding: calc(var(--nfr-h, 64px) + 3.5rem) 5% 4.5rem; } /* a very light grey towards the bottom (16.10.2026) */
.kh_bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* the section is much taller than the CTA, so the dots fade out over a shorter stretch at top and bottom */
.kh .ca_bg { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%); }

.kh_inner { position: relative; max-width: 76rem; margin: 0 auto; text-align: center; }
.kh_kicker { margin: 0; font-family: var(--_typography---font-styles--heading); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; color: #2a2a2a; }
.kh_word { margin: .12em 0 0; font-family: var(--_typography---font-styles--heading); font-size: var(--kh-word); font-weight: 400; line-height: .8; letter-spacing: -.035em; color: #111; }
/* the word in Sorts Mill Goudy (15.10.2026, picked from 50 serifs; SIL Open Font License, free for commercial use;
   fonts/sortsmillgoudy-license.txt), self-hosted, latin subset */
@font-face { font-family: "Sorts Mill Goudy"; src: url("/fonts/SortsMillGoudy-Regular-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.kh_word.is-goudy { font-family: "Sorts Mill Goudy", var(--_typography---font-styles--heading); font-size: calc(var(--kh-word) * 1.08); line-height: .82; letter-spacing: -.02em; margin-top: .2em; }

/* window: a translucent cream frame with the sidebar, the white page inset on the right */
.kh_window { position: relative; display: grid; grid-template-columns: 17rem 1fr; margin-top: calc(var(--kh-word) * -.3); padding: .5rem; text-align: left; background: rgba(244, 243, 239, .8); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); transform: translateY(var(--kh-rise, 0px)); will-change: transform; animation: kh-in 1.1s cubic-bezier(.19, 1, .22, 1) .15s both; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 40px 90px -30px rgba(0, 0, 0, .22), 0 12px 30px -12px rgba(0, 0, 0, .12); }

/* on load the window rises once and fades in; the scroll rise (--kh-rise) runs on transform, this on translate */
@keyframes kh-in { from { opacity: 0; translate: 0 3.5rem; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .kh_window { animation: none; } }

.kh_side { display: flex; flex-direction: column; padding: .75rem .5rem .75rem .25rem; }
.kh_lights { display: flex; gap: .5rem; padding: .25rem .5rem 1.25rem; }
.kh_lights i { width: .75rem; height: .75rem; background: #ff5f57; -webkit-mask: radial-gradient(circle, #000 70%, transparent 71%); mask: radial-gradient(circle, #000 70%, transparent 71%); }
.kh_lights i:nth-child(2) { background: #febc2e; }
.kh_lights i:nth-child(3) { background: #28c840; }
.kh_lights.is-mobile { display: none; padding: 0; }
/* what a request can be about: a plain list, not clickable (15.10.2026) */
.kh_items { margin: 0; padding: 0; list-style: none; display: grid; gap: .125rem; }
.kh_item { display: flex; align-items: center; gap: .625rem; padding: .6rem .75rem; font-family: var(--_typography---font-styles--body); font-size: .875rem; font-weight: 500; line-height: 1.25; color: #444; }
.kh_item svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kh_mail { margin-top: auto; padding: 1.5rem .75rem .5rem; }
.kh_mail-label { margin: 0 0 .25rem; font-family: var(--_typography---font-styles--body); font-size: .75rem; color: #6b6a66; }
.kh_mail-link { display: block; font-family: var(--_typography---font-styles--body); font-size: .8125rem; font-weight: 500; color: #111; text-decoration: none; word-break: break-all; }
.kh_mail-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.kh_copy { display: inline-block; margin-top: .375rem; font-family: var(--_typography---font-styles--body); font-size: .75rem; color: #6b6a66; text-decoration: underline; text-underline-offset: .2em; }

.kh_main { min-width: 0; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.kh_bar { display: flex; align-items: center; gap: .875rem; padding: .75rem 1.25rem; border-bottom: 1px solid #efece4; color: #9b968a; }
.kh_ico { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kh_url { margin: 0 0 0 .5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--_typography---font-styles--body); font-size: .875rem; color: #111; }
.kh_url span { color: #a8a397; }

.kh_form { max-width: 40rem; padding: 2.75rem 3rem 3.25rem; }
.kh_h { margin: 0; font-family: var(--_typography---font-styles--heading); font-size: 2.25rem; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; color: #111; }
.kh_lead { margin: .75rem 0 2rem; font-family: var(--_typography---font-styles--body); font-size: 1rem; line-height: 1.5; color: #555; }
.kh_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem 1rem; }
.kh_field { display: flex; flex-direction: column; gap: .4rem; margin: 0; font-family: var(--_typography---font-styles--body); font-size: .8125rem; font-weight: 500; color: #333; }
.kh_field.is-wide { grid-column: 1 / -1; }
.kh_field input, .kh_field textarea { width: 100%; margin: 0; padding: .75rem .875rem; border: 1px solid #dcd9d1; border-radius: 0; background: #fff; font: 400 1rem/1.4 var(--_typography---font-styles--body); color: #111; transition: border-color .2s; }
.kh_field textarea { resize: vertical; min-height: 8rem; }
.kh_field input:hover, .kh_field textarea:hover { border-color: #b8b4a9; }
.kh_field input:focus, .kh_field textarea:focus { outline: 2px solid #111; outline-offset: -1px; border-color: #111; }
.kh_field input::placeholder, .kh_field textarea::placeholder { color: #a8a397; }
.kh_check { display: flex; align-items: flex-start; gap: .625rem; margin: 1.375rem 0 1.75rem; font-family: var(--_typography---font-styles--body); font-size: .8125rem; font-weight: 400; line-height: 1.5; color: #555; cursor: pointer; }
.kh_check input { flex: none; width: 1.0625rem; height: 1.0625rem; margin: .1rem 0 0; border-radius: 0; accent-color: #111; }
.kh_check a { color: #111; text-decoration: underline; text-underline-offset: .2em; }
.kh_submit { display: inline-flex; align-items: center; gap: .5rem; padding: 1rem 1.75rem; border: 0; border-radius: 0; background: #111; font: 500 1rem/1 var(--_typography---font-styles--body); color: #fff; cursor: pointer; }
.kh_submit span { display: inline-block; transition: transform .25s ease; }

.kh_submit:hover span { transform: translateX(.25rem); }
.kh_submit:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.kh_submit:disabled { background: #555; cursor: wait; }
/* Formspark states (16.10.2026): spam trap off screen, error line under the button, thank-you replaces the form */
.kh_honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kh_fail { margin: 1rem 0 0; font-family: var(--_typography---font-styles--body); font-size: .875rem; line-height: 1.5; color: #a1281c; }
.kh_fail a { color: inherit; }
.kh_done { max-width: 40rem; padding: 2.75rem 3rem 3.25rem; }
.kh_done:focus { outline: none; }

/* client logos inside the hero section (15.10.2026, own variant of the logo strip) */
.kh_logos { position: relative; margin: 2.5rem -5.5% 0; }

@media (max-width: 991px) {
  .kh_window { grid-template-columns: 1fr; }
  .kh_side { display: none; }
  .kh_lights.is-mobile { display: flex; }
  .kh_ico.is-desk { display: none; }
}
@media (max-width: 719px) {
  .kh { padding: calc(var(--nfr-h, 56px) + 2.5rem) 1rem 3rem; }
  .kh_logos { margin: 3rem -1rem 0; }
  .kh_window { padding: .375rem; }
  .kh_form, .kh_done { padding: 2rem 1.25rem 2.25rem; }
  .kh_h { font-size: 1.875rem; }
  .kh_grid { grid-template-columns: 1fr; }
  .kh_url { font-size: .8125rem; }
}
/* macOS window cards get Apple's corners (18.10.2026, Christian: "die card braucht den apple border radius ... nur für diese art von cards",
   i.e. cards with the red/yellow/green buttons top left; see style guide "Radius"). The site-wide reset uses !important, so this does too. */
.kh_window { border-radius: 10px !important; }
.kh_main { border-radius: 6px !important; }

/* 18.10.2026, Christian: "irgendwie muss man checken können, dass das ein formular ist". With a mouse the Name field starts
   focused; on touch screens a yellow circle opens once in it and it keeps a yellow frame until used (js/kontaktformular.js). */
.kh_form { position: relative; }
.kh_field input.is-hint { outline: 2px solid #ffaf3a; outline-offset: -1px; border-color: #ffaf3a; }
.kh_ripple { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.kh_ripple { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255,175,58,.45); border: 2px solid #ffaf3a; opacity: 0; }

/* Frame visible on real phones too (Christian 21.10.2026: "die card hat bei meinem wirklichen handy nicht so einen rand" /
   "auch auf handy rand zeigen"). iOS Safari drew the translucent blurred frame almost white; below 992 it is solid with a hairline. */
@media (max-width: 991px) {
  .kh_window { background: #ecebe6; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 40px 90px -30px rgba(0,0,0,.22), 0 12px 30px -12px rgba(0,0,0,.12); }
}
/* 21.10.2026, Christian (iPad): "auf ipad kontakt header das form, das nimmt in der card nicht die ganze breite der card ein" -
   the form cap (40rem) is for the two-column desktop window; below 992 the form fills the white area */
@media (max-width: 991px) { .kh_form, .kh_done { max-width: none; } }