/* =========================================================
   FONT
   ========================================================= */
@font-face{
  font-family:"Noto Sans";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://tanzschule-breuer-koeln.de/style/fonts/NotoSans-Regular-1.woff2") format("woff2");
}

/* =========================================================
   GLOBAL RESET
   ========================================================= */
html, body{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-weight:400 !important;
}

/* =========================================================
   APP ROOT
   ========================================================= */
#app{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  padding:0 !important;
  overflow-x:hidden !important;
  font-weight:400 !important;
}

/* =========================================================
   ALLE KINDER DÜRFEN NICHT BREITER ALS VIEWPORT SEIN
   ========================================================= */
#app,
#app *{
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
#app nav{
  max-width:100% !important;
  width:100% !important;
}

/* =========================================================
   TABELLEN / BREITE KOMPONENTEN
   ========================================================= */
main{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

.el-table,
.el-table__body-wrapper,
.el-table__inner-wrapper{
  max-width:100% !important;
}

.el-table__body-wrapper{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

/* =========================================================
   SCHMALE HANDYS
   ========================================================= */
@media (max-width: 480px){
  #app{
    padding:12px !important;
  }

  #app nav{
    width:100% !important;
    max-width:100% !important;
  }
}

/* =========================================================
   SICHERSTELLUNG: KEIN HORIZONTALER SCROLL
   ========================================================= */
html{
  overflow-x:hidden !important;
}


/* === FIX: Swiper verursacht Überbreite auf Mobile === */

/* Container darf nicht größer als Viewport sein */
.swiper-container,
.swiper-container.main {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Wrapper darf keine fixe Gesamtbreite erzwingen */
.swiper-wrapper {
  max-width: 100% !important;
}

/* Slides dürfen schrumpfen */
.swiper-slide {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Text MUSS umbrechen dürfen */
.swiper-slide * {
  white-space: normal !important;
  word-break: break-word !important;
}