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

/* ---------- Lokale Schriften (selbst gehostet, keine Google-Verbindung) ---------- */
@font-face{
  font-family:'Archivo';
  src:url('assets/fonts/Archivo.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('assets/fonts/CormorantGaramond.ttf') format('truetype');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Mulish';
  src:url('assets/fonts/Mulish.ttf') format('truetype');
  font-weight:200 1000; font-style:normal; font-display:swap;
}

:root{
  /* Brand */
  --navy:        #0c3a56;
  --navy-700:    #0f456a;
  --navy-900:    #062536;
  --navy-ink:    #0a2c41;
  --gold:        #2e7bb0;
  --gold-600:    #205c86;
  --gold-200:    #b9dcf2;
  /* secondary accent tokens repointed to warm gold to match the navy+gold identity */
  --green:       #2b6f9d;
  --green-bright:#3d92ce;
  --green-700:   #1f5b83;
  --green-100:   #e2f0fa;

  /* Neutrals (warm) */
  --cream:       #f3f7fb;
  --sand:        #e3ecf4;
  --paper:       #ffffff;
  --ink:         #16242e;
  --body:        #3f4f5a;
  --muted:       #6b7a85;
  --line:        #d9e4ee;
  --line-soft:   #e9f0f6;

  /* 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(61,146,206,.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); }
/* Sicherheitsnetz: jedes .i-Icon hat eine sinnvolle Standardgröße,
   damit ein fehlendes Kontext-Rule-Icon niemals riesig wird (300×150). */
svg.i{ width:18px; height:18px; flex:none; }

.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(61,146,206,.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(46,123,176,.6); animation:tbPulse 2s infinite; flex:none; }
@keyframes tbPulse{ 0%{ box-shadow:0 0 0 0 rgba(46,123,176,.55);} 70%{ box-shadow:0 0 0 8px rgba(46,123,176,0);} 100%{ box-shadow:0 0 0 0 rgba(46,123,176,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__wa{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14px; white-space:nowrap; flex:none; color:#fff; background:#25d366; border-radius:var(--r-pill); padding:9px 16px; box-shadow:0 3px 10px rgba(37,211,102,.32); transition:background .18s, box-shadow .18s; }
.nav__wa:hover{ background:#1eb954; box-shadow:0 5px 16px rgba(37,211,102,.42); }
.nav__wa svg{ width:17px; height:17px; color:#fff; }
.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(46,123,176,.10), transparent 55%),
    radial-gradient(80% 70% at 0% 0%, rgba(61,146,206,.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 full-bleed video ---- */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
.hero__slides{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--cream); }
.hero__slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.08); transition:opacity 1.6s ease, transform 8s ease; will-change:opacity, transform; }
.hero__slide.is-active{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion: reduce){ .hero__slide{ transition:opacity .01s linear; transform:none; } }
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(248,244,236,.97) 0%, rgba(248,244,236,.93) 32%, rgba(248,244,236,.55) 60%, rgba(248,244,236,.22) 100%),
    linear-gradient(0deg, rgba(248,244,236,.88) 0%, rgba(248,244,236,0) 34%);
}
.hero--video .hero__topo{ z-index:1; opacity:.5; }
.hero--video .wrap.hero__grid{ position:relative; z-index:2; }
.hero--video .hero__grid{ grid-template-columns:minmax(0,640px); }
/* floating personal photo card over the video */
.hero__card{
  position:absolute; z-index:2; margin:0;
  right:clamp(20px,5vw,72px); bottom:clamp(98px,11vw,156px);
  width:clamp(178px,18vw,236px);
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.hero__card img{ display:block; width:100%; aspect-ratio:4/3.5; object-fit:cover; object-position:64% 26%; }
.hero__card figcaption{ padding:12px 15px 13px; }
.hero__card figcaption b{ display:block; font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--navy); letter-spacing:-.01em; }
.hero__card figcaption small{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; font-weight:700; margin-top:3px; }
.hero__card figcaption small svg{ width:13px; height:13px; color:var(--green); flex:none; }
@media (max-width:760px){
  .hero__scrim{
    background:linear-gradient(0deg, rgba(248,244,236,.95) 0%, rgba(248,244,236,.8) 48%, rgba(248,244,236,.6) 100%);
  }
  .hero__card{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero__video{ display:none; }
}
.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; padding-bottom:0;
}
.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(46,123,176,.16), transparent 60%),
             radial-gradient(60% 60% at 0% 100%, rgba(61,146,206,.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(46,123,176,.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, .mapcard .photo-fixed{ display:block; width:100%; aspect-ratio: 5/5.6; }
.mapcard--banner .photo-fixed{ aspect-ratio: 3/2; }
.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(46,123,176,.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(46,123,176,.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(46,123,176,.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(46,123,176,.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__wa{ display:none; }
  .nav__burger{ display:inline-flex; margin-left:auto; }
  .trustband__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
  .trustcell{ flex:0 0 calc(33.33% - 14px); min-width:110px; max-width:180px; }
  .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{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
  .trustcell{ flex:0 0 calc(50% - 10px); max-width:160px; }
  .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{ display:none; }
.footer__topo{ display:none; }
.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, .panobreak .photo-fixed{ 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], img.photo-fixed{ 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(46,123,176,.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; }
}

/* ============================================================
   MOBILE OPTIMIERUNGEN — zusätzliche Breakpoints
   ============================================================ */

/* ---- herocta Banner: auf Mobile stapeln ---- */
@media (max-width:760px){
  .herocta__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    padding:clamp(26px,6vw,40px) clamp(20px,5vw,34px);
  }
  .herocta__text h2{ font-size:clamp(22px,5.5vw,30px); }
  .herocta__actions{ width:100%; flex-direction:column; gap:12px; }
  .herocta__actions .btn{ width:100%; justify-content:center; font-size:16px; padding:16px 20px; }
}

/* ---- Hero: Type-Selector Buttons ---- */
@media (max-width:640px){
  .hero__cta-inline{ gap:10px; }
  .hero__inline-lbl{ font-size:13px; }
  .hero__type-opts{ gap:8px; }
  .hero__topt{ font-size:13px; padding:10px 14px; flex:1 1 calc(50% - 8px); justify-content:center; }
  .hero__type-opts .btn{ width:100%; justify-content:center; margin-top:4px; }
  .hero__trust{ gap:8px 14px; }
}
@media (max-width:400px){
  .hero__topt{ flex:1 1 100%; }
}

/* ---- Hero Kicker & Lead ---- */
@media (max-width:640px){
  .hero__copy h1{ font-size:clamp(28px,8vw,40px); }
  .hero__lead{ font-size:16px; }
  .hero__card{ display:none; }
}

/* ---- Sektion-Padding global ---- */
@media (max-width:640px){
  .section{ padding-block:clamp(40px,8vw,60px); }
  .wrap{ padding-inline:18px; }
}

/* ---- Baugrund-Formular ---- */
@media (max-width:640px){
  .bgcard{ padding:20px 18px; }
  .bgcard__top{ flex-wrap:wrap; gap:10px; }
  .bgcard__badge{ font-size:11px; padding:6px 12px; }
  .bg-opt{ font-size:13px; padding:8px 12px; }
  .bg-optrow-lbl{ font-size:12px; }
  .bgstep h3{ font-size:18px; }
  .bgcard__foot{ flex-wrap:wrap; gap:10px; }
  .bgcard__foot .btn{ width:100%; justify-content:center; }
}

/* ---- Vergleichstabelle (Vergleich KI vs. Makler) ---- */
@media (max-width:480px){
  .vs-c{ padding:10px 8px; font-size:13px; }
  .vs-c--crit{ min-width:100px; }
}

/* ---- Ratgeber-Karten ---- */
@media (max-width:560px){
  .rgcard{ padding:20px 18px; }
}

/* ---- Referenzverkäufe ---- */
@media (max-width:560px){
  .refcard{ padding:18px; }
  .refcard__price b{ font-size:17px; }
}

/* ---- Espresso-Section ---- */
@media (max-width:640px){
  .espresso__motto{ font-size:clamp(24px,6vw,36px); }
  .espresso__actions{ flex-direction:column; gap:12px; }
  .espresso__actions .btn{ width:100%; justify-content:center; }
}

/* ---- Trust-Band ---- */
@media (max-width:480px){
  .trustband__cell span{ font-size:13px; }
  .trustband__cell svg{ width:20px; height:20px; }
}

/* ---- Final CTA ---- */
@media (max-width:560px){
  .finalcta .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   MOBILE OPTIMIERUNG — Comprehensive
   ============================================================ */

/* Hero: Buttons stapeln + kleinere Pills */
@media (max-width:560px){
  .hero__actions{ flex-direction:column; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .hero__diffs{ gap:8px; }
  .hero__diff{ font-size:12.5px; padding:7px 12px; }
  .hero__locs span, .hero__locs a{ font-size:11px; padding:5px 10px; }
  .hero__claim{ font-size:18px; }
  .hero__tipp{ gap:11px; padding:11px 13px; margin-top:16px; }
  .hero__tipp-badge{ width:40px; height:40px; font-size:14px; }
  .hero__tipp-txt{ font-size:12.5px; }
  .hero__tipp-arrow{ display:none; }
}

/* herocta: Buttons stapeln */
@media (max-width:560px){
  .herocta__actions{ flex-direction:column; width:100%; }
  .herocta__actions .btn{ width:100%; justify-content:center; }
}

/* Stadt-Seiten mobile */
@media (max-width:560px){
  .city-cta__actions{ flex-direction:column; align-items:stretch; }
  .city-cta__actions .btn{ width:100%; justify-content:center; }
  .bg-price-strip{ flex-direction:column; gap:10px; }
  .ic-grid{ grid-template-columns:1fr; }
  .price-grid{ grid-template-columns:1fr; }
  .best-grid{ grid-template-columns:1fr; }
  .wt-chart{ height:120px; gap:5px; }
  .wt-meta{ flex-direction:column; }
}

/* Footer: kompakter */
@media (max-width:560px){
  .footer ul{ gap:8px; }
  .footer ul a{ font-size:14px; }
  .footer__about{ max-width:100%; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Legal: Sidebar ausblenden */
@media (max-width:720px){
  .legal__grid{ grid-template-columns:1fr; }
  .legal__toc{ display:none; }
}

/* Sehr enge Screens */
@media (max-width:400px){
  .section{ padding-block:clamp(36px,8vw,56px); }
  .btn{ white-space:normal; text-align:center; }
  .hero h1{ font-size:clamp(30px,9vw,42px); }
  .city-hero h1{ font-size:clamp(28px,9vw,40px); }
  .trustband__inner{ padding:24px 16px; }
}

/* Steps auf kleinen Screens */
@media (max-width:480px){
  .steps__grid{ grid-template-columns:1fr; }
}

/* Bewertungsformular: Optionen bei sehr kleinem Screen */
@media (max-width:380px){
  .opt-grid{ grid-template-columns:repeat(2,1fr); }
  .opt{ padding:12px 6px; font-size:13px; }
}

/* ---- Footer ---- */
@media (max-width:640px){
  .footer__nav{ gap:10px; }
  .footer__copy{ font-size:13px; }
}

/* ---- Mobile Menü: Baugrund-Bewertung Eintrag ---- */
@media (max-width:820px){
  .mobile-menu__panel a{ min-height:44px; display:flex; align-items:center; }
}

/* ---- Allgemein: bessere Touch-Targets ---- */
@media (max-width:820px){
  .btn{ min-height:48px; }
  input.inp, select.inp{ font-size:16px; min-height:48px; }
  textarea.inp{ font-size:16px; }
}

/* ===== Fixed baked photos (replaced editor image-slots) ===== */
img.photo-fixed{ display:block; width:100%; object-fit:cover; }
.photo-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:7px; color:var(--muted); font-weight:600; font-size:12.5px;
  line-height:1.3; text-align:center; padding:12px; box-sizing:border-box; }
.photo-ph svg{ opacity:.5; }
.photo-ph span{ max-width:92%; }
.tbar-logos .photo-ph{ position:static; width:118px; height:58px; border:1px solid var(--line-soft);
  border-radius:var(--r); background:#fff; }
.tbar-logos .photo-ph span{ display:none; }
.photo-link{ position:absolute; inset:0; display:block; overflow:hidden; cursor:pointer; }
.photo-link .photo-fixed{ transition:transform .45s ease; }
.photo-link:hover .photo-fixed{ transform:scale(1.05); }

/* ============================================================
   MOBILE OPTIMIERUNG v2 — gezielte Nachbesserungen
   ============================================================ */

/* 1. Header: CTA-Button auf Mobile ausblenden — verhindert Überlauf */
@media (max-width: 820px){
  .nav__cta{ display: none; }
}

/* 2. Ablauf-Schritte (3-Spalten-Inline-Grid) → 1 Spalte auf Phones */
@media (max-width: 640px){
  .ablauf-steps-grid{
    grid-template-columns: 1fr !important;
  }
}

/* 3. Mobile Menü: Telefon-Link */
.mm-phone{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  color: var(--navy);
  padding: 12px 8px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
}
.mm-phone svg{ width: 18px; height: 18px; color: var(--gold); flex: none; }

/* 4. Hero: Standort-Chips auf sehr engen Screens ausblenden */
@media (max-width: 360px){
  .hero__locs{ display: none; }
}

/* 5. Topbar auf sehr kleinen Screens: Text kürzen */
@media (max-width: 400px){
  .topbar .topbar__text{ font-size: 12px; }
  .topbar__arrow{ display: none; }
}

/* 6. Hero-Claim-Text + Lead etwas kompakter auf < 400px */
@media (max-width: 400px){
  .hero__claim{ font-size: 17px; }
  .hero__lead{ font-size: 15px; margin-top: 14px; }
  .hero__diffs{ margin-top: 20px; gap: 8px; }
  .hero__diff{ font-size: 12.5px; padding: 7px 12px; }
}

/* 7. Footer-Kontakt: E-Mail-Adresse umbrechbar machen */
@media (max-width: 400px){
  .footer__contact .info-list a,
  .footer__contact li{ word-break: break-all; }
  .footer ul a{ word-break: break-word; }
}

/* 8. Trustband Rechner-Zellen: 2 pro Zeile auf sehr schmalen Screens */
@media (max-width: 420px){
  .trustcell{ flex: 0 0 calc(50% - 8px) !important; max-width: 160px !important; }
}

/* 9. zr-result: verhindert Überlauf der Monatsrate */
@media (max-width: 420px){
  .zr-result{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .zr-result__v{ font-size: clamp(26px, 7vw, 36px); }
}

/* 10. Espresso-Aktion-Buttons: volle Breite auf Phone */
@media (max-width: 560px){
  .espresso__actions .btn{ width: 100%; justify-content: center; }
}

/* 11. Valuation card: opt-grid 2-spaltig schon ab 500px */
@media (max-width: 500px){
  .opt-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* 12. herocta Doppel-Banner: innere Buttons voll breit */
@media (max-width: 480px){
  .herocta__actions{ flex-direction: column; }
  .herocta__actions .btn{ width: 100%; justify-content: center; }
}

/* 13. Zinsrechner-Karte: Padding reduzieren */
@media (max-width: 400px){
  .zr-card{ padding: 18px 16px; }
  .zr-foot{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .zr-foot .btn{ width: 100%; justify-content: center; }
}

/* WA-Chip im Hero */
.hero__diff--wa{ color:#0f7a3d; border-color:rgba(37,211,102,.55) !important; background:rgba(37,211,102,.08) !important; text-decoration:none; transition:background .18s ease, box-shadow .18s ease, transform .18s ease; }
.hero__diff--wa:hover{ background:rgba(37,211,102,.16) !important; box-shadow:0 6px 16px rgba(37,211,102,.28); transform:translateY(-2px); }
.hero__diff--wa svg{ color:#25d366; }

/* Rechner-Hero mit See-Slideshow */
.page-hero.has-slideshow{ border-bottom:none; }
.page-hero.has-slideshow::before{ display:none; }
.hero-slides{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--navy-900); }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.07); transition:opacity 1.6s ease, transform 7.5s ease; }
.hero-slide.is-active{ opacity:1; transform:scale(1); }
.hero-slides::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(6,37,54,.62) 0%, rgba(6,37,54,.40) 42%, rgba(6,37,54,.12) 72%, rgba(6,37,54,.04) 100%), linear-gradient(180deg, rgba(6,37,54,0) 55%, rgba(6,37,54,.34) 100%); }
.page-hero.has-slideshow > .wrap{ position:relative; z-index:1; }
.page-hero.has-slideshow .page-hero__crumb{ color:#c6d5de; }
.page-hero.has-slideshow .page-hero__crumb a{ color:var(--gold-200); }
.page-hero.has-slideshow .eyebrow{ color:var(--gold-200); }
.page-hero.has-slideshow .eyebrow::before{ background:var(--gold-200); }
.page-hero.has-slideshow h1{ color:#fff; }
.page-hero.has-slideshow p{ color:#dbe7ee; }
/* Geschwungener Übergang Hero → erster (navy) Block auf Rechner-Seiten */
.page-hero.has-slideshow:has(.hero-wave){ padding-bottom:clamp(72px,10vw,120px); }
.page-hero.has-slideshow .hero-wave{ position:absolute; left:0; right:0; bottom:-1px; z-index:2; line-height:0; pointer-events:none; }
.page-hero.has-slideshow .hero-wave svg{ display:block; width:100%; height:clamp(34px,5vw,72px); }
.page-hero.has-slideshow .hero-wave path{ fill:var(--navy-900); }
@media (max-width:720px){
  .hero-slides::after{ background:linear-gradient(180deg, rgba(6,37,54,.12) 0%, rgba(6,37,54,.06) 45%, rgba(6,37,54,.40) 100%); }
}
@media (prefers-reduced-motion: reduce){ .hero-slide{ transition:opacity .01s linear; transform:none; } }

/* Angebots-Spalten mobil ohne Leerzeile zwischen den Blöcken */
@media (max-width:900px){
  .swolke-split{ gap:0 !important; }
}

/* 14. Globale Mobil-Absicherung (alle Seiten) */
/* CTA mit Foto (wa-cta) — global, damit alle Seiten identisch rendern */
.wa-cta{ background:#fff; }
.wa-cta__card{ display:grid; grid-template-columns:1fr 1.05fr; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.wa-cta__photo{ position:relative; min-height:340px; }
.wa-cta__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.wa-cta__body{ padding:clamp(30px,4vw,52px); }
.wa-cta__ic{ width:60px; height:60px; border-radius:16px; background:var(--navy-900); color:var(--gold-200); display:grid; place-items:center; margin-bottom:22px; }
.wa-cta__ic svg{ width:30px; height:30px; }
.wa-cta__body h2{ color:var(--navy); }
.wa-cta__body p{ color:var(--body); font-size:18px; line-height:1.62; margin-top:16px; max-width:44ch; }
.wa-cta__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
@media (max-width:860px){ .wa-cta__card{ grid-template-columns:1fr; } .wa-cta__photo{ min-height:280px; } }

html, body{ overflow-x: clip; max-width: 100%; }
img, video{ max-width: 100%; height: auto; }
@media (max-width: 560px){
  h1, h2, h3{ overflow-wrap: anywhere; }
  .btn{ white-space: normal; text-align: center; }
  .sec-head p, .zins__intro p, .erbtease__lead{ max-width: 100%; }
}
@media (max-width: 400px){
  .wrap{ padding-inline: 16px; }
  .astep__wm{ font-size: 68px; }
}

/* ============================================================
   VEREDELUNG — Optik-Effekte (global)
   ============================================================ */

/* 1) Navbar-Glas — weicher Blur beim Scrollen */
.site-header{ -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px); }
.site-header.is-shrink{ -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); }

/* 2) Reveal — feiner Blur-in zusätzlich zum Fade/Slide */
.reveal{ filter:blur(6px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ filter:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ filter:none; } }

/* 3) Ken-Burns — langsames Zoomen/Schwenken auf Schlüsselbildern */
.hero__card img, .erbtease__photo img, .about__frame img{ animation:kenburns 22s ease-in-out infinite alternate; will-change:transform; }
@keyframes kenburns{ 0%{ transform:scale(1) translate(0,0); } 100%{ transform:scale(1.07) translate(-1.4%, -1.2%); } }
@media (prefers-reduced-motion: reduce){ .hero__card img, .erbtease__photo img, .about__frame img{ animation:none; } }

/* 4) Lese-Fortschritt — dünne Goldleiste oben */
.read-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:2147482000; background:linear-gradient(90deg, var(--gold-600), var(--gold), var(--gold-200)); box-shadow:0 0 10px rgba(46,123,176,.5); transition:width .1s linear; pointer-events:none; }

/* 5) Korn-Textur — hauchfeines Grain über der ganzen Seite */
body::after{ content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.035; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 6) Tilt/Parallax — subtile 3D-Neigung */
.tilt3d{ transform-style:preserve-3d; transition:transform .18s ease; will-change:transform; }

/* 7) Karten-Hover-Veredelung + Gold-Rahmen-Schimmer */
.rgcard, .refcard, .relcard, .herocta__inner{ transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease; }
.rgcard:hover, .refcard:hover, .relcard:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(8,38,56,.14); }
@media (prefers-reduced-motion: reduce){ .tilt3d{ transform:none !important; } }

/* ============================================================
   HEADER-NAV FIX — Burger bis zum Passen der Desktop-Navi (~1043px)
   Behebt: 821–1043px zeigte Navi UND Burger gleichzeitig → Überlauf,
   rechte Navi-Links abgeschnitten (overflow-x:clip). Burger sonst
   fälschlich immer sichtbar (.iconbtn{display:grid} überschrieb .nav__burger).
   ============================================================ */
.iconbtn.nav__burger{ display:none; }
@media (max-width: 1060px){
  .nav__links{ display:none; }
  .nav__phone{ display:none; }
  .nav__cta{ display:none; }
  .iconbtn.nav__burger{ display:inline-flex; margin-left:auto; }
}

/* Badekarte Kochelsee: auf Mobile einspaltig stapeln */
@media (max-width: 820px){
  .badekarte__grid{ grid-template-columns:1fr !important; }
  .badekarte__grid > div:first-child{ min-height:340px; }
  .badekarte__grid #dogMap{ min-height:340px; }
  .badekarte__routes{ grid-template-columns:1fr !important; }
}

/* Hunde-Ratgeber: Rechte-Grid auf Mobile einspaltig (Inline-Style überschreiben) */
@media (max-width: 1000px){
  .hundfaq__grid{ grid-template-columns:1fr !important; }
  .hundfaq__grid > div:first-child{ position:static !important; }
}




/* ============================================================
   Mobile-Feinschliff (global, alle Seiten)
   ============================================================ */
@media (max-width: 760px){
  .page-hero, .fehler-hero, .city-hero{ padding-block: clamp(34px,8vw,58px) clamp(44px,10vw,72px); }
  .fehler-hero__actions, .city-cta__actions, .wa-cta__actions,
  .erb-cta__actions, .kiv-hero__actions, .waltease__actions, .erbtease__actions,
  .finalcta__actions, .fehler-promise__actions{
    flex-direction: column; align-items: stretch; width: 100%;
  }
  .fehler-hero__actions .btn, .city-cta__actions .btn, .wa-cta__actions .btn,
  .erb-cta__actions .btn, .kiv-hero__actions .btn, .waltease__actions .btn,
  .erbtease__actions .btn, .finalcta__actions .btn, .fehler-promise__actions .btn{
    width: 100%; justify-content: center; min-height: 52px;
  }
  .sec-head h2, h2{ overflow-wrap: anywhere; }
  table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .info-list a, .footer a{ min-height: 40px; display: inline-flex; align-items: center; }
  iframe, .map-static, .contact-map{ max-width: 100%; }
}
@media (max-width: 560px){
  .wrap{ padding-inline: 18px; }
  .sec-head p{ font-size: 16px; }
  .eyebrow{ font-size: 11px; letter-spacing: .12em; }
  .lakelist{ gap: 8px; }
  .lake{ font-size: 14px; }
}
@media (max-width: 400px){
  .btn{ font-size: 15px; padding-inline: 18px; }
  .btn--lg{ font-size: 15.5px; padding: 15px 20px; }
}



/* Info-Zeile unter der Navigation */
.headerbar{ border-top:1px solid var(--line-soft); background:linear-gradient(180deg,#fbfcfd,#f4f7fa); }
.headerbar__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 26px; padding-block:10px; }
.headerbar__item{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:9px; font-family:inherit; font-size:14.5px; font-weight:700; color:var(--navy-ink); text-decoration:none; letter-spacing:-.01em; }
.headerbar__item svg{ width:14px; height:14px; stroke-width:1.4; color:var(--gold-600); flex:none; }
.headerbar__item + .headerbar__item{ position:relative; }
.headerbar__item + .headerbar__item::before{ content:""; position:absolute; left:-13px; top:50%; width:1px; height:13px; margin-top:-6.5px; background:var(--line); }
a.headerbar__item:hover{ color:var(--gold-600); }
@media (max-width:760px){
  .headerbar__in{ gap:3px 16px; padding-block:8px; }
  .headerbar__item + .headerbar__item::before{ display:none; }
  .headerbar__item{ font-size:12.5px; }
  .headerbar__item:last-child{ display:none; }
  /* Kopfzeile mobil: Name in Zeile 1, Adresse in Zeile 2 */
  .hb-loc{ width:100%; justify-content:center; row-gap:1px; column-gap:7px; text-align:center; }
  .hb-sep{ display:none; }
  .hb-addr{ flex:0 0 100%; font-weight:600; }
}




/* ============================================================
   KI-Garantie — Mobile-Feinschliff
   ============================================================ */
@media (max-width: 760px){
  .kigar__grid{ gap:28px !important; }
  .kigar__lead{ max-width:100% !important; font-size:16px !important; }
  .kigar__actions{ flex-direction:column; align-items:stretch; }
  .kigar__actions .btn{ width:100%; justify-content:center; }
  .kigar__cols{ grid-template-columns:1fr !important; gap:16px !important; }
  .kigar-col{ padding:24px 20px !important; }
  .kigar-col__hd b{ font-size:20px !important; }
  .kigar-col__foot a{ min-height:44px; align-items:center; }
  .gar-hero__grid{ gap:28px !important; }
  .gar-hero__actions{ flex-direction:column; align-items:stretch; }
  .gar-hero__actions .btn{ width:100%; justify-content:center; }
  .gar-grid{ grid-template-columns:1fr !important; gap:16px !important; }
  .garcard{ padding:26px 22px !important; }
  .promise{ padding:26px 22px !important; }
  .promise p.promise__title{ font-size:21px !important; }
  .gar-chips{ gap:8px !important; }
  .gar-chip{ font-size:14px !important; padding:10px 15px !important; }
}
@media (max-width: 420px){
  .kigar__proof li{ font-size:14.5px !important; }
  .kigar-col li{ grid-template-columns:22px 1fr !important; gap:10px !important; }
  .kigar-col li b{ font-size:15.5px !important; }
  .kigar-col li p{ font-size:13.5px !important; }
  .kigar__note p{ font-size:13.5px !important; }
  .garcard h3{ font-size:19px !important; }
  .garcard p{ font-size:14.5px !important; }
  .promise ul li{ font-size:14.5px !important; }
}