@layer djb.reset,djb.base,djb.theme,djb.elements,djb.classes,djb.global,djb.nodes,djb.custom;@layer djb.base{.djb-button:where(:not(.djb-button--plain)){display:inline-flex;align-items:center;justify-content:center;gap:.5em;cursor:pointer;text-decoration:none;border:0;font:inherit;line-height:1.2}.djb-button--sm{padding:.5em 1em;font-size:.875em}.djb-button--md{padding:.75em 1.5em}.djb-button--lg{padding:1em 2em;font-size:1.125em}
.djb-button__icon{flex-shrink:0;width:1em;height:1em}.djb-svg{max-width:100%}
.djb-svg:where(svg):not([height]),.djb-svg__svg:not([height]){height:auto}
.djb-svg--link{display:inline-block;line-height:0;color:inherit}
.djb-svg--link:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.djb-svg--empty{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:8px;background:repeating-linear-gradient(45deg,#f3f1f7,#f3f1f7 10px,#eeebf4 10px,#eeebf4 20px);color:#9a93ad}}@layer djb.global{/* ==========================================================================
   PAGE: kontakt  →  Bricks Page settings → Custom CSS
   ========================================================================== */
/* @page:start kontakt */
/* --- Contact hero (MK /contact/): info cards in their own left column (30%), title + progressive questionnaire on the right (from ~37% to the container edge) --- */
/* --contact-ref = MK's base unit: 1.06vw on desktop (16.28px at 1536, 20.35px at 1920), capped by the viewport height so the card column always fits a short screen */
.contact-hero { --contact-ref: 4.3vw; --contact-top: calc(var(--header-bar-height) + clamp(30px, 5vw, 80px)); position: relative; min-height: 100svh; padding-top: var(--contact-top); padding-bottom: clamp(60px, 7.6vw, 130px); overflow: clip; }
@media (min-width: 768px) { .contact-hero { --contact-ref: min(max(13px, 1.06vw), 2.25vh); } }
@media (min-width: 1000px) { .contact-hero { --contact-top: calc(var(--header-bar-height) / 2 + 37px); } }
.contact-hero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42% 46% at 0% 0%, rgba(3,226,156,.34) 0, rgba(3,226,156,.12) 42%, transparent 72%), radial-gradient(30% 26% at 100% 82%, rgba(220,247,236,.6) 0, transparent 70%); }
.contact-hero__grid { display: grid; gap: 36px; }
@media (min-width: 1000px) {
  .contact-hero__grid { grid-template-columns: 30% minmax(0, 1fr); column-gap: clamp(36px, 12.5vw - 99px, 200px); align-items: start; }
}

/* left column: sticky inside its own grid column, cards anchored to the bottom of the screen like MK */
.contact-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 640px) and (max-width: 999px) { .contact-side { display: grid; grid-template-columns: 1fr 1fr; } .contact-chat, .contact-follow { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .contact-side { position: sticky; top: var(--contact-top); justify-content: flex-end; min-height: calc(100svh - var(--contact-top) - 11vh); } }
.contact-info, .contact-follow { position: relative; display: block; padding: calc(var(--contact-ref) * 1.5); border-radius: calc(var(--contact-ref) * .96); background: rgba(246,246,246,.75); font-size: var(--contact-ref); line-height: 1.4; transition: background-color .3s; }
.contact-info:hover { background: rgba(236,238,238,.95); }
.contact-info__label { display: block; margin-bottom: 2px; padding-right: 2em; font-size: var(--contact-ref); color: var(--color-text-muted); }
.contact-info__value { display: block; font-size: calc(var(--contact-ref) * 1.3); font-weight: 500; overflow-wrap: anywhere; }
.contact-info__icon { position: absolute; top: calc(var(--contact-ref) * 1.5); right: calc(var(--contact-ref) * 1.5); width: calc(var(--contact-ref) * 1.47); height: calc(var(--contact-ref) * 1.47); stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; transition: transform .8s var(--ease-out), color .3s; }
.contact-info:hover .contact-info__icon { transform: rotate(180deg); color: var(--color-primary-ink); }
.contact-chat { position: relative; overflow: hidden; display: grid; justify-items: start; gap: 10px; padding: clamp(20px, 2vw, 28px); border-radius: var(--radius-lg); background: radial-gradient(circle at 100% 110%, rgba(3,226,156,.32) 0, transparent 52%), var(--color-dark); color: var(--color-white); }
.contact-chat__head { display: flex; align-items: center; gap: 12px; }
.contact-chat__icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: rgba(37,211,102,1); color: var(--color-white); }
.contact-chat__glyph { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-chat__title { font-size: clamp(18px, 1.4vw, 22px); font-weight: 600; line-height: 1.5; }
.contact-chat__text { font-size: 14px; line-height: 1.5; opacity: .7; }
@media (min-width: 1000px) and (max-height: 820px) { .contact-chat__text { display: none; } }
.contact-chat__number { margin: 4px 0 6px; font-size: clamp(24px, 2.1vw, 32px); font-weight: 500; line-height: 1.5; letter-spacing: -.02em; }
.contact-chat__button { background: rgba(37,211,102,1); border-color: rgba(37,211,102,1); color: var(--color-dark); --button-fill: rgba(29,168,81,1); --button-hover-text: var(--color-white); }
.contact-follow__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: .4em; font-size: var(--contact-ref); }
.contact-follow__link:hover { color: var(--color-primary-ink); }

/* right column */
.contact-main { min-width: 0; }
@media (min-width: 1000px) { .contact-main { padding-top: max(0px, min(11.5vw, 180px) - var(--contact-top)); } }
.contact-hero__title { margin-bottom: .1em; font-size: calc(var(--contact-ref) * 8.2); line-height: 1; letter-spacing: -.01em; }
@media (max-width: 767px) { .contact-hero__title { font-size: calc(var(--contact-ref) * 3.4); } }
.contact-hero__dot { display: inline-block; width: .17em; height: .17em; margin: 0 0 0 .06em; border-radius: 50%; background: var(--color-primary); vertical-align: baseline; }
.contact-hero__lede { max-width: 26em; margin: calc(var(--contact-ref) * 1.6) 0 calc(var(--contact-ref) * 2.4); font-size: var(--contact-ref); line-height: 1.4; color: var(--color-text-muted); }
@media (max-width: 767px) { .contact-hero__lede { font-size: 20px; } }

/* questionnaire: every answer opens the next question; the title is always fully visible, only the answers rise in */
.contact-form { display: grid; }
.contact-q { min-width: 0; margin: 0; padding: 0; border: 0; overflow: hidden; transition: height .6s var(--ease-io); }
.contact-q + .contact-q, .contact-q + .contact-result { margin-top: clamp(26px, 3vw, 40px); }
.contact-q__title { float: left; width: 100%; margin-bottom: 14px; padding: 0 2px; font-size: var(--contact-ref); font-weight: 400; line-height: 1.5; color: var(--color-text); opacity: 1; }
.contact-q__hint { clear: both; margin: -8px 0 14px; padding: 0 2px; font-size: max(13px, calc(var(--contact-ref) * .86)); line-height: 1.5; color: var(--color-text-muted); }
.contact-q__hint, .contact-q__chips, .contact-fields, .contact-consent, .contact-form__actions { transition: opacity .5s ease, transform .6s var(--ease-out); }
.contact-q--enter .contact-q__hint, .contact-q--enter .contact-q__chips, .contact-q--enter .contact-fields, .contact-q--enter .contact-consent, .contact-q--enter .contact-form__actions { opacity: 0; transform: translateY(14px); }
.contact-q__chips { clear: both; display: flex; flex-wrap: wrap; gap: calc(var(--contact-ref) * .6); padding: 1px; }
.contact-chip { position: relative; cursor: pointer; }
.contact-chip__input { position: absolute; opacity: 0; pointer-events: none; }
.contact-chip__box { --chip-k: var(--color-dark); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: .6em; padding: .5em .9em; border-radius: var(--radius-pill); border: 1px solid var(--color-dark); color: var(--color-dark); font-size: calc(var(--contact-ref) * 1.12); line-height: 1.5; transition: color .35s, border-color .35s; }
.contact-chip__box::before { content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 300%; border-radius: 80%; background: var(--chip-k); transform: translateY(40%); transition: transform .45s var(--ease-standard), border-radius .45s var(--ease-standard); }
.contact-q__chips > .contact-chip:nth-child(6n+1) .contact-chip__box { --chip-k: rgba(0,168,116,1); }
.contact-q__chips > .contact-chip:nth-child(6n+2) .contact-chip__box { --chip-k: rgba(107,98,224,1); }
.contact-q__chips > .contact-chip:nth-child(6n+3) .contact-chip__box { --chip-k: rgba(224,72,91,1); }
.contact-q__chips > .contact-chip:nth-child(6n+4) .contact-chip__box { --chip-k: rgba(232,121,63,1); }
.contact-q__chips > .contact-chip:nth-child(6n+5) .contact-chip__box { --chip-k: rgba(31,143,214,1); }
.contact-chip__text { display: inline-block; height: 1.5em; overflow: hidden; vertical-align: top; }
.contact-chip__roll { display: block; transition: transform .45s var(--ease-standard); }
.contact-chip__roll::after { content: attr(data-label); content: attr(data-label) / ""; display: block; }
.contact-chip:hover .contact-chip__roll, .contact-chip__input:checked + .contact-chip__box .contact-chip__roll { transform: translateY(-50%); }
.contact-chip__icon { flex: 0 0 auto; width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 1; stroke-linecap: round; transition: transform .45s var(--ease-standard); }
.contact-chip__input:checked + .contact-chip__box { border-color: var(--chip-k); color: var(--color-white); animation: contactChipPulse .4s var(--ease-standard); }
.contact-chip__input:checked + .contact-chip__box::before { transform: none; border-radius: 0; }
.contact-chip__input:checked + .contact-chip__box .contact-chip__icon { transform: rotate(135deg); }
.contact-chip__input:focus-visible + .contact-chip__box { outline: 2px solid var(--color-primary-ink); outline-offset: 3px; }
@keyframes contactChipPulse { 50% { transform: scale(.96); } }

/* final step: MK-style fields with the label inside the box (it floats up once you type) */
.contact-fields { clear: both; display: grid; gap: 10px; max-width: 47.5em; font-size: var(--contact-ref); }
@media (min-width: 640px) { .contact-fields { grid-template-columns: 1fr 1fr; } }
.contact-field { position: relative; min-width: 0; }
.contact-field--full { grid-column: 1 / -1; }
.contact-field__input { display: block; width: 100%; min-height: 2.785em; padding: 1.13em 18px .25em; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-text); font-size: 1.3em; line-height: 1.3; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.contact-field__input:hover { border-color: rgba(10,33,41,.28); }
.contact-field__input:focus { outline: none; border-color: var(--color-primary-ink); box-shadow: 0 0 0 3px rgba(3,226,156,.22); }
.contact-field__input--area { min-height: 7.1em; padding-bottom: .5em; resize: vertical; }
.contact-field__label { position: absolute; left: 19px; right: 19px; top: 1.07em; overflow: hidden; color: var(--color-text-muted); font-size: max(14px, .98em); line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; transform-origin: 0 0; transition: transform .3s var(--ease-out), color .3s; }
.contact-field__input:focus + .contact-field__label, .contact-field__input:not(:placeholder-shown) + .contact-field__label { transform: translateY(-.62em) scale(.78); }
.contact-field__input:focus + .contact-field__label { color: var(--color-primary-ink); }
.contact-field__error { display: none; margin-top: 6px; padding: 0 4px; font-size: 13px; color: rgba(194,65,12,1); }
.contact-field--error .contact-field__error { display: block; }
.contact-field--error .contact-field__input { border-color: var(--color-warning); }
.contact-consent { display: flex; align-items: flex-start; gap: 10px; max-width: 40em; margin-top: 18px; font-size: max(14px, calc(var(--contact-ref) * .86)); line-height: 1.5; color: var(--color-text-secondary); cursor: pointer; }
.contact-consent__input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .15em; accent-color: var(--color-primary-ink); cursor: pointer; }
.contact-consent a { text-decoration: underline; text-underline-offset: 2px; }
.contact-form__error { clear: both; margin-top: 12px; font-size: 14px; color: rgba(194,65,12,1); }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }

/* estimate shown after sending */
.contact-result { display: grid; justify-items: start; gap: 8px; max-width: 34rem; padding: clamp(24px, 2.6vw, 40px); border-radius: var(--radius-lg); background: radial-gradient(circle at 100% 120%, rgba(3,226,156,.45) 0, transparent 55%), var(--color-dark); color: var(--color-white); animation: contactResultIn .7s var(--ease-out) both; }
.contact-result__label { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-on-dark-muted); }
.contact-result__value { font-size: clamp(36px, calc(var(--contact-ref) * 3.4), 64px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: var(--color-primary); }
.contact-result__note { max-width: 30em; font-size: max(14px, calc(var(--contact-ref) * .9)); line-height: 1.5; color: var(--color-text-on-dark-muted); }
.contact-result__thanks { margin-top: 6px; font-size: var(--contact-ref); font-weight: 500; }
.contact-result[hidden] { display: none; }
@keyframes contactResultIn { from { opacity: 0; transform: translateY(20px); } }

@media (prefers-reduced-motion: reduce) { .contact-q, .contact-q__hint, .contact-q__chips, .contact-fields, .contact-consent, .contact-form__actions, .contact-chip__roll, .contact-chip__box::before, .contact-field__label { transition: none; } .contact-chip__input:checked + .contact-chip__box, .contact-result { animation: none; } }}@layer djb.nodes{.djb-ddcbc5{display:contents}}