:root {
  color-scheme:dark;
  --sea:#082432;
  --text:#f6fbfc;
  --muted:#d3e1e7;
  --line:#ffffff35;
  --font:'Albert Sans',sans-serif;
  --display:'Bricolage Grotesque',sans-serif}
* {
  box-sizing:border-box}
html {
  background:var(--sea)}
body {
  margin:0;
  color:var(--text);
  font-family:var(--font);
  line-height:1.5;
  isolation:isolate}
button,input,select {
  font:inherit}
button,a,select {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer}
a {
  color:inherit}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #e6b571;
  outline-offset:4px}
button:disabled {
  cursor:wait;
  opacity:.6}
[hidden] {
  display:none!important}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0}
.ambient {
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:var(--sea) url('assets/coast-poster.jpg') center/cover no-repeat}
.ambient video {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center}
.ambient-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#08243255 0%,#08243238 15%,#082432c4 38%,#082432ed 67%,#082432 100%)}
.ambient.intro-motion {
  animation:coast-expand 1s cubic-bezier(.2,.7,.15,1) both}
@keyframes coast-expand {
  from {
  clip-path:inset(10% max(14%,calc((100vw - 430px)/2)) 54% round 24px)}
to {
  clip-path:inset(0 round 0)}
}
.stage {
  width:100%;
  max-width:440px;
  min-height:100svh;
  margin:auto;
  padding:0 24px max(12px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column}
.topbar {
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:env(safe-area-inset-top)}
.wordmark {
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  font-size:20px;
  letter-spacing:3px;
  font-weight:700}
.wordmark img {
  object-fit:contain;
  filter:brightness(0) invert(1)}
.language-switch select {
  color:white;
  background:#123547b0;
  border:1px solid #ffffff70;
  border-radius:30px;
  padding:8px 10px;
  font-size:12px;
  min-height:38px}
.language-switch option {
  background:#123547;
  color:white}
.scenery {
  height:clamp(46px,calc(100svh - 630px),140px);
  flex-shrink:0;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding-top:3px}
.video-toggle {
  width:38px;
  height:38px;
  display:grid;
  place-content:center;
  color:white;
  background:#12354760;
  border:1px solid #ffffff70;
  border-radius:50%}
.video-toggle .pause-icon {
  display:none}
.video-toggle.playing .play-icon {
  display:none}
.video-toggle.playing .pause-icon {
  display:block}
.place {
  font-size:12px;
  color:var(--muted);
  margin:0 0 10px}
.intro h1 {
  font-family:var(--display);
  font-size:clamp(33px,9.6vw,40px);
  font-weight:500;
  line-height:1.07;
  letter-spacing:-1.4px;
  margin:0 0 13px}
.intro-description {
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 21px}
.call-card {
  border-top:1px solid var(--line);
  padding-top:16px}
.live-badge {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  margin-bottom:8px}
.live-dot {
  height:6px;
  width:6px;
  border-radius:50%;
  background:#e6b571;
  flex-shrink:0}
.call-card h2 {
  font-size:21px;
  font-weight:600;
  letter-spacing:-.4px;
  line-height:1.2;
  margin:0 0 6px}
.call-description {
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 14px}
.cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:50px;
  padding:12px 14px;
  border:0;
  border-radius:12px;
  text-decoration:none;
  text-align:center;
  font-size:14px;
  font-weight:700;
  line-height:1.35}
.cta-primary {
  background:#f4fbfd;
  color:#133747}
.cta-primary:hover {
  background:#dceef4}
.person {
  padding:0;
  margin:19px 0 13px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  color:inherit;
  background:none;
  border:0;
  min-height:44px}
.person img {
  width:42px;
  height:42px;
  object-fit:cover;
  object-position:center 28%;
  border-radius:50%;
  background:#d8e4e8;
  flex-shrink:0}
.person>span {
  flex:1}
.person strong {
  display:block;
  font-size:13px;
  font-weight:600}
.person span span {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:2px}
.person>svg {
  flex-shrink:0}
.quick-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px}
.secondary {
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-align:center;
  border:1px solid #ffffff65;
  background:#ffffff08;
  border-radius:10px;
  color:inherit;
  min-height:46px;
  padding:9px;
  font-size:13px;
  line-height:1.3}
.secondary:hover {
  background:#ffffff18}
.consultation {
  background:none;
  border:0;
  color:var(--muted);
  font-size:12px;
  min-height:36px;
  align-self:center;
  padding:8px 5px;
  text-decoration:underline;
  text-underline-offset:3px}
.follow {
  margin-top:3px}
.follow-label {
  display:none}
.socials {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  gap:13px}
.socials a {
  min-height:36px;
  min-width:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted)}
.socials a:hover {
  color:white}
.socials span {
  display:none}
.socials svg {
  width:19px;
  height:19px}
.footer {
  margin-top:auto;
  padding-top:9px}
.legal {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  margin:0;
  font-size:10px;
  color:#bed0d8}
.legal a {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  text-underline-offset:3px}
.legal #year {
  margin-right:-6px}
.sheet {
  color-scheme:light;
  position:fixed;
  width:min(480px,calc(100% - 24px));
  max-height:calc(100dvh - 32px);
  max-height:calc(100svh - 32px);
  padding:28px;
  border:1px solid #fff8;
  border-radius:22px;
  background:#f8fbfc;
  color:#183641;
  box-shadow:0 24px 80px #0005;
  overflow-y:auto;
  overscroll-behavior:contain}
.sheet::backdrop {
  background:#031b28b8;
  backdrop-filter:blur(6px)}
body:has(dialog[open]) {
  overflow:hidden}
.sheet-close {
  position:sticky;
  float:right;
  top:0;
  z-index:1;
  background:#e8f0f3;
  color:#214757;
  border:0;
  border-radius:50%;
  width:38px;
  height:38px;
  font-size:24px;
  line-height:1}
.sheet-kicker {
  font-size:12px;
  color:#58717b;
  margin:8px 44px 16px 0}
.sheet h2 {
  font-family:var(--display);
  font-weight:500;
  font-size:29px;
  line-height:1.15;
  letter-spacing:-.7px;
  margin:12px 0}
.sheet h2 em {
  font-style:normal}
.sheet .lead {
  font-size:14px;
  color:#526c77;
  line-height:1.5;
  margin:0 0 18px}
.field {
  margin:13px 0}
.field label {
  display:block;
  font-size:13px;
  font-weight:500;
  margin-bottom:6px}
.req {
  color:#8f403a}
.field input,.field select {
  width:100%;
  min-height:46px;
  border:1px solid #c3d3dc;
  background:white;
  color:#163746;
  border-radius:9px;
  padding:10px 12px;
  font-size:16px}
.field input:focus {
  border-color:#36728d}
.phone-row {
  display:flex;
  gap:8px}
.phone-row select {
  width:108px;
  flex-shrink:0}
.phone-row input {
  min-width:0}
.signup-trap {
  position:absolute;
  left:-9999px;
  opacity:0;
  pointer-events:none}
.consent-row {
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:12px;
  line-height:1.5;
  margin:18px 0}
.consent-row input {
  width:17px;
  height:17px;
  margin:1px 0 0;
  flex-shrink:0;
  accent-color:#1c5975}
.sheet .cta-primary {
  background:#1c5975;
  color:#fff}
.sheet .cta-primary:hover {
  background:#17485e}
.sheet .cta svg {
  display:none}
#signup-status {
  font-size:14px;
  margin:12px 0;
  line-height:1.5}
#signup-status:empty {
  display:none}
.form-note {
  display:flex;
  gap:7px;
  align-items:start;
  font-size:11px;
  line-height:1.5;
  color:#526c77;
  margin-bottom:0}
.form-note svg {
  flex-shrink:0;
  margin-top:2px}
.registration-notice {
  border-top:1px solid #cedce2;
  margin-top:18px;
  padding-top:12px;
  font-size:12px;
  color:#526c77}
.registration-notice summary {
  cursor:pointer;
  min-height:32px;
  display:list-item}
.registration-notice p {
  line-height:1.6}
.about {
  padding-top:8px}
.eyebrow {
  font-size:12px;
  color:#526c77}
.about-text,.v-card p {
  font-size:14px;
  color:#526c77}
.broker {
  margin:20px 0;
  display:flex;
  align-items:center;
  gap:15px}
.broker-photo img {
  width:80px;
  height:95px;
  object-fit:cover;
  border-radius:12px}
.broker-name,.broker-role {
  display:block;
  font-size:13px}
.broker-role {
  font-size:12px;
  color:#526c77;
  margin-top:4px}
.v-list {
  list-style:none;
  padding:0;
  display:grid;
  gap:14px}
.v-card {
  display:flex;
  gap:13px}
.v-icon {
  flex-shrink:0;
  color:#2f6fb3;
  padding-top:2px}
.v-card h3 {
  font-size:16px;
  margin:0 0 4px}
.v-card p {
  margin:0}
.sheet #vorteile-heading {
  font-size:25px}
@media(min-width:760px) {
  .ambient-overlay {
  background:linear-gradient(90deg,#08243222,#08243244 30%,#08243244 70%,#08243222),linear-gradient(180deg,#08243240 0%,#08243255 18%,#082432c9 42%,#082432f2 85%)}
.stage {
  max-width:470px;
  padding-left:30px;
  padding-right:30px}
.topbar {
  min-height:90px}
.intro h1 {
  font-size:44px}
}
@media(max-height:700px) {
  .topbar {
  min-height:62px}
.scenery {
  height:38px}
.intro h1 {
  font-size:33px}
.intro-description {
  margin-bottom:16px}
.person {
  margin-top:15px}
.footer {
  padding-top:4px}
}
@media(max-width:360px) {
  .stage {
  padding-left:18px;
  padding-right:18px}
.intro h1 {
  font-size:33px}
.socials {
  gap:10px}
.sheet {
  padding:22px}
.call-card h2 {
  font-size:20px}
.cta {
  font-size:13px}
.person strong {
  font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation:none!important;
  scroll-behavior:auto!important}
}
@media(prefers-reduced-transparency:reduce) {
  .sheet::backdrop {
  backdrop-filter:none;
  background:#082432ee}
}


.consent-row a { display: inline-block; }

/* The same content follows a compact mobile flow and a wider desktop layout. */
.hero-layout,
.contact-panel { display: contents; }
.desktop-more { display: none; }
.secondary { gap: 8px; }
.secondary svg { flex-shrink: 0; }
.whatsapp-direct {
  color: #bdf8d2;
  background: #16794348;
  border-color: #58d48b9c;
}
.whatsapp-direct svg { color: #79eaa2; }
.whatsapp-direct:hover { background: #16794385; }

@media (min-width: 1024px) {
  .stage {
    max-width: 1220px;
    padding: 0 40px 16px;
  }
  .topbar { min-height: 90px; }
  .wordmark { font-size: 27px; gap: 12px; }
  .wordmark img { width: 38px; height: 38px; }
  .language-switch select { min-height: 44px; font-size: 14px; padding: 10px 14px; }
  .scenery { position: relative; height: 24px; }
  .scenery .video-toggle { position: absolute; right: 0; top: 2px; }
  .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(44px, 6vw, 88px);
    align-items: center;
    margin: auto 0;
    padding: 28px 0;
  }
  .intro .place { font-size: 15px; margin-bottom: 19px; }
  .intro h1 {
    font-size: clamp(52px, 4.5vw, 70px);
    letter-spacing: -2.5px;
    line-height: 1.04;
    margin-bottom: 25px;
  }
  .intro-description { display: none; }
  .desktop-more { display: block; }
  .desktop-introduction {
    font-size: 18px;
    line-height: 1.65;
    color: #e1edf1;
    max-width: 550px;
    margin: 0 0 30px;
  }
  .service-points { margin: 0; display: grid; gap: 18px; }
  .service-points > div { border-left: 2px solid #9bbdcb7a; padding-left: 17px; }
  .service-points dt { font-size: 16px; font-weight: 600; margin-bottom: 3px; }
  .service-points dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 440px; }
  .contact-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px;
    background: #082432c9;
    border: 1px solid #adc8d52b;
    border-radius: 24px;
    box-shadow: 0 18px 60px #04192322;
  }
  .call-card { border-top: 0; padding-top: 0; }
  .live-badge { font-size: 13px; margin-bottom: 14px; }
  .call-card h2 { font-family: var(--display); font-size: 32px; line-height: 1.12; font-weight: 500; margin-bottom: 15px; }
  .call-description { display: none; }
  .call-introduction { font-size: 16px; color: var(--muted); line-height: 1.55; margin: 0 0 18px; }
  .hero-bullets { list-style: none; padding: 0; margin: 0 0 22px; }
  .hero-bullets li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.5; margin-bottom: 7px; }
  .hero-bullets li::before { content: '✓'; color: #a7cbdc; flex-shrink: 0; }
  .contact-panel .cta { min-height: 54px; font-size: 15px; }
  .person { margin: 21px 0 16px; gap: 12px; }
  .person img { width: 48px; height: 48px; }
  .person strong { font-size: 14px; }
  .person span span { font-size: 12px; }
  .secondary { font-size: 14px; min-height: 48px; }
  .consultation { font-size: 13px; min-height: 40px; }
  .follow { margin-top: 4px; }
  .socials { gap: 22px; }
  .socials svg { width: 21px; height: 21px; }
  .footer { margin-top: 0; padding-top: 12px; }
  .legal { font-size: 12px; gap: 4px 12px; }
  .ambient-overlay {
    background: linear-gradient(180deg, #08243250, #08243255 12%, #082432c4 44%, #082432ed 90%), linear-gradient(90deg, #08243240, transparent);
  }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .topbar { min-height: 74px; }
  .hero-layout { padding: 14px 0; gap: 52px; }
  .intro h1 { font-size: 54px; margin-bottom: 20px; }
  .desktop-introduction { font-size: 17px; margin-bottom: 24px; }
  .service-points { gap: 14px; }
  .contact-panel { padding: 24px; }
  .call-introduction { font-size: 15px; margin-bottom: 14px; }
  .hero-bullets { margin-bottom: 16px; }
  .person { margin: 17px 0 13px; }
}

/* Short, non-repeating movement keeps the topic chips readable. */
.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 30px;
  list-style: none;
}
.feature-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #b8d5dc50;
  border-radius: 30px;
  background: #16485980;
  font-size: 13px;
  line-height: 1.4;
  animation: chip-float 4s ease-in-out 1;
}
.feature-chips li > :first-child { color: #b8dce6; flex-shrink: 0; }
.feature-chips li:first-child > :first-child { color: #eed299; }
.feature-chips li:nth-child(2) { animation-delay: .2s; }
.feature-chips li:nth-child(3) { animation-delay: .4s; }
.feature-chips li:nth-child(4) { animation-delay: .6s; }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (max-width: 1023px) {
  .scenery { height: clamp(42px, 6svh, 56px); }
}
@media (min-width: 1024px) {
  .hero-layout { align-items: start; }
  .intro { padding-top: 12px; }
  .desktop-introduction { margin-bottom: 22px; }
  .call-card:has(.inline-signup .signup-form) > [data-open-signup] { display: none; }
  .call-card .hero-bullets { display: none; }
  .call-introduction { font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
  .inline-signup .sheet-kicker,
  .inline-signup #signup-heading,
  .inline-signup .lead { display: none; }
  .inline-signup .signup-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
  .inline-signup .field { margin: 0; min-width: 0; }
  .inline-signup .field:nth-child(3) { grid-column: 1 / -1; }
  .inline-signup .field label { font-size: 12px; margin-bottom: 5px; }
  .inline-signup .req { color: #e5b9aa; }
  .inline-signup .field input,
  .inline-signup .field select { min-height: 43px; padding: 9px 11px; }
  .inline-signup .consent-row,
  .inline-signup .cta,
  .inline-signup #signup-status,
  .inline-signup .form-note { grid-column: 1 / -1; }
  .inline-signup .consent-row { margin: 2px 0; color: #d5e5ec; font-size: 11px; }
  .inline-signup .consent-row input { accent-color: #1c5975; }
  .inline-signup .cta { min-height: 49px; font-size: 14px; }
  .inline-signup .form-note { margin: 0; color: #c6dbe4; font-size: 10px; }
  .inline-signup #signup-status { margin: 0; }
  .inline-signup .registration-notice { margin-top: 10px; padding-top: 8px; color: #c6dbe4; font-size: 11px; border-color: #afc9d438; }
  .inline-signup .registration-notice summary { min-height: 26px; }
  .contact-panel .person { margin-top: 15px; }
}

/* Reassurance stays visible before starting and completing signup. */
.call-reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #83d9ad55;
  border-radius: 10px;
  background: #164f3ae0;
  color: #e1ffec;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.call-reassurance > span { color: #9cf0bf; flex-shrink: 0; }
.call-reassurance strong { font-weight: 650; }
@media (min-width: 1024px) {
  .call-card:has(.inline-signup .signup-form) > .call-reassurance { display: none; }
  .inline-signup .call-reassurance { margin: 0 0 14px; }
}