/* base.css
   Step 1: no global element styles.
   All base behavior is opt-in via classes.
*/

/* === HORIZONTAL OVERFLOW GUARD (prevents right-side white strip) ===
   IMPORTANT: Avoid 100vw traps; keep the document at 100% width.
*/
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;

  /* If anything still paints outside .l-page, don't show default white */
}


/* Ensure background image also covers browser safe-area/overscroll strips (iOS) */
html{
  background-color: var(--beige);
  background-image: url("/assets/images/background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

 (max-width: 820px){
  html{
    background-image: url("/assets/images/backgroundm.webp");
  }
}



/* =========================================================
   ULTRA CLEAN SCROLLBAR (desktop)
   - keeps scroll enabled
   - no wide gutter / no white bar
========================================================= */
@media (hover: hover) and (pointer: fine){
  /* Firefox */
  html{ scrollbar-width: thin; scrollbar-color: rgba(0,31,63,.18) transparent; }

  /* Chromium/WebKit */
  ::-webkit-scrollbar{ width: 6px; }
  ::-webkit-scrollbar-track{ background: transparent; }
  ::-webkit-scrollbar-thumb{
    background: rgba(0,31,63,.18);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(0,31,63,.28); }
}


/* =========================================================
   PAGE ROOT (sticky footer via flex)
========================================================= */

.l-page{
  position: relative;
  width: 100%;
  min-height:100vh;
  margin:0;

  /* Keep negative z-index layers inside this stacking context */
  isolation: isolate;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);

  /* Sticky footer: footer stays at bottom even on short pages */
  display: flex;
  flex-direction: column;

  /* Scrollbar stabilisieren (kein Layout-Shift) */
  overflow-y: auto;
  /* scrollbar-gutter removed: avoids "wide white bar" on desktop */
/* Prevent horizontal bleed that creates the white right strip */
  overflow-x: clip;

  background-color: var(--beige);
}


/* =========================================================
   PARALLAX BACKGROUND LAYER (stabil)
========================================================= */

.l-page::before{
  content:"";
  position: fixed;
  inset: 0;

  background-image: url("/assets/images/background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: -2;
  transform: translateZ(0);
}

/* =========================================================
   PREMIUM OVERLAY (subtil, edel)
========================================================= */

.l-page::after{
  content:"";
  position: fixed;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,31,63,0.18) 0%,
      rgba(0,31,63,0.10) 22%,
      rgba(243,239,230,0.10) 62%,
      rgba(243,239,230,0.16) 100%
    );

  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
}

/* Mobile: normales Scroll-Background (kein fixed) */
@media (max-width: 820px){
  .l-page::before{
    position: fixed;
    background-image: url("/assets/images/backgroundm.webp");
  }

  .l-page::after{
    position: fixed;
  }
}

/* =========================================================
   SCOPED BOX SIZING (NOT global)
========================================================= */

.l-page *,
.l-page *::before,
.l-page *::after{
  box-sizing:border-box;
}

/* =========================================================
   CONTAINER
========================================================= */

.l-container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* =========================================================
   MAIN WRAPPER (flex:1 keeps footer at bottom)
========================================================= */

.l-main{
  flex: 1;          /* key: pushes footer down on short pages */
  width: 100%;

  max-width: var(--maxw);
  margin: 40px auto;
  padding: 0 var(--pad);
}

@media (max-width: 820px){
  .l-main{
    /* center column on mobile + respect safe areas */
    margin: 28px auto;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* =========================================================
   UTILITIES (opt-in)
========================================================= */

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

.u-link{
  color: inherit;
  text-decoration: none;
}

/* Accessibility helper */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* === LIST INDENT FIX (content) ===
   Goal: no big left indent on bullet lists (especially DE index)
   Keep readable bullets without shifting content.
*/
.l-main section ul,
.l-main section ol{
  margin-left: 0;
  padding-left: 0;
  list-style-position: inside;
}
.l-main section li{
  margin-left: 0;
}


/* === LIST INDENT FIX (content) ===
   Use custom bullets to avoid large browser default left indents.
   Keeps list aligned with body text (no big left offset).
*/
.l-main section ul,
.l-main section ol{
  margin: 0.8em 0;
  padding: 0;
  list-style: none;
}

.l-main section li{
  position: relative;
  margin: 0.35em 0;
  padding-left: 1.05em; /* small, consistent indent for marker */
}

.l-main section li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.2;
}