/* ============================================================
   ROST IMMOBILIENSERVICE — Landing Page
   Design tokens extracted from the brand banner (navy + gold)
   ============================================================ */

:root{
  /* Brand */
  --navy:        #0c3a56;
  --navy-700:    #0f456a;
  --navy-900:    #062536;
  --navy-ink:    #0a2c41;
  --gold:        #c8911f;
  --gold-600:    #a9760e;
  --gold-200:    #ecd6a3;
  /* secondary accent tokens repointed to warm gold to match the navy+gold identity */
  --green:       #b9790f;
  --green-bright:#d4901a;
  --green-700:   #97690d;
  --green-100:   #f6ead2;

  /* Neutrals (warm) */
  --cream:       #f8f4ec;
  --sand:        #efe7d6;
  --paper:       #ffffff;
  --ink:         #16242e;
  --body:        #3f4f5a;
  --muted:       #6b7a85;
  --line:        #e6dfd1;
  --line-soft:   #efeadf;

  /* System */
  --shadow-sm: 0 1px 2px rgba(8,38,56,.06), 0 2px 6px rgba(8,38,56,.05);
  --shadow:    0 8px 24px rgba(8,38,56,.08), 0 2px 6px rgba(8,38,56,.05);
  --shadow-lg: 0 24px 60px rgba(8,38,56,.16), 0 6px 18px rgba(8,38,56,.08);
  --shadow-gold: 0 12px 30px rgba(212,144,26,.28);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Mulish", system-ui, sans-serif;
  --font-script: "Cormorant Garamond", Georgia, serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--navy); margin:0; line-height:1.06; letter-spacing:-.02em; font-weight:800; }
h1,h2{ font-family: var(--font-serif); font-weight:700; letter-spacing:-.005em; }
p{ margin:0; }
::selection{ background: var(--gold-200); color: var(--navy-900); }

.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: var(--gutter); }
.section{ padding-block: clamp(64px, 9vw, 128px); position: relative; }
.eyebrow{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-600);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background: var(--gold); border-radius:2px; }
.script{ font-family: var(--font-script); color: var(--green); font-weight:400; }

/* ---------- Buttons ---------- */
.btn{
  --bg: var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--bg);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  line-height:1;
  box-shadow: var(--shadow-gold);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px rgba(212,144,26,.36); }
.btn:active{ transform: translateY(0); }
.btn svg{ width:18px; height:18px; }
.btn--navy{ --bg: var(--navy); box-shadow: 0 12px 30px rgba(12,58,86,.28); }
.btn--navy:hover{ background: var(--navy-700); box-shadow: 0 18px 38px rgba(12,58,86,.34); }
.btn--ghost{
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--line); 
}
.btn--ghost:hover{ background:#fff; box-shadow: inset 0 0 0 2px var(--navy); transform: translateY(-2px); }
.btn--lg{ padding: 18px 34px; font-size: 17px; }
.btn--block{ width:100%; }

/* ---------- Top announcement bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:center; gap:11px;
  background: linear-gradient(90deg, var(--navy-900), #123a56);
  color:#fff; text-decoration:none;
  padding:10px 18px; font-family:var(--font-display); font-weight:700;
  font-size:14px; letter-spacing:.01em; position:relative; z-index:60;
}
.topbar__text{ background:linear-gradient(90deg,#fff,#fff); }
.topbar__pulse{ width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(200,145,31,.6); animation:tbPulse 2s infinite; flex:none; }
@keyframes tbPulse{ 0%{ box-shadow:0 0 0 0 rgba(200,145,31,.55);} 70%{ box-shadow:0 0 0 8px rgba(200,145,31,0);} 100%{ box-shadow:0 0 0 0 rgba(200,145,31,0);} }
.topbar__arrow{ width:17px; height:17px; color:var(--gold-200); transition:transform .22s ease; flex:none; }
.topbar:hover .topbar__arrow{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .topbar__pulse{ animation:none; } }
@media (max-width:520px){ .topbar{ font-size:12.5px; padding:9px 14px; } }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.is-stuck{ border-color: var(--line-soft); box-shadow: 0 6px 20px rgba(8,38,56,.06); }
.nav{ display:flex; align-items:center; gap: 20px; height: 78px; }
.nav__links{ display:flex; align-items:center; gap: 24px; margin-left: auto; }
.navitem{ position:relative; display:flex; align-items:center; }
.navlink{
  display:inline-flex; align-items:center; gap:5px;
  font-family:inherit; font-weight:700; font-size:14.5px; color: var(--navy-ink); letter-spacing:-.01em;
  background:none; border:none; cursor:pointer; padding: 6px 2px; white-space: nowrap; position: relative;
}
.navlink__chev{ width:14px; height:14px; color: var(--gold); transition: transform .22s ease; flex:none; }
.navlink::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform .22s ease;
  border-radius:2px;
}
.navitem:hover > .navlink::after, .navlink:focus-visible::after{ transform: scaleX(1); }
.navitem.has-menu:hover .navlink__chev, .navitem.has-menu:focus-within .navlink__chev{ transform: rotate(180deg); }
/* invisible bridge so the cursor can travel from button to menu */
.navitem.has-menu::after{ content:""; position:absolute; top:100%; left:-8px; right:-8px; height:16px; }
.navmenu{
  position:absolute; top:100%; left:50%; margin-top:14px;
  transform: translateX(-50%) translateY(8px);
  min-width:238px; background:#fff; border:1px solid var(--line-soft); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding:8px; display:grid; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease; z-index:60;
}
.navitem.has-menu:hover .navmenu, .navitem.has-menu:focus-within .navmenu, .navmenu.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.navmenu a{
  display:block; padding:10px 14px; border-radius: var(--r-sm);
  font-weight:700; font-size:14px; color: var(--navy); white-space:nowrap;
  transition: background .15s ease, color .15s ease;
}
.navmenu a:hover{ background: var(--cream); color: var(--gold-600); }
.nav__phone{ display:flex; align-items:center; gap:9px; font-weight:800; color:var(--navy); font-size:14.5px; white-space:nowrap; flex:none; }
.nav__cta{ flex:none; }
.nav__phone svg{ width:17px;height:17px;color:var(--gold); }
.nav__cta{ }
.nav__burger{ display:none; }

/* ---------- Logo ---------- */
.logo{ display:flex; align-items:center; gap:12px; flex:none; }
.logo__img{ height:50px; width:auto; display:block; flex:none; }
.logo__mark{ width:54px; height:auto; flex:none; }
.logo__type{ display:flex; flex-direction:column; line-height:1; }
.logo__word{ font-family:var(--font-serif); font-weight:700; font-size:27px; letter-spacing:.14em; color:var(--navy); }
.logo__word b{ color: var(--gold); font-weight:700; }
.logo__sub{ font-family:var(--font-body); font-weight:700; font-size:8.5px; letter-spacing:.26em; color:var(--gold-600); margin-top:4px; text-transform:uppercase; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(134,181,58,.10), transparent 55%),
    radial-gradient(80% 70% at 0% 0%, rgba(212,144,26,.06), transparent 60%),
    var(--cream);
  overflow: hidden;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(120px, 14vw, 180px);
}
.hero__grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__kicker{ margin-bottom: 22px; }
.hero h1{
  font-size: clamp(38px, 5.6vw, 68px);
  letter-spacing: -.03em;
}
.hero h1 em{ font-style: normal; color: var(--gold); }
.hero__lead{
  margin-top: 22px; max-width: 30em; font-size: clamp(17px,1.5vw,20px); color: var(--body);
}
.hero__form{
  margin-top: 30px;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow);
  max-width: 520px;
}
.hero__form-label{ font-weight:800; font-size:13px; letter-spacing:.04em; color:var(--navy); margin:2px 4px 12px; display:flex; align-items:center; gap:8px; }
.hero__form-label .dot{ width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-100); }
.type-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.chip{
  border:1.5px solid var(--line); background:#fff; color:var(--navy);
  border-radius: var(--r-pill); padding:9px 15px; font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:7px; transition:.16s;
}
.chip svg{ width:15px;height:15px; color:var(--muted); transition:.16s; }
.chip:hover{ border-color: var(--gold); }
.chip.is-active{ border-color: var(--gold); background: #fff8ec; color: var(--gold-600); box-shadow: inset 0 0 0 1px var(--gold); }
.chip.is-active svg{ color: var(--gold); }
.hero__form-row{ display:flex; gap:8px; }
.field{
  flex:1; display:flex; align-items:center; gap:10px; background:var(--cream);
  border:1.5px solid var(--line); border-radius: var(--r); padding:0 14px;
}
.field:focus-within{ border-color: var(--green); background:#fff; box-shadow: 0 0 0 4px var(--green-100); }
.field svg{ width:18px;height:18px;color:var(--muted);flex:none; }
.field input{
  border:none; background:transparent; outline:none; flex:1; font-family:var(--font-body);
  font-size:15px; font-weight:600; color:var(--ink); padding:14px 0; min-width:0;
}
.field input::placeholder{ color:var(--muted); font-weight:500; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:18px 24px; margin-top:24px; }
.hero__trust span{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:var(--navy); }
.hero__trust svg{ width:18px;height:18px;color:var(--green); flex:none; }

/* hero visual */
.hero__visual{ position: relative; }
.hero__photo{
  width:100%; aspect-ratio: 4/4.4; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 8px solid #fff;
}
/* visible tint for empty image placeholders */
.hero__photo, .mapcard image-slot{
  background: linear-gradient(150deg, var(--green-100), var(--sand) 70%);
}
.about__photo image-slot{ background: #f4f1ea; }
.hero__badge{
  position:absolute; left:-26px; top:34px;
  background:#fff; border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding:14px 16px; display:flex; align-items:center; gap:12px; border:1px solid var(--line-soft);
}
.hero__badge .ic{ width:40px;height:40px;border-radius:50%;background:var(--green-100);display:grid;place-items:center;color:var(--green-700); }
.hero__badge .ic svg{ width:21px;height:21px; }
.hero__badge b{ display:block; font-family:var(--font-display); font-size:16px; color:var(--navy); }
.hero__badge small{ color:var(--muted); font-size:12.5px; font-weight:700; white-space:nowrap; }
.hero__valuecard{
  position:absolute; right:-22px; bottom:42px;
  background: var(--navy-900); color:#fff; border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding:16px 20px; min-width:200px;
  overflow:hidden;
}
.hero__valuecard small{ color:#9fd0e6; font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:10.5px; }
.hero__valuecard .num{ font-family:var(--font-display); font-weight:800; font-size:30px; margin-top:4px; letter-spacing:-.02em; }
.hero__valuecard .num small{ color: var(--gold-200); font-size:14px; letter-spacing:0; text-transform:none; }
.hero__valuecard .spark{ display:flex; align-items:flex-end; gap:4px; height:30px; margin-top:12px; }
.hero__valuecard .spark i{ flex:1; background: linear-gradient(var(--green-bright), var(--green)); border-radius:3px; opacity:.85; }

/* ---------- Swoosh divider ---------- */
.swoosh{ display:block; width:100%; height:auto; margin-top:-2px; }

/* ---------- Trust badges band ---------- */
.trustband{
  background:#fff; position: relative; margin-top: -78px; z-index: 5;
}
.trustband__head{ text-align:center; max-width:780px; margin:0 auto; }
.trustband__head .eyebrow{ justify-content:center; }
.trustband__head h2{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:clamp(23px,2.5vw,32px); letter-spacing:-.01em; margin-top:8px; text-wrap:balance; }
.trustband__sub{ color:var(--body); font-size:16.5px; line-height:1.55; margin-top:12px; }
.trustband__row{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:34px; }
.trustband__inner{
  background:#fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border:1px solid var(--line-soft);
  display:block;
  padding: clamp(30px,4vw,44px) clamp(16px,3vw,36px);
}
.trustcell{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding: 6px 18px; position:relative; text-decoration:none; color:inherit; cursor:pointer;
}
.trustcell .tc-medal{
  width:66px; height:66px; border-radius:50%; display:grid; place-items:center;
  background: radial-gradient(120% 120% at 30% 20%, #fff, var(--cream));
  box-shadow: inset 0 0 0 1.5px var(--gold-200), 0 8px 18px rgba(8,38,56,.07);
  transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, background .24s ease;
}
.trustcell .tc-ic{ width:30px; height:30px; color: var(--gold); transition: color .24s ease, transform .24s ease; }
.trustcell b{ font-family:var(--font-display); font-size:14.5px; color:var(--navy); line-height:1.25; letter-spacing:0; transition: color .2s ease; }
.trustcell::after{
  content:""; width:0; height:2.5px; border-radius:2px; background:var(--gold);
  transition: width .26s ease; margin-top:-4px;
}
.trustcell:hover .tc-medal{
  background: linear-gradient(150deg, var(--gold), var(--gold-600));
  box-shadow: inset 0 0 0 1.5px transparent, var(--shadow-gold);
  transform: translateY(-5px) rotate(-4deg);
}
.trustcell:hover .tc-ic{ color:#fff; transform: rotate(4deg); }
.trustcell:hover::after{ width:26px; }

/* ---------- WhatsApp floating chat button ---------- */
.wa-fab{
  position:fixed; right:20px; bottom:20px; z-index:80;
  display:inline-flex; align-items:center;
  background:#25D366; color:#fff; border-radius:999px;
  height:58px; min-width:58px; box-shadow:0 10px 26px rgba(0,0,0,.26);
  overflow:hidden; text-decoration:none; white-space:nowrap;
  transition:box-shadow .2s ease, transform .2s ease, padding .28s ease;
  padding:0;
}
.wa-fab svg{ width:30px; height:30px; flex:none; margin:0 14px; }
.wa-fab__label{ font-weight:800; font-size:15px; max-width:0; opacity:0; overflow:hidden; transition:max-width .3s ease, opacity .25s ease, padding .3s ease; }
.wa-fab:hover{ box-shadow:0 14px 32px rgba(0,0,0,.3); transform:translateY(-2px); }
.wa-fab:hover .wa-fab__label{ max-width:150px; opacity:1; padding-right:20px; }
.wa-fab svg{ margin-right:12px; }
.wa-fab:hover svg{ margin-right:10px; }
@media (max-width:520px){ .wa-fab{ right:16px; bottom:16px; } }
@media print{ .wa-fab{ display:none; } }

/* ---------- Generic section heading ---------- */
.sec-head{ max-width: 760px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size: clamp(30px,3.6vw,46px); margin-top:16px; }
.sec-head p{ margin-top:18px; color: var(--body); font-size: clamp(16px,1.4vw,19px); }

/* ---------- Valuation tool ---------- */
.valuation{ background: var(--navy-900); color:#fff; position:relative; overflow:hidden; }
.valuation::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(70% 60% at 85% 0%, rgba(134,181,58,.16), transparent 60%),
             radial-gradient(60% 60% at 0% 100%, rgba(212,144,26,.14), transparent 55%);
}
.valuation .wrap{ position:relative; }
.valuation .eyebrow{ color: var(--gold-200); }
.valuation .eyebrow::before{ background: var(--gold); }
.valuation h2{ color:#fff; }
.val-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,5vw,64px); align-items:start; }
.val-intro p{ color:#bcd2dd; }
.val-points{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:16px; }
.val-points li{ display:flex; gap:14px; align-items:flex-start; }
.val-points .vp-ic{ width:34px;height:34px;border-radius:10px;background:rgba(134,181,58,.16);display:grid;place-items:center;color:var(--green-bright);flex:none; }
.val-points .vp-ic svg{ width:18px;height:18px; }
.val-points b{ font-family:var(--font-display); display:block; font-size:16px; }
.val-points span{ color:#a9c2cf; font-size:14.5px; }

/* form card */
.valcard{
  background:#fff; color:var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow:hidden;
}
.valcard__top{ padding: 24px 28px 0; }
.valcard__progress{ display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.valcard__progress .step{ flex:1; height:6px; border-radius:6px; background: var(--line); transition:.3s; }
.valcard__progress .step.is-done{ background: var(--green); }
.valcard__progress .step.is-active{ background: var(--gold); }
.valcard__stepno{ font-weight:800; font-size:13px; color:var(--muted); letter-spacing:.04em; }
.valcard__body{ padding: 8px 28px 28px; }
.valstep{ display:none; animation: fade .35s ease both; }
.valstep.is-active{ display:block; }
@keyframes fade{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
.valstep h3{ font-size: 23px; }
.valstep .hint{ color:var(--muted); margin-top:6px; font-size:14.5px; }
.opt-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:20px; }
.opt{
  border:1.5px solid var(--line); border-radius: var(--r); padding:16px 10px;
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  font-weight:700; font-size:14px; color:var(--navy); background:#fff; transition:.16s;
}
.opt svg{ width:26px;height:26px; color:var(--muted); transition:.16s; }
.opt:hover{ border-color: var(--gold); transform: translateY(-2px); }
.opt.is-active{ border-color: var(--gold); background:#fff8ec; box-shadow: inset 0 0 0 1px var(--gold); }
.opt.is-active svg{ color: var(--gold); }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:20px; }
.form-grid .full{ grid-column: 1 / -1; }
.lab{ display:block; }
.lab > span{ display:block; font-weight:800; font-size:13px; color:var(--navy); margin-bottom:7px; }
.inp{
  width:100%; border:1.5px solid var(--line); border-radius: var(--r); padding:13px 14px;
  font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--ink); background:var(--cream);
  outline:none; transition:.16s;
}
.inp:focus{ border-color: var(--green); background:#fff; box-shadow:0 0 0 4px var(--green-100); }
.inp::placeholder{ color:var(--muted); font-weight:500; }
.valcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }
.linkback{ background:none; border:none; color:var(--muted); font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:6px; padding:8px; }
.linkback:hover{ color:var(--navy); }
.linkback svg{ width:16px;height:16px; }
.consent{ font-size:12.5px; color:var(--muted); margin-top:14px; line-height:1.5; }
.consent a{ color:var(--green-700); font-weight:700; text-decoration:underline; }

/* success */
.valdone{ text-align:center; padding: 14px 10px 6px; }
.valdone .check{ width:72px;height:72px;border-radius:50%;background:var(--green-100);display:grid;place-items:center;margin:0 auto 18px;color:var(--green-700); }
.valdone .check svg{ width:38px;height:38px; }
.valdone h3{ font-size:25px; }
.valdone p{ color:var(--body); margin-top:10px; max-width:34em; margin-inline:auto; }

/* ---------- Region ---------- */
.region{ background: var(--cream); }
.region__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items:center; }
.lakelist{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.lakelist .lake{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius: var(--r-pill); padding:9px 16px; font-weight:700; color:var(--navy); font-size:14.5px;
  box-shadow: var(--shadow-sm);
}
.lakelist .lake svg{ width:15px;height:15px;color:var(--green); }
.statstrip{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:34px; }
.stat b{ font-family:var(--font-display); font-size: clamp(28px,3vw,40px); color:var(--navy); display:block; letter-spacing:-.02em; }
.stat b i{ color: var(--gold); font-style:normal; }
.stat span{ color:var(--muted); font-weight:700; font-size:13.5px; }
.mapcard{
  position:relative; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-lg);
  border:8px solid #fff; background: var(--green-100);
}
.mapcard image-slot{ display:block; width:100%; aspect-ratio: 5/5.6; }
.mapcard__tag{
  position:absolute; left:18px; bottom:18px; background:rgba(6,37,54,.9); color:#fff;
  border-radius: var(--r-pill); padding:10px 18px; font-weight:800; font-size:14px; backdrop-filter: blur(4px);
  display:flex; align-items:center; gap:9px;
}
.mapcard__tag svg{ width:16px;height:16px;color:var(--gold-200); }

/* ---------- Steps ---------- */
.steps__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 56px; }
.stepcard{
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--r-lg); padding: 30px 26px;
  box-shadow: var(--shadow-sm); position:relative; transition: transform .2s ease, box-shadow .2s ease;
}
.stepcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.stepcard__no{
  font-family:var(--font-display); font-weight:800; font-size:15px; color:#fff; width:38px;height:38px;
  border-radius:12px; background: var(--navy); display:grid; place-items:center; margin-bottom:20px;
}
.stepcard:nth-child(2) .stepcard__no{ background:var(--gold); }
.stepcard:nth-child(3) .stepcard__no{ background:var(--green); }
.stepcard:nth-child(4) .stepcard__no{ background:var(--navy-700); }
.stepcard h3{ font-size:19px; }
.stepcard p{ color:var(--body); margin-top:10px; font-size:15px; }
.stepcard__line{ position:absolute; top: 49px; right:-22px; width:22px; height:2px; background: var(--line); z-index:1; }
.stepcard:last-child .stepcard__line{ display:none; }

/* ---------- Advantages (KI) ---------- */
.advantages{ background:#fff; }
.adv__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:56px; }
.advcard{
  background: var(--cream); border:1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.advcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.advcard__ic{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:#fff; color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold-200);
  margin-bottom:20px;
}
.advcard__ic svg{ width:26px; height:26px; }
.advcard h3{ font-family:var(--font-display); font-size:20px; letter-spacing:-.01em; }
.advcard p{ color:var(--body); margin-top:10px; font-size:15.5px; }
.advcard__feats{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:9px; }
.advcard__feats li{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:14.5px; color:var(--navy); }
.advcard__feats svg{ width:18px; height:18px; color:var(--gold); flex:none; }
.advcard--accent{ background:var(--navy-900); border-color:transparent; color:#fff; position:relative; overflow:hidden; }
.advcard--accent::before{ content:""; position:absolute; inset:0; background:radial-gradient(75% 80% at 100% 0%, rgba(200,145,31,.20), transparent 58%); }
.advcard--accent > *{ position:relative; }
.advcard--accent .advcard__ic{ background:rgba(255,255,255,.1); color:var(--gold-200); box-shadow:none; }
.advcard--accent h3{ color:#fff; }
.advcard--accent p{ color:#bcd2dd; }
.advcard--accent .advcard__feats li{ color:#fff; }
.advcard--accent .advcard__feats svg{ color:var(--gold-200); }
.adv__cta{ display:flex; justify-content:center; margin-top:48px; }
.about__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.tst__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:52px; }

/* ---------- About ---------- */
.about{ background:#fff; }
.about__grid{ display:grid; grid-template-columns: 1.04fr .96fr; gap: clamp(32px,5vw,72px); align-items:center; }
.about__photo{ position:relative; }
/* banner-style diagonal photo frame: navy backdrop + gold diagonal edge */
.about__frame{
  position:relative;
  border-radius: var(--r-lg);
  overflow:hidden;
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 536 / 600;
  width: 100%;
  max-width: 540px;
}
.about__frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 55% 8%;
  -webkit-clip-path: polygon(46% 0, 100% 0, 100% 100%, 0 100%, 0 36%);
          clip-path: polygon(46% 0, 100% 0, 100% 100%, 0 100%, 0 36%);
}
/* gold accent line running along the diagonal, echoing the banner */
.about__diag{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }
.about__diag line{ stroke: var(--gold); stroke-width:4; vector-effect: non-scaling-stroke; }
.about__sig{ font-family:var(--font-serif); font-weight:700; font-size: 27px; color:var(--navy); line-height:1.1; margin-top:14px; letter-spacing:.01em; }
.about ul.creds{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px; }
.about ul.creds li{ display:flex; gap:12px; align-items:flex-start; color:var(--body); font-size:16px; }
.about ul.creds svg{ width:22px;height:22px;color:var(--green-700);flex:none;margin-top:1px; }
.about ul.creds b{ color:var(--navy); }
.about__quote{ margin-top:30px; padding-left:20px; border-left:3px solid var(--gold); font-family:var(--font-display); font-size:20px; color:var(--navy); font-weight:700; line-height:1.4; letter-spacing:-.01em; }

/* ---------- Testimonials ---------- */
.tst{ background: var(--cream); }
.tst__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:52px; }
.tcard{ background:#fff; border:1px solid var(--line-soft); border-radius: var(--r-lg); padding:28px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; }
.tcard .stars{ display:flex; gap:3px; color: var(--gold); margin-bottom:14px; }
.tcard .stars svg{ width:18px;height:18px; }
.tcard p{ color:var(--ink); font-size:16px; line-height:1.6; }
.tcard__who{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); }
.tcard__av{ width:44px;height:44px;border-radius:50%; background:var(--green-100); color:var(--green-700); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:16px; flex:none; }
.tcard__who b{ display:block; color:var(--navy); font-family:var(--font-display); font-size:15px; }
.tcard__who span{ color:var(--muted); font-size:13px; font-weight:700; }

/* ---------- FAQ ---------- */
.faq{ background:#fff; }
.faq__grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px,5vw,64px); align-items:start; }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; text-align:left; background:none; border:none; padding:22px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--navy); letter-spacing:-.01em;
}
.faq__q .pm{ width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;transition:.2s;color:var(--navy); }
.faq__q .pm svg{ width:16px;height:16px;transition:.25s; }
.faq__item.is-open .pm{ background:var(--gold); border-color:var(--gold); color:#fff; }
.faq__item.is-open .pm svg{ transform: rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.faq__a p{ padding: 0 0 22px; color:var(--body); font-size:16px; max-width:54ch; }

/* ---------- Final CTA ---------- */
.finalcta{ background: var(--navy-900); color:#fff; position:relative; overflow:hidden; text-align:center; }
.finalcta::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 80% at 50% -10%, rgba(134,181,58,.18), transparent 60%);
}
.finalcta .wrap{ position:relative; }
.finalcta h2{ color:#fff; font-size: clamp(32px,4vw,52px); }
.finalcta p{ color:#bcd2dd; margin:18px auto 0; max-width:44ch; font-size:18px; }
.finalcta__actions{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.finalcta__sub{ margin-top:22px; color:#86a3b2; font-weight:700; font-size:14px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.finalcta__sub span{ display:flex; align-items:center; gap:7px; }
.finalcta__sub svg{ width:16px;height:16px;color:var(--green-bright); }

/* ---------- Footer ---------- */
.footer{ background: var(--navy-ink); color:#cdddE6; padding-block: 64px 30px; }
.footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer .logo__word{ color:#fff; }
.footer .logo__sub{ color:#7fa0b1; }
.footer__logo{ display:inline-flex; background:#fff; border-radius:12px; padding:14px 18px; box-shadow: var(--shadow-sm); }
.footer__logo img{ height:46px; width:auto; display:block; }
.footer__about{ margin-top:18px; color:#9fb8c5; font-size:15px; max-width:32ch; }
.footer h4{ color:#fff; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px; font-family:var(--font-body); font-weight:800; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.footer ul a{ color:#a9c2cf; font-size:15px; font-weight:600; }
.footer ul a:hover{ color:#fff; }
.footer__contact li{ display:flex; gap:11px; align-items:flex-start; color:#a9c2cf; font-size:15px; }
.footer__contact svg{ width:18px;height:18px;color:var(--gold-200);flex:none;margin-top:2px; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); color:#7fa0b1; font-size:13.5px; flex-wrap:wrap; }
.footer__bottom a{ color:#9fb8c5; }
.footer__bottom a:hover{ color:#fff; }

/* ============================================================
   Contact subpage
   ============================================================ */
.page-hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(200,145,31,.10), transparent 55%),
    var(--cream);
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero::before{
  content:""; position:absolute; top:-150px; right:-160px; width:540px; height:540px;
  background:url('assets/topo.svg') no-repeat center / contain;
  opacity:.12; mix-blend-mode:multiply; pointer-events:none; z-index:0;
}
.page-hero > .wrap{ position:relative; z-index:1; }
.page-hero__crumb{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--muted); margin-bottom:18px; }
.page-hero__crumb a{ color:var(--gold-600); }
.page-hero__crumb a:hover{ text-decoration:underline; }
.page-hero__crumb svg{ width:15px; height:15px; }
.page-hero h1{ font-size: clamp(34px,4.6vw,56px); }
.page-hero p{ margin-top:16px; max-width:46ch; color:var(--body); font-size: clamp(17px,1.5vw,20px); }

.contact{ background:#fff; }
.contact__grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px,5vw,64px); align-items:start; }

/* form card */
.contact-card{
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: clamp(24px,3vw,38px);
}
.contact-card h2{ font-size: clamp(24px,2.4vw,30px); }
.contact-card .hint{ color:var(--muted); margin-top:8px; font-size:15px; }
.contact-form{ margin-top:24px; display:grid; gap:16px; }
.contact-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form .lab > span{ display:block; font-weight:800; font-size:13px; color:var(--navy); margin-bottom:7px; }
.contact-form textarea.inp{ resize:vertical; min-height:130px; line-height:1.5; }
.contact-form select.inp{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b7a85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
.contact-consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--muted); line-height:1.5; }
.contact-consent input{ margin-top:3px; width:17px; height:17px; accent-color:var(--green); flex:none; }
.contact-consent a{ color:var(--green-700); font-weight:700; text-decoration:underline; }
.contact-form .btn{ justify-self:start; }
.contact-done{
  display:none; text-align:center; padding: 18px 6px 6px;
}
.contact-done.show{ display:block; animation: fade .35s ease both; }
.contact-form.hide{ display:none; }
.contact-done .check{ width:72px;height:72px;border-radius:50%;background:var(--green-100);display:grid;place-items:center;margin:0 auto 18px;color:var(--green-700); }
.contact-done .check svg{ width:38px;height:38px; }
.contact-done h3{ font-size:25px; }
.contact-done p{ color:var(--body); margin-top:10px; max-width:36ch; margin-inline:auto; }

/* contact info column */
.contact-info{ display:grid; gap:18px; }
.info-card{
  background: var(--navy-900); color:#fff; border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.info-card::before{ content:""; position:absolute; inset:0; background: radial-gradient(70% 70% at 100% 0%, rgba(200,145,31,.18), transparent 60%); }
.info-card > *{ position:relative; }
.info-card h3{ color:#fff; font-size:20px; }
.info-list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:16px; }
.info-list li{ display:flex; gap:14px; align-items:flex-start; }
.info-list .ic{ width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--gold-200);flex:none; }
.info-list .ic svg{ width:20px;height:20px; }
.info-list b{ font-family:var(--font-display); display:block; font-size:15px; }
.info-list a, .info-list span.txt{ color:#bcd2dd; font-size:15px; }
.info-list a:hover{ color:#fff; }
.hours-card{
  background: var(--cream); border:1px solid var(--line-soft); border-radius: var(--r-lg); padding:24px 28px;
}
.hours-card h3{ font-size:18px; }
.hours-list{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
.hours-list li{ display:flex; justify-content:space-between; gap:16px; font-size:15px; color:var(--body); padding-bottom:10px; border-bottom:1px solid var(--line-soft); }
.hours-list li:last-child{ border-bottom:none; padding-bottom:0; }
.hours-list b{ color:var(--navy); font-weight:800; }
.hours-list .closed{ color:var(--muted); }

/* map */
.contact-map{ display:block; margin-top: clamp(28px,4vw,44px); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow); border:1px solid var(--line-soft); }
.map-static{
  position:relative; height: 380px;
  background:
    radial-gradient(120% 120% at 80% 20%, #e9f0d8 0%, #dfe7d2 40%, #d3dec6 100%);
  overflow:hidden;
}
.map-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(12,58,86,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,58,86,.07) 1px, transparent 1px);
  background-size: 46px 46px;
}
.map-route{
  position:absolute; inset:0;
  background:
    linear-gradient(120deg, transparent 38%, #c9d3bd 38% 41%, transparent 41%),
    linear-gradient(28deg, transparent 60%, #cfd9c4 60% 62.5%, transparent 62.5%),
    linear-gradient(95deg, transparent 20%, #d8c79b 20% 22%, transparent 22%);
  opacity:.9;
}
.map-pin{
  position:absolute; left:54%; top:42%; transform: translate(-50%,-100%);
  width:54px; height:54px; border-radius:50% 50% 50% 4px; rotate:45deg;
  background: var(--gold); display:grid; place-items:center;
  box-shadow: 0 12px 24px rgba(12,58,86,.28);
}
.map-pin svg{ width:24px; height:24px; color:#fff; rotate:-45deg; }
.map-pin::after{ content:""; position:absolute; left:50%; bottom:-26px; width:26px; height:10px; border-radius:50%; background: rgba(12,58,86,.18); transform: translateX(-50%) rotate(-45deg); }
.map-card{
  position:absolute; left:24px; bottom:24px; right:24px; max-width:430px;
  background:#fff; border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding:16px 18px; display:flex; align-items:center; gap:14px;
}
.map-card__ic{ width:44px;height:44px;border-radius:12px;background:var(--green-100);display:grid;place-items:center;color:var(--green-700);flex:none; }
.map-card__ic svg{ width:22px;height:22px; }
.map-card b{ display:block; font-family:var(--font-display); color:var(--navy); font-size:15px; }
.map-card span{ color:var(--muted); font-size:13.5px; font-weight:600; }
.map-card__go{ margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--gold-600)!important; font-weight:800; font-size:13.5px; white-space:nowrap; }
.map-card__go svg{ width:15px;height:15px; }
.contact-map:hover .map-card{ box-shadow: 0 24px 50px rgba(8,38,56,.20); }
.contact-map:hover .map-pin{ top:40%; transition: top .2s ease; }

@media (max-width: 920px){
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .contact-form .row2{ grid-template-columns:1fr; }
  .map-static{ height: 300px; }
  .map-card{ flex-wrap:wrap; }
  .map-card__go{ margin-left:0; }
}

/* ============================================================
   Forms / downloads subpage
   ============================================================ */
.forms-section{ background:#fff; }
.forms-group + .forms-group{ margin-top: clamp(40px,5vw,64px); }
.forms-group__head{ display:flex; align-items:center; gap:14px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.forms-group__ic{ width:46px;height:46px;border-radius:13px;background:var(--cream);display:grid;place-items:center;color:var(--gold);box-shadow: inset 0 0 0 1.5px var(--gold-200);flex:none; }
.forms-group__ic svg{ width:24px;height:24px; }
.forms-group__head h2{ font-family:var(--font-display); font-size: clamp(20px,2.2vw,26px); letter-spacing:-.01em; }
.forms-group__head p{ color:var(--muted); font-size:14.5px; margin-top:2px; }
.forms-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:18px; }
.dlcard{
  display:flex; align-items:center; gap:18px; text-decoration:none;
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dlcard:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-200); }
.dlcard__file{
  position:relative; width:50px; height:62px; flex:none; border-radius:7px;
  background: linear-gradient(160deg, #fff, #f3f5f7); border:1.5px solid var(--line);
  display:grid; place-items:end center;
}
.dlcard__file::before{ content:""; position:absolute; top:0; right:0; width:16px; height:16px; background: var(--cream); border-left:1.5px solid var(--line); border-bottom:1.5px solid var(--line); border-bottom-left-radius:6px; }
.dlcard__file .ext{ font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.04em; color:#fff; background: var(--gold); width:100%; text-align:center; padding:3px 0; border-radius:0 0 5px 5px; }
.dlcard__main{ flex:1; min-width:0; }
.dlcard__main b{ font-family:var(--font-display); color:var(--navy); font-size:16.5px; letter-spacing:-.01em; display:block; }
.dlcard__main span{ color:var(--body); font-size:13.5px; display:block; margin-top:3px; }
.dlcard__meta{ display:flex; align-items:center; gap:8px; margin-top:8px; color:var(--muted); font-size:12px; font-weight:700; }
.dlcard__meta .dot{ width:3px;height:3px;border-radius:50%;background:var(--muted); }
.dlcard__btn{
  flex:none; width:44px;height:44px;border-radius:50%; background:var(--navy); color:#fff;
  display:grid; place-items:center; transition: background .18s ease, transform .18s ease;
}
.dlcard__btn svg{ width:20px;height:20px; }
.dlcard:hover .dlcard__btn{ background: var(--gold); transform: translateY(2px); }
.forms-note{
  margin-top: clamp(40px,5vw,60px); display:flex; gap:16px; align-items:flex-start;
  background: var(--cream); border:1px solid var(--line-soft); border-radius: var(--r-lg); padding:22px 26px;
}
.forms-note__ic{ width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--green-700);box-shadow: var(--shadow-sm);flex:none; }
.forms-note__ic svg{ width:21px;height:21px; }
.forms-note b{ font-family:var(--font-display); color:var(--navy); font-size:16px; }
.forms-note p{ color:var(--body); font-size:14.5px; margin-top:4px; }
.forms-note a{ color:var(--green-700); font-weight:700; text-decoration:underline; }
@media (max-width: 720px){
  .forms-grid{ grid-template-columns:1fr; }
}

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__visual{ max-width:520px; margin-inline:auto; }
  .val-grid{ grid-template-columns:1fr; }
  .region__grid, .about__grid, .faq__grid{ grid-template-columns:1fr; }
  .about__photo{ width:100%; max-width:540px; margin-inline:auto; }
  .steps__grid{ grid-template-columns: repeat(2,1fr); }
  .adv__grid{ grid-template-columns: repeat(2,1fr); }
  .stepcard__line{ display:none; }
  .tst__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px){
  .nav__links{ display:none; }
  .nav__phone{ display:none; }
  .nav__burger{ display:inline-flex; margin-left:auto; }
  .trustband__row{ grid-template-columns: repeat(2,1fr); gap:22px 0; }
  .trustcell + .trustcell::before{ display:none; }
  .opt-grid{ grid-template-columns: repeat(2,1fr); }
  .adv__grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  body{ font-size:16px; }
  .hero__form-row{ flex-direction:column; }
  .hero__valuecard, .hero__badge{ display:none; }
  .steps__grid{ grid-template-columns:1fr; }
  .trustband__row{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .statstrip{ grid-template-columns:1fr; gap:14px; }
}

/* mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:60; background:rgba(6,37,54,.5); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:.25s; }
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu__panel{ position:absolute; top:0; right:0; bottom:0; width:min(82vw,340px); background:#fff; box-shadow: var(--shadow-lg); padding:26px; display:flex; flex-direction:column; gap:6px; transform:translateX(100%); transition:.3s; }
.mobile-menu.open .mobile-menu__panel{ transform:none; }
.mobile-menu__panel a{ padding:14px 8px; font-weight:700; font-size:18px; color:var(--navy); border-bottom:1px solid var(--line-soft); }
.mobile-menu__panel .btn{ margin-top:18px; }
.mobile-menu__panel{ overflow-y:auto; }
.mobile-menu__panel a{ padding:11px 8px; font-size:16.5px; }
.mm-group{ font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600); margin-top:16px; padding:0 8px 2px; }
.mm-group:first-of-type{ margin-top:4px; }
.mobile-menu__panel a.btn{ border-bottom:none; }
.iconbtn{ width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--navy); }

/* ============================================================
   Legal pages (Impressum · Datenschutz · AGB)
   ============================================================ */
.legal{ background:#fff; }
.legal__grid{ display:grid; grid-template-columns: 248px 1fr; gap: clamp(32px,5vw,72px); align-items:start; }
.legal__toc{ position:sticky; top:104px; }
.legal__toc h4{ font-family:var(--font-display); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.legal__toc ol{ list-style:none; padding:0; margin:0; counter-reset:toc; display:grid; gap:2px; }
.legal__toc a{ display:flex; gap:10px; align-items:baseline; padding:9px 12px; border-radius:var(--r-sm); color:var(--body); font-weight:600; font-size:14.5px; line-height:1.35; transition:.15s; }
.legal__toc a::before{ counter-increment:toc; content:counter(toc); font-family:var(--font-display); font-weight:800; font-size:12px; color:var(--gold-600); flex:none; min-width:16px; }
.legal__toc a:hover{ background:var(--cream); color:var(--navy); }
.legal__body{ max-width:760px; }
.legal__intro{ color:var(--body); font-size:18px; line-height:1.65; padding-bottom:28px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.legal__updated{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-weight:700; font-size:13.5px; margin-top:18px; }
.legal__updated svg{ width:16px; height:16px; color:var(--gold); }
.legal-block{ padding-top:34px; scroll-margin-top:104px; }
.legal-block + .legal-block{ border-top:1px solid var(--line-soft); }
.legal-block h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(20px,2.2vw,26px); letter-spacing:-.01em; display:flex; gap:12px; align-items:baseline; }
.legal-block h2 .nr{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--gold); flex:none; }
.legal-block h3{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--navy); margin-top:24px; }
.legal-block p{ color:var(--body); font-size:16px; line-height:1.7; margin-top:14px; }
.legal-block ul, .legal-block ol.lst{ margin:14px 0 0; padding-left:0; list-style:none; display:grid; gap:9px; }
.legal-block ul li{ position:relative; padding-left:26px; color:var(--body); font-size:16px; line-height:1.6; }
.legal-block ul li::before{ content:""; position:absolute; left:6px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.legal-block ol.lst{ counter-reset:lst; }
.legal-block ol.lst > li{ position:relative; padding-left:30px; color:var(--body); font-size:16px; line-height:1.6; }
.legal-block ol.lst > li::before{ counter-increment:lst; content:counter(lst) "."; position:absolute; left:0; top:0; font-family:var(--font-display); font-weight:800; color:var(--gold-600); }
.legal-block a{ color:var(--gold-600); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.legal-block strong{ color:var(--navy); font-weight:800; }
.legal-contactbox{ background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:26px 28px; margin-top:16px; }
.legal-contactbox p{ margin-top:6px; }
.legal-note{ background:#fff; border:1px dashed var(--gold-200); border-radius:var(--r); padding:14px 16px; margin-top:16px; color:var(--gold-600); font-size:14px; font-weight:600; display:flex; gap:10px; align-items:flex-start; }
.legal-note svg{ width:18px; height:18px; flex:none; margin-top:1px; }
@media (max-width:880px){
  .legal__grid{ grid-template-columns:1fr; }
  .legal__toc{ position:static; border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:20px 22px; background:var(--cream); }
}

/* ============================================================
   Visual polish pass (global)
   ============================================================ */

/* Gold sheen sweep on solid buttons (skips ghost) */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn > *{ position:relative; z-index:1; }
.btn::after{
  content:""; position:absolute; top:0; left:-140%; width:55%; height:100%; z-index:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg); opacity:0;
}
.btn:hover::after{ animation:btnSheen .85s ease; }
.btn--ghost::after{ display:none; }
@keyframes btnSheen{ from{ left:-140%; opacity:1; } to{ left:150%; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .btn::after{ display:none; } }

/* Header: shrink + crisper shadow once scrolled */
.nav{ transition: height .26s ease; }
.logo__img{ transition: height .26s ease; }
.site-header.is-shrink{ background: rgba(255,255,255,.92); box-shadow: 0 8px 26px rgba(8,38,56,.10); }
.site-header.is-shrink .nav{ height: 62px; }
.site-header.is-shrink .logo__img{ height: 42px; }

/* Topographic brand motif (decorative) */
.topo-deco{
  position:absolute; pointer-events:none; z-index:0;
  background:url('assets/topo.svg') no-repeat center / contain;
  opacity:.16; mix-blend-mode:multiply;
}
.hero{ overflow:hidden; }
.hero__topo{ top:-160px; right:-180px; width:680px; height:680px; opacity:.13; }
.hero .wrap{ position:relative; z-index:2; }
.footer{ position:relative; overflow:hidden; }
.footer__topo{ bottom:-220px; left:-200px; width:620px; height:620px; opacity:.10; mix-blend-mode:screen; }
.footer .wrap{ position:relative; z-index:2; }

/* Full-bleed panorama quote breaker */
.panobreak{
  position:relative; min-height:clamp(340px,44vw,520px);
  display:grid; place-items:center; text-align:center; overflow:hidden;
  background:var(--navy-900); padding-block:0;
}
.panobreak image-slot{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.panobreak__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right, rgba(8,30,44,.82), rgba(8,30,44,.55) 55%, rgba(8,30,44,.7));
}
.panobreak__inner{ position:relative; z-index:2; max-width:820px; padding:48px 28px; color:#fff; }
.panobreak__eyebrow{
  display:inline-flex; align-items:center; gap:9px; color:var(--gold-200);
  font-weight:800; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.panobreak__eyebrow::before, .panobreak__eyebrow::after{ content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; }
.panobreak__q{
  font-family:var(--font-serif); font-weight:600; font-style:italic;
  font-size:clamp(28px,3.8vw,48px); line-height:1.18; letter-spacing:-.01em;
  margin-top:18px; text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.panobreak__c{ margin-top:18px; color:#cdddE6; font-weight:600; font-size:15px; }
.panobreak__c b{ color:#fff; }

/* ---------- "Auch interessant" related links ---------- */
.related{ background:var(--cream); border-top:1px solid var(--line-soft); }
.related__head{ text-align:center; max-width:640px; margin:0 auto; }
.related__head h2{ color:var(--navy); font-size:clamp(24px,2.6vw,32px); margin-top:6px; }
.related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.relcard{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:20px 22px; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.relcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold-200); }
.relcard__ic{ width:50px; height:50px; border-radius:13px; display:grid; place-items:center; background:var(--navy-900); color:var(--gold-200); flex:none; }
.relcard__ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.relcard__tx{ flex:1; min-width:0; }
.relcard__tx b{ display:block; font-family:var(--font-display); font-weight:800; font-size:16.5px; color:var(--navy); letter-spacing:-.01em; }
.relcard__tx small{ display:block; color:var(--body); font-size:13.5px; font-weight:600; margin-top:3px; }
.relcard__arr{ width:20px; height:20px; flex:none; color:var(--gold); fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.relcard:hover .relcard__arr{ transform:translateX(4px); }
@media (max-width:860px){ .related__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }

/* Cohesive image treatment — gentle, unifies different photo sources */
.hero__photo, image-slot[data-filled]{ filter: saturate(.95) contrast(1.03); }
.hero__visual{ position:relative; }
.hero__visual::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(200,145,31,.12), transparent 42%),
             linear-gradient(0deg, rgba(8,30,44,.18), transparent 38%);
}
.hero__badge{ z-index:2; }

/* Trust / reviews bar */
.trustbar{ background:#fff; }
.trustbar__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px 48px;
  background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px) clamp(26px,3.5vw,44px);
}
.tbar-rate{ display:flex; align-items:center; gap:18px; }
.tbar-rate__score{ font-family:var(--font-display); font-weight:800; font-size:clamp(38px,4.4vw,52px); color:var(--navy); line-height:1; letter-spacing:-.02em; }
.tbar-rate__score span{ font-size:.5em; color:var(--muted); font-weight:700; }
.tbar-stars{ display:flex; gap:3px; color:var(--gold); }
.tbar-stars svg{ width:20px; height:20px; fill:var(--gold); stroke:var(--gold); }
.tbar-rate__sub{ color:var(--body); font-weight:700; font-size:14px; margin-top:5px; }
.tbar-rate__sub b{ color:var(--navy); }
.tbar-div{ width:1px; align-self:stretch; background:var(--line); }
.tbar-logos{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.tbar-logos__lbl{ font-weight:800; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-600); width:100%; }
.tbar-logos image-slot{
  display:block; width:118px; height:58px; border:1px solid var(--line-soft); border-radius:var(--r);
  background:#fff; filter:grayscale(1); opacity:.78; transition:filter .2s ease, opacity .2s ease;
}
.tbar-logos image-slot:hover{ filter:grayscale(0); opacity:1; }
@media (max-width:760px){
  .tbar-div{ display:none; }
  .trustbar__inner{ flex-direction:column; align-items:flex-start; }
}