/*
 * LeniCare Seitenstandard 6.0
 * Die äußere App-Hülle entspricht exakt der funktionierenden
 * tagescheck-verlauf.php: variable Höhe bis maximal 844 px,
 * auf Desktop im verfügbaren Browserbereich zentriert.
 */
:root{
  --lenicare-nav-height:78px;
  --lenicare-status-height:48px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{
  min-height:100dvh;
  background:#dceafa;
}

/* Exakt das Größenverhalten der Verlaufsseite. */
.app-shell.page-background{
  position:relative;
  width:100%;
  max-width:430px;
  height:min(844px,calc(100dvh - 20px));
  min-height:0 !important;
  padding:0 0 82px !important;
  overflow:hidden;
  background:
    url('assets/startseite-neuer-hintergrund.png') center top/100% 100% no-repeat,
    linear-gradient(180deg,#dcecfb 0%,#f8fbff 33%,#f8fbff 100%);
}

.lenicare-standard-page{
  display:flex;
  flex-direction:column;
}

.lenicare-standard-page > .statusbar{
  flex:0 0 48px;
  height:48px;
  min-height:48px;
}

/* Optionaler Standardkopf wie im Verlauf. */
.lenicare-page-header{
  flex:0 0 60px;
  height:60px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  align-items:center;
  margin:0 16px 4px;
}
.lenicare-page-header h1{
  margin:0;
  text-align:center;
  color:#12377a;
  font-size:22px;
  line-height:1.1;
}
.lenicare-header-button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(130,172,226,.38);
  border-radius:50%;
  color:#155db7;
  background:linear-gradient(145deg,#fff,#edf6ff);
  box-shadow:0 7px 15px rgba(46,93,153,.14);
  text-decoration:none;
}
.lenicare-header-button svg{width:24px;height:24px}

.lenicare-page-intro{
  flex:0 0 auto;
  text-align:center;
  padding:0 18px 8px;
}
.lenicare-page-intro h2{margin:0;color:#173b78;font-size:16px}
.lenicare-page-intro p{margin:4px 0 0;color:#7082a2;font-size:10px}

.lenicare-logo-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px 8px;
}
.lenicare-logo-header img{
  display:block;
  width:205px;
  max-height:118px;
  object-fit:contain;
}

/* Einziger flexibler Bereich. Er erhält exakt den verbleibenden Platz. */
.page-scroll{
  flex:1 1 0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  scrollbar-width:none;
}
.page-scroll::-webkit-scrollbar{display:none;width:0;height:0}

/* Die zentrale Navigation bleibt innerhalb des Handyrahmens unten. */
.lenicare-standard-page > .home-nav,
.lenicare-standard-page > .lenicare-bottom-nav{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  transform:none !important;
  z-index:20;
}

@media(max-width:430px){
  body{
    display:block;
    padding:0 !important;
    overflow:hidden;
  }
  .app-shell.page-background{
    width:100%;
    max-width:none;
    height:100svh;
    min-height:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}

@media(min-width:431px){
  body{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px !important;
    overflow:hidden;
  }
  .app-shell.page-background{
    border:10px solid #111;
    border-radius:44px;
    box-shadow:0 30px 90px rgba(4,55,125,.25);
  }
}