:root {
  color-scheme: dark;
  --bg: #090f17;
  --surface: #131e29;
  --surface-raised: #192633;
  --text: #f3f6fa;
  --muted: #93a2b0;
  --line: rgba(190, 211, 226, 0.12);
  --green: #40d5a0;
  --amber: #d7aa48;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #8db5ec; outline-offset: 3px; }
[hidden] { display: none !important; }
.ambient, .grid-pattern { position: fixed; pointer-events: none; }
.ambient { z-index: -1; border-radius: 50%; filter: blur(5px); }
.ambient-one { width: 720px; height: 720px; top: -330px; left: -260px; background: radial-gradient(circle, rgba(33, 86, 108, .21) 0%, rgba(7, 16, 24, 0) 65%); }
.ambient-two { width: 800px; height: 800px; bottom: -530px; right: -300px; background: radial-gradient(circle, rgba(62, 80, 109, .22), rgba(9, 15, 23, 0) 66%); }
.grid-pattern { inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(rgba(163, 181, 202, .12) .65px, transparent .65px); background-size: 29px 29px; mask-image: linear-gradient(to bottom, transparent, black 36%, black 62%, transparent); }
.page { min-height: 100vh; max-width: 1260px; padding: 0 56px; margin: 0 auto; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 25px 0 23px; border-bottom: 1px solid rgba(211, 228, 239, .10); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-symbol { flex: 0 0 auto; width: 50px; height: 50px; border: 1px solid rgba(197, 213, 226, .16); border-radius: 14px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.018)); box-shadow: 0 8px 26px #0002; }
.brand-symbol img { object-fit: contain; width: 40px; height: 40px; }
.brand-name { display: grid; gap: 1px; }
.brand-name strong { font-size: 17px; letter-spacing: .15em; line-height: 1.2; font-weight: 760; }
.brand-name > span { font-size: 10px; font-weight: 680; letter-spacing: .27em; color: #8fa4b5; }
.topbar-note { display: flex; align-items: center; gap: 10px; color: #9cb0bf; font-size: 12px; letter-spacing: .02em; }
.status-pulse { width: 7px; height: 7px; border-radius: 50%; background: #50d2ab; box-shadow: 0 0 0 4px rgba(80,210,171,.10),0 0 16px rgba(80,210,171,.3); }
.content { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(410px, 490px); align-items: center; gap: clamp(46px, 8vw, 125px); padding: 86px 0 96px; }
.intro { position: relative; isolation: isolate; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-bottom: 40px; }
.eyebrow { color: #a3bed0; font-size: 11px; font-weight: 720; letter-spacing: .20em; display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.eyebrow-line { width: 25px; height: 2px; border-radius: 1px; background: #91acc0; }
h1 { margin: 0; font-size: clamp(42px, 4.7vw, 65px); line-height: 1.15; letter-spacing: -.052em; font-weight: 725; }
.text-highlight { color: #b4cada; }
.intro-text { max-width: 460px; margin: 25px 0 0; color: #99aab9; line-height: 1.85; font-size: 16px; }
.intro-text strong { color: #dce6ed; font-weight: 600; }
.feature-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 35px; }
.feature { display: inline-flex; align-items: center; gap: 9px; color: #8da2b2; font-size: 12px; }
.feature-icon { width: 25px; height: 25px; border: 1px solid rgba(172, 201, 219, .18); border-radius: 50%; display: grid; place-items: center; color: #c3d7e2; font-size: 14px; }
.intro-watermark { position: absolute; z-index: -1; width: min(385px,80%); bottom: -115px; left: -53px; pointer-events: none; opacity: .055; transform: rotate(-11deg); filter: grayscale(1); }
.intro-watermark img { width: 100%; height: auto; display: block; }
.checker { border: 1px solid rgba(203, 226, 244, .15); border-radius: 23px; background: linear-gradient(153deg, rgba(29, 44, 58, .98), rgba(14, 25, 35, .98) 49%, rgba(15, 26, 35, .98)); box-shadow: 0 30px 86px rgba(0,0,0,.29), 0 1px 1px #ffffff0d inset; overflow: hidden; }
.checker-topline { display: flex; align-items: center; justify-content: space-between; padding: 19px 27px; color: #7891a6; border-bottom: 1px solid rgba(187, 205, 219, .1); font-size: 10px; font-weight: 720; letter-spacing: .20em; }
.decorative-dots { display: flex; gap: 6px; }
.decorative-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: rgba(169, 191, 210, .35); }
.checker-body { padding: 31px 32px 28px; }
.card-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.card-icon { width: 47px; height: 47px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(162, 191, 209, .15); border-radius: 13px; color: #c9dbe6; background: rgba(191, 211, 228, .07); }
.card-icon svg { width: 23px; height: 23px; }
.card-heading h2 { font-weight: 695; font-size: 18px; letter-spacing: -.017em; margin: 0 0 4px; }
.card-heading p { color: #879ba9; font-size: 12px; margin: 0; }
#plz-form label { display: block; color: #a7b8c5; font-size: 11px; font-weight: 700; letter-spacing: .12em; margin-bottom: 11px; }
.input-wrap { display: flex; align-items: center; gap: 0; min-height: 63px; padding: 0 16px; border: 1px solid rgba(166, 188, 205, .23); background: rgba(7, 14, 21, .41); border-radius: 12px; transition: border-color .18s, background-color .18s, box-shadow .18s; }
.input-wrap:focus-within { border-color: #aac5d8; box-shadow: 0 0 0 3px rgba(142, 180, 210, .10); background: rgba(7, 14, 21, .55); }
.input-wrap.invalid { border-color: #ea8c80; box-shadow: 0 0 0 3px rgba(234, 140, 128, .08); }
.input-prefix { flex: 0 0 auto; margin-right: 17px; padding: 8px 10px; border-radius: 6px; background: rgba(165, 187, 208, .10); color: #8da7b9; font-size: 11px; letter-spacing: .04em; font-weight: 740; }
#plz-input { border: 0; outline: none; padding: 0; width: 100%; min-width: 0; min-height: 60px; background: transparent; color: #f5f8fa; letter-spacing: .10em; font-weight: 660; font-size: 23px; font-variant-numeric: tabular-nums; }
#plz-input::placeholder { font-weight: 420; letter-spacing: .03em; font-size: 17px; color: #576a7b; }
.clear-btn { background: none; border: none; color: #748ea0; border-radius: 6px; padding: 6px; display: grid; place-items: center; }
.clear-btn:hover { color: white; background: #ffffff12; }
.clear-btn svg { width: 18px; height: 18px; }
.field-hint { margin: 9px 0 0; color: #708799; font-size: 11px; }
.field-error { margin: 9px 0 0; color: #ffa89f; font-size: 12px; }
.submit-btn { margin-top: 24px; width: 100%; min-height: 56px; border: none; border-radius: 11px; color: #0d1b25; background: linear-gradient(120deg, #d9e4ec, #b2c8d8); box-shadow: 0 5px 16px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .54); font-weight: 750; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 14px; transition: transform .17s, filter .17s; }
.submit-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.submit-btn:active { transform: translateY(0); }
.submit-btn svg { width: 18px; height: 18px; }
.separator { display: flex; align-items: center; gap: 13px; margin: 28px 0 18px; color: #687f92; font-size: 10px; font-weight: 730; letter-spacing: .20em; }
.separator::before, .separator::after { content: ""; height: 1px; background: rgba(189, 211, 227, .12); flex: 1; }
.result-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 177px; padding: 26px 17px; border: 1px dashed rgba(164, 191, 210, .14); background: rgba(5, 12, 19, .12); border-radius: 13px; text-align: center; }
.placeholder-symbol { color: #648096; border: 1px solid rgba(132, 164, 186, .14); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 15px; }
.placeholder-symbol svg { width: 19px; height: 19px; }
.result-placeholder strong { font-size: 13px; font-weight: 640; color: #a8bfce; }
.result-placeholder > span:last-child { color: #6a8294; font-size: 12px; margin-top: 5px; }
.result { min-height: 177px; padding: 21px 22px; border-radius: 13px; border: 1px solid transparent; animation: appear .2s ease-out; }
.result-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.result-eyebrow { letter-spacing: .11em; font-size: 10px; font-weight: 750; }
.result-plz { font-size: 11px; font-weight: 670; color: #cad8e3; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.055); font-variant-numeric: tabular-nums; }
.result-identity { display: flex; align-items: center; gap: 11px; margin-top: 21px; }
.result-icon { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 750; }
.result-name { font-size: clamp(23px, 2.65vw, 31px); line-height: 1.15; font-weight: 760; letter-spacing: -.035em; }
.result p { line-height: 1.5; font-size: 12px; margin: 15px 0 0; }
.is-immoscout { background: linear-gradient(135deg, rgba(34, 170, 126, .19), rgba(34, 170, 126, .065)); border-color: rgba(65, 207, 158, .35); }
.is-immoscout .result-eyebrow, .is-immoscout .result-name { color: #54e2ae; }
.is-immoscout .result-icon { color: #69efbe; background: rgba(77, 202, 151, .15); }
.is-immoscout p { color: #add6c6; }
.is-hausgold { background: linear-gradient(135deg, rgba(171, 124, 32, .23), rgba(171, 124, 32, .075)); border-color: rgba(213, 168, 67, .37); }
.is-hausgold .result-eyebrow, .is-hausgold .result-name { color: var(--amber); }
.is-hausgold .result-icon { color: #e8bd63; background: rgba(215, 170, 72, .17); }
.is-hausgold p { color: #cdbc97; }
.checker-footer { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid rgba(189, 210, 227, .095); color: #7690a2; font-size: 11px; padding: 18px 12px; text-align: center; }
.checker-footer svg { width: 15px; height: 15px; flex: 0 0 auto; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 26px 0 29px; border-top: 1px solid rgba(211, 228, 239, .095); color: #637b8d; font-size: 11px; letter-spacing: .025em; }
@keyframes appear { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1010px) { .page { padding: 0 34px; } .content { gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(365px, 450px); padding: 64px 0 74px; } h1 { font-size: clamp(35px,4.5vw,55px); } .intro-text { font-size: 14px; } .checker-body { padding: 28px 26px 25px; } }
@media (max-width: 760px) { .page { padding: 0 22px; } .topbar { padding: 18px 0; } .content { display: flex; flex-direction: column; align-items: stretch; gap: 35px; padding: 51px 0 70px; } .intro { padding-bottom: 0; } h1 { font-size: clamp(38px, 8vw, 56px); } .intro-text { margin-top: 20px; font-size: 14px; line-height: 1.75; } .feature-row { margin-top: 20px; } .intro-watermark { display: none; } .checker { width: 100%; max-width: 550px; align-self: center; } }
@media (max-width: 440px) { .page { padding: 0 15px; } .brand-symbol { width: 43px; height: 43px; border-radius: 12px; } .brand-symbol img { width: 35px; height: 35px; } .brand-name strong { font-size: 14px; } .brand-name > span { font-size: 9px; } .topbar-note { font-size: 10px; } .eyebrow { font-size: 10px; margin-bottom: 18px; } .content { padding-top: 42px; } .checker-topline { padding: 16px 20px; } .checker-body { padding: 23px 20px; } .card-heading { gap: 11px; margin-bottom: 28px; } .card-heading h2 { font-size: 16px; } .card-heading p { font-size: 11px; } .card-icon { width: 43px; height: 43px; } .result { padding: 19px 16px; } .footer { flex-direction: column; align-items: flex-start; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }