/* ============================================================
   ROOT VARIABLEN
   ============================================================ */
:root{
  --header-h: 70px;
  --nav-h: 40px;
  --gap-bridge: 20px;

  /* Hintergrund-Fallback-Farben */
  --ech-bg-light-color: rgb(242,242,242);
  --ech-bg-dark-color:  rgb(60,60,60);

  /* OPTIONALE Hintergrundbilder
     → none = nur Farbe sichtbar */
  --ech-bg-light-img: url("https://data.ech.group/images/background/lightbg.png");
  --ech-bg-dark-img:  url("https://data.ech.group/images/background/darkbg.png");
}

@media (max-width: 999px){
  :root{ --nav-h: 48px; }
}

/* ============================================================
   RESET / BASIS
   ============================================================ */
*, *::before, *::after{
  box-sizing: border-box;
}

html, body{
  margin: 0px;
  padding: 0px;
}

/* ============================================================
   BODY – Fallback-Hintergrund + Typo
   ============================================================ */
body{
  padding-top: calc(var(--header-h) + var(--nav-h));
  padding-bottom: 60px;

  background: var(--ech-bg-light-color);
  color: rgb(20,30,60);

  font-family:Poppins, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

@media (prefers-color-scheme: dark){
  body{
    background: var(--ech-bg-dark-color);
    color: rgb(242,242,242);
  }
}

/* ============================================================
   HINTERGRUND-LAYER (optional Bild + Farb-Fallback)
   ============================================================ */
.ech-bg-layer{
  min-height: 100vh;

  background-color: var(--ech-bg-light-color);
  background-image: var(--ech-bg-light-img);

  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark){
  .ech-bg-layer{
    background-color: var(--ech-bg-dark-color);
    background-image: var(--ech-bg-dark-img);
  }
}

/* ============================================================
   MAIN / CONTENT
   ============================================================ */
.ech-main{
  padding: 0px;
}

/* Fullwidth-Elemente (Border / Kacheln etc.) */
.ech-border{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: clip;
}

/* Desktop Content Padding */
.ech-content{
  padding: 70px 100px 100px 100px;
}

@media (max-width: 999px){
  .ech-content{
    padding: 70px 10px 100px 10px;
  }
}

/* ============================================================
   CONTAINER
   ============================================================ */
.ech-container{
  margin-left: auto;
  margin-right: auto;

  padding-left: 20px;
  padding-right: 20px;

  max-width: 1280px;
}

@media (max-width: 1200px){ .ech-container{ max-width: 1000px; } }
@media (max-width: 1000px){ .ech-container{ max-width: 760px;  } }
@media (max-width: 768px) { .ech-container{ max-width: 640px;  } }
@media (max-width: 576px) { .ech-container{ max-width: 100%;   } }

/* ============================================================
   MEDIA / TABLES
   ============================================================ */
.ech-content img,
.ech-content video,
.ech-content iframe{
  max-width: 100%;
  height: auto;
  display: block;
}

.ech-content table{
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  white-space: nowrap;
}