/* ==========================================================================
   Privaed — Kontakt page styles (loaded only on the page-kontakt.php template).
   Ported from "Privaed Kontakt.html". Tokens, chrome, .btn-amber, .wrap,
   .eyebrow and .amber are global (styles.css); only Kontakt-specific rules
   live here. .contact-card + .crumb base rules are duplicated from the mock
   because home.css (which carries .contact-card for the homepage) is NOT
   loaded on this route.
   ========================================================================== */

.kontakt{padding:14px 0 30px}

/* ===== BREADCRUMB ===== */
.crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:20px}
.crumb a{transition:color .15s}
.crumb a:hover{color:var(--amber-deep)}
.crumb svg{width:13px;height:13px;opacity:.45}
.crumb .cur{color:var(--ink-2);font-weight:600}

/* ===== PAGE HEAD ===== */
.k-head{max-width:720px;margin-bottom:42px}
.k-head .eyebrow{margin-bottom:16px}
.k-head h1{font-size:clamp(36px,4.6vw,58px);font-weight:800;line-height:1.04}
.k-head .lead{color:var(--body);font-size:18px;margin-top:18px;max-width:560px}

/* ===== GRID ===== */
.k-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:30px;align-items:start}
.k-info{display:flex;flex-direction:column;gap:18px}

/* ===== CONTACT CARD (base from the mock; home.css not loaded here) ===== */
.contact-card{background:linear-gradient(165deg,#E3A23B,#C9842A);border-radius:var(--r-card);padding:36px;color:#2a1d05;position:relative;overflow:hidden;display:flex;flex-direction:column}
.contact-card::after{content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%)}
.contact-card h3{color:#2a1d05;font-size:27px;font-weight:800}
.contact-card .person{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:32px}
.avatar{width:64px;height:64px;border-radius:50%;flex:none;background:linear-gradient(160deg,#caa05f,#9c7536);display:grid;place-items:center;color:#2a1d05;font-weight:700;font-family:"Epilogue";font-size:20px;border:2px solid rgba(255,255,255,.4);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.contact-card .nm{font-weight:700;font-size:17px}
.contact-card .role{font-size:13.5px;opacity:.75}
.contact-card .lines{margin-top:18px;font-size:14.5px;line-height:1.9;font-weight:500}
.contact-card .lines a{border-bottom:1px solid rgba(42,29,5,.3)}
/* reused contact card scales up here */
.k-info .contact-card{padding:34px}
.k-info .contact-card h3{font-size:25px}

/* ===== COMPANY REQUISITES ===== */
.k-block{background:#fff;border-radius:var(--r-card);padding:30px;box-shadow:0 12px 32px -22px rgba(64,46,16,.3)}
.k-block h4{font-family:"DM Sans";font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.req{display:flex;flex-direction:column;gap:14px}
.req .r{display:flex;gap:14px}
.req .ri{width:38px;height:38px;border-radius:11px;background:var(--cream-2);color:var(--amber-deep);display:grid;place-items:center;flex:none}
.req .ri svg{width:19px;height:19px}
.req .rk{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.req .rv{font-size:15px;color:var(--ink);font-weight:600;line-height:1.4;margin-top:2px}
.req .rv a:hover{color:var(--amber-deep)}

/* ===== FORM ===== */
.k-form{background:#fff;border-radius:var(--r-card);padding:38px 38px 34px;box-shadow:0 20px 50px -28px rgba(64,46,16,.4)}
.k-form .fh{font-family:"Epilogue";font-size:23px;font-weight:800;color:var(--ink)}
.k-form .fsub{font-size:15px;color:var(--body);margin-top:8px;margin-bottom:26px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.field label .opt{color:var(--muted);font-weight:500;background:none}
.inp{width:100%;font-family:"DM Sans";font-size:15px;color:var(--ink);background:var(--cream);border:none;border-radius:13px;padding:14px 16px;outline:none;transition:.15s;box-shadow:inset 0 0 0 1.5px transparent}
.inp::placeholder{color:#aa9d86}
.inp:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--amber)}
textarea.inp{resize:vertical;min-height:130px;line-height:1.6}
.selwrap{position:relative}
.selwrap svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);pointer-events:none}
select.inp{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px}

/* ===== FILE FIELD ===== */
.filefield{display:flex;align-items:center;gap:14px;background:var(--cream);border:1.5px dashed var(--line-2);border-radius:13px;padding:14px 16px;cursor:pointer;transition:.15s}
.filefield:hover{border-color:var(--amber);background:#FFFBF3}
.filefield .fi{width:38px;height:38px;border-radius:10px;background:#fff;color:var(--amber-deep);display:grid;place-items:center;flex:none;box-shadow:0 3px 10px -5px rgba(64,46,16,.3)}
.filefield .fi svg{width:19px;height:19px}
.filefield .ft{font-size:14px;font-weight:700;color:var(--ink)}
.filefield .fd{font-size:12.5px;color:var(--muted);margin-top:2px}
/* selected-file name echoed by contact JS-less native change (set via inline attr) */
.filefield.has-file .ft{color:var(--amber-deep)}

/* ===== CONSENT ===== */
.consent2{display:flex;align-items:flex-start;gap:12px;margin:6px 0 22px;cursor:pointer}
.consent2 .cbx{width:22px;height:22px;border-radius:7px;background:var(--amber);display:grid;place-items:center;flex:none;margin-top:1px;position:relative}
.consent2 .cbx svg{width:13px;height:13px;color:#231a06}
/* native checkbox drives the visual: hidden, but its :checked state shows the tick */
.consent2 input[type=checkbox]{position:absolute;opacity:0;width:22px;height:22px;margin:0;cursor:pointer}
.consent2 .cbx::before{content:"";position:absolute;inset:0;border-radius:7px;background:var(--cream-2);transition:.15s}
.consent2 input[type=checkbox]:checked ~ .cbx::before{background:var(--amber)}
.consent2 .cbx svg{position:relative;opacity:0;transition:.15s}
.consent2 input[type=checkbox]:checked ~ .cbx svg{opacity:1}
.consent2 input[type=checkbox]:focus-visible ~ .cbx{box-shadow:0 0 0 3px var(--amber-soft)}
.consent2 span{font-size:13.5px;color:var(--body);line-height:1.5}
.consent2 a{color:var(--amber-deep);font-weight:600;text-decoration:underline}

.k-form .btn-amber{width:100%;justify-content:center;height:54px;font-size:16px}
.k-form .resp{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px}

/* ===== INLINE FORM NOTICE (sent / invalid / error) ===== */
.contact-notice{display:flex;align-items:center;gap:10px;border-radius:var(--r-md);padding:13px 16px;margin-bottom:22px;font-size:14px;font-weight:600;line-height:1.4}
.contact-notice svg{width:18px;height:18px;flex:none}
.contact-notice.is-sent{background:#EAF5EC;color:#2f7d4f;border:1px solid #BFE2C6}
.contact-notice.is-error{background:#FBEDEA;color:#9a3322;border:1px solid #F0CFC7}

/* ===== DEALERS ROW ===== */
.dealers{margin-top:50px;background:var(--cream-2);border-radius:var(--r-card);padding:32px 40px;display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:space-between}
.dealers .dt{font-family:"Epilogue";font-weight:700;font-size:17px;color:var(--ink);max-width:230px}
.dealers .dt span{color:var(--muted);font-weight:400;font-size:14px;font-family:"DM Sans";display:block;margin-top:5px}
.dealers .dlogos{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dealers .chip-logo{display:grid;place-items:center}
.dealers .chip-logo img{height:32px;width:auto;opacity:.85}
.dealers .chip-logo img.bauhof{height:26px}
.dealers .chip-logo img.bestor{height:22px}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .k-grid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .dealers{flex-direction:column;align-items:flex-start;gap:22px}
}
@media(max-width:480px){
  .chip-logo{min-width:0}
}