/* ==========================================================================
   integration-20260929 — /integration.html only (body.ig).
   Builds on api.css: its tokens, navbar, hero, .steps, .code, .res and the
   sections.css footer. No new colours: everything is an api.css token, except
   the error colours, which are the demo booking page's (demo.css #submitErr).
   ========================================================================== */

/* English visitors: hidden until integration.js has swapped the copy in (head script, max 2.5 s) */
html.ig-swapping body{visibility:hidden}

/* navbar: api.html's bar wraps "Live-Demo" and "Demo anfragen" onto two lines between 901
   and 1180px. Here every item stays on one line: tighter gaps, and below 1040px the link
   to this very page steps aside (the page title already says where you are). */
.ig .nav-links a,.ig .nav-login,.ig .signup{white-space:nowrap}
@media (min-width:901px) and (max-width:1180px){
  .ig .nav-shell nav{gap:16px; padding-left:18px}
  .ig .nav-links{gap:16px}
  .ig .nav-links a,.ig .nav-login,.ig .signup{font-size:14.5px}
}
@media (min-width:901px) and (max-width:1040px){
  .ig .nav-links a[aria-current="page"]{display:none}
}

/* headings and leads sit directly in .dv here (api.css only styles direct children of .dv-sec) */
.ig .dv-sec h2{
  font-family:var(--font-head); font-weight:800; letter-spacing:-.025em; line-height:1.15;
  font-size:clamp(26px,3vw,33px); color:var(--ink); margin-bottom:10px; text-wrap:balance;
}
.ig .dv-sec p.lead{font-size:16.5px; line-height:1.65; color:var(--ink-2); max-width:62ch; margin:0 0 26px}
.ig .dv-hero h1{overflow-wrap:break-word}

/* ---------- buttons ---------- */
.ig-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.ig .ig-btn{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:12px 20px; border-radius:12px;
  font-family:var(--font-body); font-size:15.5px; font-weight:700; letter-spacing:-.01em; line-height:1.2;
  text-decoration:none; border-bottom:0; transition:transform .2s, background .2s;
}
.ig .ig-btn-primary{color:#fff; background:var(--ink); border:1px solid var(--ink); box-shadow:0 18px 40px -22px rgba(10,18,34,.6)}
.ig .ig-btn-ghost{color:var(--ink); background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.08); box-shadow:inset 0 2px 3px 0 rgba(255,255,255,.6)}
.ig .ig-btn:hover{transform:translateY(-1px)}
.ig .ig-btn-ghost:hover{background:rgba(255,255,255,.8)}
.ig-arrow{font-size:1.05em; line-height:1}

/* ---------- the three ways ---------- */
.ig-ways{display:flex; flex-direction:column; gap:18px}
.ig-way{
  min-width:0; padding:26px 28px 24px; border-radius:20px; border:1px solid rgba(36,74,140,.1);
  background:rgba(255,255,255,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6), 0 30px 70px -50px rgba(20,50,110,.5);
}
.ig .ig-tag{font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:6px}
.ig .ig-way h3{margin:0 0 8px; font-size:21px}
.ig-way .code{margin-top:18px}
.ig .ig-first{margin-top:14px; font-size:14.5px}
.ig .ig-more{margin-top:8px; font-size:14.5px}
.ig-list{list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:4px}
.ig-list li{position:relative; padding-left:22px; font-size:15.5px; line-height:1.62; color:var(--ink-2); max-width:62ch}
.ig-list li::before{
  content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(150deg,var(--brand-royal),var(--brand-cyan));
}
@media(max-width:640px){ .ig-way{padding:22px 18px 20px} }

/* ---------- self-service steps: api.css .steps as an ordered list ----------
   The homepage's .step cards (sections.css padding, polish.css dashed connectors,
   mobile-fix.css padding) also match .step; they are switched off here. */
.ig .ig-steps{list-style:none; margin-top:6px; gap:26px}
.ig .ig-steps .step{padding:0 0 0 52px; border-radius:0; background:none; box-shadow:none}
.ig .ig-steps .step::after{content:none}
.ig .ig-steps .step h3{margin:4px 0 6px}
.ig .ig-steps .step p{margin-top:0}
@media(max-width:640px){ .ig .ig-steps .step{padding:0} }
.ig .ig-aside{margin-top:16px; font-size:14.5px}
.ig .ig-aside a,.ig .ig-direct a{white-space:nowrap}

/* anchor jumps (#interesse, #telefon …) land below the sticky navbar */
.ig section[id],.ig .ig-way[id]{scroll-margin-top:118px}

/* ---------- interest form ---------- */
.ig-interest{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:44px; align-items:start}
@media(max-width:900px){ .ig-interest{grid-template-columns:minmax(0,1fr); gap:20px} }
.ig .ig-direct{font-size:15px}
.ig-card{
  min-width:0; padding:26px 28px; border-radius:20px; border:1px solid rgba(36,74,140,.1);
  background:rgba(255,255,255,.8); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6), 0 30px 70px -50px rgba(20,50,110,.5);
}
@media(max-width:640px){ .ig-card{padding:20px 16px} }
.ig-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px}
@media(max-width:560px){ .ig-row{grid-template-columns:minmax(0,1fr)} }
.ig-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px; min-width:0}
.ig-field label{font-size:13.5px; font-weight:700; color:var(--ink-soft)}
.ig-opt{font-weight:500; color:var(--muted-2)}
.ig-field input,.ig-field textarea{
  width:100%; min-width:0; font-family:var(--font-body); font-size:16px; line-height:1.45; color:var(--ink);
  background:rgba(255,255,255,.92); border:1px solid rgba(36,74,140,.22); border-radius:12px; padding:11px 13px;
  transition:border-color .2s, box-shadow .2s;
}
.ig-field textarea{resize:vertical; min-height:112px}
.ig-field input::placeholder,.ig-field textarea::placeholder{color:var(--muted-2); opacity:1}
.ig-field input:focus,.ig-field textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.ig-field [aria-invalid="true"]{border-color:#9b3028}
.ig .ig-err{margin-top:2px; font-size:13.5px; line-height:1.45; font-weight:600; color:#842c25}
.ig-consent{display:flex; gap:12px; align-items:flex-start; margin:2px 0 4px}
.ig-consent input{flex:none; width:20px; height:20px; margin-top:2px; accent-color:var(--ink); cursor:pointer}
.ig-consent input:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.ig-consent input[aria-invalid="true"]{outline:2px solid #9b3028; outline-offset:2px}
.ig-consent label{font-size:14px; line-height:1.55; color:var(--ink-2); cursor:pointer}
.ig .ig-status{margin-top:14px; padding:14px; max-width:none; border:1px solid #9b3028; background:#f4e4de; color:#842c25; border-radius:12px; font-size:14.5px; line-height:1.55}
.ig .ig-status a{color:#842c25; border-bottom-color:currentColor}
.ig-submit{
  margin-top:18px; width:100%; min-height:50px; padding:0 26px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:12px; background:var(--ink); color:#fff; cursor:pointer;
  font-family:var(--font-body); font-size:16px; font-weight:700; letter-spacing:-.01em; transition:transform .2s, opacity .2s;
}
.ig-submit:hover{transform:translateY(-1px)}
.ig-submit:disabled{opacity:.6; cursor:default; transform:none}
#interestForm[aria-busy="true"] .ig-submit{cursor:progress}
@media(min-width:561px){ .ig-submit{width:auto} }
.ig .ig-noscript{margin-top:12px; font-size:14px}
.ig-done{border-left:3px solid var(--brand-teal); padding:4px 0 4px 18px}
.ig .ig-done h3{margin:0 0 10px}
.ig-done h3:focus{outline:none}
.ig .ig-done p + p{margin-top:10px}