:root{
  --bg:#06384D;
  --surface:#084A66;
  --raised:#0A526D;
  --deep:#052F40;
  --border:#17617D;
  --border-soft:#12556F;
  --text:#F3F3F3;
  --secondary:#C2CDD2;
  --muted:#8FAAB5;
  --accent:#FCD535;
  --accent-text:#10212A;
  --max:1160px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:
    radial-gradient(circle at 84% 8%,rgba(23,97,125,.28),transparent 26rem),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
}

.wrap{
  width:min(var(--max),calc(100% - 48px));
  margin:0 auto;
}

.site-header{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-size:15px;
  line-height:1;
  font-weight:900;
  letter-spacing:.32em;
}

.brand-mark{
  width:31px;
  height:31px;
  border:1px solid var(--secondary);
  border-radius:52% 48% 55% 45%;
  display:inline-block;
  position:relative;
  opacity:.85;
}

.brand-mark:after{
  content:"";
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:13px;
  height:13px;
  border:1px solid var(--secondary);
  border-radius:50%;
  background:var(--bg);
}

nav{
  display:flex;
  gap:26px;
  align-items:center;
  flex-wrap:wrap;
}

nav a,
.footer a{
  color:var(--secondary);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
}

nav a:hover,
.footer a:hover{
  color:var(--accent);
}

.hero{
  min-height:auto;
  padding:58px 0 105px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(330px,.72fr);
  align-items:center;
  gap:72px;
}

.kicker{
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:18px;
}

h1,
h2,
h3,
p{
  margin-top:0;
}

h1{
  margin-bottom:0;
  font-size:clamp(56px,7.6vw,104px);
  line-height:.94;
  letter-spacing:-.06em;
  max-width:790px;
}

h2{
  font-size:clamp(38px,5vw,66px);
  line-height:.98;
  letter-spacing:-.05em;
  margin-bottom:22px;
}

h3{
  font-size:24px;
  line-height:1.05;
  letter-spacing:-.025em;
}

.lead,
.section-lead,
.section-heading p,
.privacy-copy p,
.cta-card p{
  color:var(--secondary);
  font-size:clamp(18px,2vw,23px);
}

.lead{
  max-width:760px;
  margin:30px 0 34px;
}

.hero-actions,
.cta-actions{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  min-height:54px;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  border:1px solid transparent;
}

.btn.primary{
  background:var(--accent);
  color:var(--accent-text);
}

.btn.secondary{
  border-color:var(--border);
  background:var(--deep);
  color:var(--text);
}

.btn:hover{
  transform:translateY(-1px);
}

.btn.disabled{
  cursor:default;
  opacity:.95;
}

.store-links{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.store-badge{
  display:inline-flex;
  min-width:156px;
  min-height:54px;
  padding:7px 18px 8px;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(255,255,255,.32);
  border-radius:12px;
  background:#050505;
  color:#fff;
  text-decoration:none;
  line-height:1.05;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.store-badge:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.58);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}

.store-badge-eyebrow{
  font-size:9px;
  font-weight:700;
  letter-spacing:.02em;
  opacity:.86;
}

.store-badge-name{
  margin-top:2px;
  font-size:20px;
  font-weight:700;
  letter-spacing:-.025em;
  white-space:nowrap;
}

.trust-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:26px;
}

.trust-row span,
.exercise-strip span{
  background:var(--deep);
  border:1px solid var(--border-soft);
  color:var(--secondary);
  border-radius:999px;
  padding:9px 13px;
  font-size:12px;
  font-weight:800;
}

.hero-visual,
.product-visual{
  position:relative;
  display:flex;
  justify-content:center;
}

.phone-frame{
  width:min(390px,90vw);
  padding:9px;
  background:#042D3D;
  border:1px solid var(--border);
  border-radius:42px;
  box-shadow:0 30px 90px rgba(0,0,0,.26);
  transform:none;
}

.phone-frame img{
  border-radius:34px;
  width:100%;
  height:auto;
}

.secondary-phone{
  transform:none;
  width:min(410px,90vw);
}

.visual-chip{
  position:absolute;
  padding:10px 14px;
  border-radius:12px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:0 12px 34px rgba(0,0,0,.2);
}

.chip-one{
  right:-18px;
  top:14%;
  background:var(--accent);
  color:var(--accent-text);
}

.chip-two{
  left:-30px;
  bottom:16%;
  background:var(--deep);
  border:1px solid var(--border-soft);
  color:var(--text);
}

.section{
  padding:105px 0;
  border-top:1px solid rgba(23,97,125,.75);
}

.section-heading{
  max-width:820px;
  margin-bottom:48px;
}

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.step-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:26px;
  padding:28px;
  min-height:270px;
}

.step-card.featured{
  background:var(--raised);
  border-color:rgba(252,213,53,.48);
}

.step-card p{
  color:var(--secondary);
  margin-bottom:0;
}

.step-number{
  color:var(--accent);
  font-weight:900;
  font-size:13px;
  letter-spacing:.15em;
  margin-bottom:44px;
}

.exercise-strip{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}

.split-section{
  background:linear-gradient(180deg,rgba(5,47,64,.45),rgba(5,47,64,.18));
}

.split-grid{
  display:grid;
  grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);
  gap:84px;
  align-items:center;
}

.split-copy{
  max-width:670px;
}

.feature-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:34px;
}

.feature-list article{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:21px;
}

.feature-list strong{
  display:block;
  color:var(--text);
  font-size:16px;
  margin-bottom:7px;
}

.feature-list p{
  color:var(--secondary);
  font-size:14px;
  margin:0;
}

.privacy-panel{
  background:var(--deep);
  border:1px solid var(--border);
  border-radius:34px;
  padding:44px;
}

.privacy-copy{
  max-width:780px;
  margin-bottom:34px;
}

.privacy-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.privacy-grid article{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:19px;
  padding:21px;
}

.privacy-icon{
  display:block;
  color:var(--accent);
  font-weight:900;
  font-size:11px;
  letter-spacing:.16em;
  margin-bottom:26px;
}

.privacy-grid strong{
  display:block;
  margin-bottom:7px;
}

.privacy-grid p{
  color:var(--secondary);
  font-size:13px;
  margin:0;
}

.cta-section{
  padding-bottom:54px;
}

.cta-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:30px;
  padding:42px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:36px;
  align-items:end;
}

.cta-card h2{
  font-size:clamp(34px,4.5vw,58px);
  max-width:780px;
}

.cta-card p{
  margin-bottom:0;
  max-width:760px;
}

.disclaimer-wrap{
  padding:0 0 38px;
}

.notice{
  border:1px solid var(--border);
  background:var(--deep);
  border-radius:16px;
  padding:18px 20px;
  color:var(--secondary);
  font-size:13px;
}

.footer{
  border-top:1px solid var(--border);
  padding:34px 0 46px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
}

.footer-brand{
  margin-bottom:12px;
}

.footer-links{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.small{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}


/* Legal pages */

.legal{
  max-width:860px;
  padding:68px 0 105px;
}

.legal h1{
  font-size:clamp(52px,7vw,86px);
  margin-bottom:34px;
}

.legal h2{
  font-size:clamp(24px,3vw,32px);
  line-height:1.15;
  letter-spacing:-.025em;
  margin-top:50px;
  margin-bottom:14px;
}

.legal p,
.legal li{
  color:var(--secondary);
}

.legal a{
  color:var(--text);
}

.legal ul{
  padding-left:22px;
}

.legal strong{
  color:var(--text);
}

.legal .legal-intro{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:18px;
  padding:20px 22px;
  margin-bottom:38px;
}

a:focus-visible,
.btn:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:4px;
}


/* Tablet */

@media(max-width:940px){

  .site-header{
    align-items:flex-start;
    padding-top:12px;
    padding-bottom:12px;
  }

  .site-header nav{
    justify-content:flex-end;
    row-gap:10px;
  }

  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:54px;
  }

  .hero-copy{
    max-width:800px;
  }

  .hero-visual{
    margin-top:12px;
  }

  .steps{
    grid-template-columns:1fr;
  }

  .step-card{
    min-height:0;
  }

  .step-number{
    margin-bottom:24px;
  }

  .split-grid{
    grid-template-columns:1fr;
    gap:54px;
  }

  .product-visual{
    order:2;
  }

  .privacy-grid{
    grid-template-columns:1fr 1fr;
  }

  .cta-card{
    grid-template-columns:1fr;
  }
}


/* Mobile */

@media(max-width:720px){

  .wrap{
    width:min(100% - 28px,var(--max));
  }

  .site-header{
    min-height:auto;
    padding:14px 0 18px;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:12px;
  }

  .site-header .brand{
    align-self:flex-start;
  }

  .site-header nav{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
    padding-top:12px;
    border-top:1px solid rgba(23,97,125,.75);
  }

  .site-header nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 11px;
    border:1px solid var(--border-soft);
    border-radius:999px;
    background:rgba(5,47,64,.72);
    color:var(--secondary);
    font-size:12px;
    line-height:1.1;
    white-space:nowrap;
  }

  .site-header nav a:hover{
    color:var(--accent);
    border-color:rgba(252,213,53,.45);
  }

  .site-header nav a:last-child{
    margin-left:auto;
    color:var(--accent);
    border-color:rgba(252,213,53,.45);
    background:rgba(252,213,53,.07);
    font-weight:900;
  }

  .hero{
    padding:38px 0 82px;
    gap:48px;
  }

  h1{
    font-size:clamp(52px,15vw,76px);
  }

  .hero-actions{
    align-items:flex-start;
  }

  .store-links{
    width:100%;
  }

  .store-badge{
    min-width:150px;
  }

  .visual-chip{
    display:none;
  }

  .section{
    padding:78px 0;
  }

  .feature-list{
    grid-template-columns:1fr;
  }

  .privacy-panel{
    padding:26px 20px;
  }

  .privacy-grid{
    grid-template-columns:1fr;
  }

  .cta-card{
    padding:28px 22px;
  }

  .footer{
    flex-direction:column;
  }

  .legal{
    padding-top:50px;
  }
}


/* Sehr kleine Displays */

@media(max-width:430px){

  .site-header nav{
    gap:7px;
  }

  .site-header nav a{
    font-size:11px;
    padding:7px 9px;
  }

  .site-header nav a:last-child{
    margin-left:0;
  }
}


@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *{
    transition:none!important;
  }

  .btn:hover{
    transform:none;
  }
}


/* R3 – typografische Feinarbeit */

.hero-line{
  display:block;
  white-space:nowrap;
}

.how-heading{
  max-width:none;
  white-space:nowrap;
  font-size:clamp(36px,3.9vw,54px);
}

.exercise-more{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--muted) !important;
  padding-left:4px !important;
  padding-right:4px !important;
}

@media(max-width:940px){

  .hero-line,
  .how-heading{
    white-space:normal;
  }
}


/* R4 – Layout- und Zeilenumbruch-Fixes */

.hero-copy{
  min-width:0;
}

.hero h1{
  font-size:clamp(52px,5.15vw,76px);
  max-width:720px;
}

.hero{
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.66fr);
  gap:54px;
}

.hero-visual{
  min-width:0;
}

.my-heading{
  font-size:clamp(38px,3.7vw,52px);
  line-height:1.02;
}

.my-heading span{
  display:block;
  white-space:nowrap;
}

.privacy-copy{
  max-width:980px;
}

.privacy-nowrap{
  white-space:nowrap;
}

.cta-heading{
  font-size:clamp(34px,3.15vw,46px) !important;
  line-height:1.02;
  max-width:none !important;
}

.cta-heading span{
  display:block;
  white-space:nowrap;
}

@media(max-width:940px){

  .hero h1{
    font-size:clamp(48px,10.5vw,72px);
  }

  .my-heading span,
  .privacy-nowrap,
  .cta-heading span{
    white-space:normal;
  }
}

@media(max-width:720px){

  .hero{
    grid-template-columns:1fr;
  }
}


/* R5 – CTA-Feinschliff */

.cta-actions{
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
}

.cta-actions .btn{
  white-space:nowrap;
  flex:0 0 auto;
}

.cta-card{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}

@media(max-width:940px){

  .cta-actions{
    justify-content:flex-start;
  }
}

@media(max-width:560px){

  .cta-actions{
    flex-wrap:wrap;
  }
}


/* R6 – CTA-Layout korrigiert */

.cta-card{
  grid-template-columns:1fr !important;
  align-items:start !important;
  gap:24px !important;
}

.cta-card > div:first-child{
  max-width:none !important;
}

.cta-heading{
  max-width:none !important;
}

.cta-actions{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:14px !important;
}

.cta-actions .btn{
  white-space:nowrap;
  flex:0 0 auto;
}

@media(max-width:720px){

  .cta-actions{
    justify-content:flex-start !important;
  }
}

@media(max-width:560px){

  .cta-actions{
    flex-wrap:wrap !important;
  }
}


/* R8 – Logo größer und sauberer in Header und Footer */

.brand-logo{
  width:44px;
  height:44px;
  display:block;
  object-fit:contain;
  flex:0 0 auto;
}

.brand{
  gap:14px;
}

.footer-brand .brand-logo{
  width:40px;
  height:40px;
}


/* R9 – Handy-/App-Bilder bewusst gerade statt geneigt */

.hero-visual .phone-frame,
.product-visual .phone-frame,
.secondary-phone{
  transform:none !important;
}


/* R10 – Logo-Schärfe + App-Bilder etwas größer */

.brand-logo{
  width:54px !important;
  height:54px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex:0 0 54px !important;
}

.brand-logo-svg{
  width:100%;
  height:100%;
  display:block;
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}

.footer-brand .brand-logo{
  width:48px !important;
  height:48px !important;
  flex-basis:48px !important;
}

.phone-frame{
  width:min(420px,92vw) !important;
}

.secondary-phone{
  width:min(435px,92vw) !important;
}

.hero{
  grid-template-columns:minmax(0,1.02fr) minmax(350px,.72fr) !important;
  gap:44px !important;
}

@media(max-width:940px){

  .phone-frame{
    width:min(420px,90vw) !important;
  }

  .secondary-phone{
    width:min(435px,90vw) !important;
  }
}


/* R11 – PNG-Logo-Workaround */

.brand-logo-png{
  width:54px !important;
  height:54px !important;
  object-fit:cover;
  display:block;
  border-radius:0;
  image-rendering:auto;
  background:#06384D;
}

.footer-brand .brand-logo-png{
  width:48px !important;
  height:48px !important;
}


/* R12 – finaler Mobile-Fix für Header und Hero */

@media(max-width:720px){

  .site-header{
    min-height:auto !important;
    padding:14px 0 18px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:12px !important;
  }

  .site-header .brand{
    align-self:flex-start !important;
  }

  .site-header nav{
    display:flex !important;
    width:100% !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;
    padding-top:12px !important;
    border-top:1px solid rgba(23,97,125,.75);
  }

  .site-header nav a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:7px 11px !important;
    min-height:34px !important;
    border:1px solid var(--border-soft);
    border-radius:999px;
    background:var(--deep);
    font-size:12px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  .site-header nav a:last-child{
    color:var(--accent) !important;
    border-color:rgba(252,213,53,.45) !important;
    background:rgba(252,213,53,.07) !important;
  }

  .hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:48px !important;
    padding:38px 0 82px !important;
  }

  .hero-copy{
    width:100% !important;
    max-width:none !important;
  }

  .hero h1{
    width:100% !important;
    max-width:none !important;
    font-size:clamp(48px,13vw,68px) !important;
  }

  .hero-line{
    white-space:normal !important;
  }

  .hero-visual{
    width:100% !important;
    margin-top:0 !important;
  }

  .phone-frame{
    width:min(420px,100%) !important;
  }
}

/* Store badge images */
.store-links{
  gap:12px;
}

.store-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:14px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden;
}

.store-badge:hover{
  transform:translateY(-1px);
  border-color:transparent !important;
  box-shadow:none !important;
}

.store-badge img{
  display:block;
  height:62px;
  width:auto;
  max-width:100%;
  border-radius:14px;
}

@media(max-width:720px){
  .store-links{
    width:100%;
    gap:10px;
  }

  .store-badge img{
    height:57px;
  }
}

@media(max-width:430px){
  .store-links{
    flex-direction:column;
    align-items:flex-start;
  }

  .store-badge img{
    height:54px;
  }
}


/* Store badge sizing v3: tightly cropped source images */
.store-badge img{
  height:50px !important;
  width:auto !important;
}

@media(max-width:720px){
  .store-badge img{
    height:48px !important;
  }
}

@media(max-width:430px){
  .store-badge img{
    height:46px !important;
  }
}

/* Store badge sizing v4: force visibly larger badges without flex shrinking */
.store-links{
  flex:0 0 auto;
}

.store-badge{
  flex:0 0 auto !important;
  overflow:visible !important;
}

.store-badge img{
  height:64px !important;
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
}

@media(max-width:720px){
  .store-badge img{
    height:58px !important;
  }
}

@media(max-width:430px){
  .store-badge img{
    height:54px !important;
  }
}