
/* BestTarifVergleich – responsive design layer v19 */
:root{
  --btv-max:1400px;
  --btv-gutter:clamp(12px,2.2vw,32px);
}
html{overflow-x:hidden}
body{overflow-x:hidden}
.btv-shell,.btv-main{
  width:min(var(--btv-max),calc(100% - (var(--btv-gutter) * 2)));
  margin-inline:auto;
}
.btv-main{padding-top:clamp(18px,2.5vw,32px);padding-bottom:clamp(28px,4vw,54px)}
.btv-header{position:relative;z-index:20}
.btv-header .btv-shell{min-height:78px;padding:14px 0}
.btv-brand{flex:0 0 auto}
.btv-main-nav{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.btv-main-nav::-webkit-scrollbar{display:none}
.btv-main-nav a{white-space:nowrap}

/* Make legacy page structures fluid */
#content,.contentBox,.contentBoxBig,.ContentWrapper,.MainContent,.Wrapper,
.MainContentBox,.ContentBox1,.ContentBox,.ContentBox2,.ContentBox3,
.Frame,.form-border,.comparison-wrapper{
  max-width:100%;
}
.MainContent{width:100%!important}
.ContentLeft,.ContentCenter,.ContentCenterPage,.ContentRight{min-width:0}
iframe,embed,object,video,svg{max-width:100%}
iframe{border:0}
img{max-width:100%;height:auto}

/* Tables and old calculators */
.btv-main table{
  max-width:100%;
}
.btv-main .table-responsive,
.btv-main .comparison-wrapper,
.btv-main .form-border,
.btv-main .Frame{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.btv-main table{min-width:0}
.btv-main input,.btv-main select,.btv-main textarea{
  max-width:100%;
  min-width:0;
}
.btv-main button,.btv-main input[type=submit],.btv-main input[type=button]{
  min-height:42px;
}

/* Generic modern cards */
.btv-service-grid{width:100%}
.btv-service-card,.btv-banner-card{min-width:0}
.btv-banner-slot{
  width:100%;
  overflow:hidden;
}
.btv-banner-slot img{
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:contain;
}

/* Trip.com responsive ad */
.btv-trip-banner{
  width:100%;
  margin:16px 0;
  border:1px solid var(--btv-border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 7px 22px rgba(15,23,42,.055);
  overflow:hidden;
}
.btv-trip-banner iframe{
  display:block;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:250px!important;
  border:0!important;
}
.btv-trip-banner-inner{
  width:100%;
  overflow:hidden;
}

/* Desktop */
@media (min-width:1101px){
  .btv-main-nav{justify-content:flex-end}
}

/* Tablet */
@media (max-width:1100px){
  .btv-shell,.btv-main{
    width:calc(100% - 32px);
  }
  .btv-header .btv-shell{
    flex-wrap:wrap;
    gap:12px 18px;
  }
  .btv-brand{min-width:200px}
  .btv-main-nav{
    flex:1 1 100%;
    justify-content:flex-start;
    width:100%;
  }
  .ContentLeft,.ContentCenter,.ContentCenterPage,.ContentRight{
    float:none!important;
    width:100%!important;
    padding-right:0!important;
  }
  .contentBox{
    width:calc(50% - 8px)!important;
    margin-right:12px;
  }
  .contentBox:nth-of-type(even){margin-right:0}
  .btv-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .btv-banner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Small tablet / large phone */
@media (max-width:800px){
  .btv-shell,.btv-main{width:calc(100% - 24px)}
  .btv-header .btv-shell{min-height:auto;padding:13px 0}
  .btv-brand-name{font-size:24px}
  .btv-brand-sub{font-size:12px}
  .btv-main-nav{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:5px;
    overflow-x:auto;
    padding-bottom:3px;
  }
  .btv-main-nav a{font-size:13px;padding:8px 10px}
  .contentBox{width:100%!important;margin-right:0}
  .btv-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btv-banner-grid{grid-template-columns:1fr}
  .btv-banner-card.wide{grid-column:auto}
  .btv-page-intro{padding:22px}
  .btv-trip-banner iframe{height:250px!important}
}

/* Mobile */
@media (max-width:560px){
  .btv-shell,.btv-main{width:calc(100% - 16px)}
  .btv-main{padding-top:12px}
  .btv-brand-name{font-size:21px}
  .btv-brand-sub{font-size:11px}
  .btv-main-nav a{font-size:12px;padding:7px 9px}
  .btv-service-grid{grid-template-columns:1fr}
  .btv-banner-grid{grid-template-columns:1fr}
  .btv-service-card{min-height:0;padding:16px}
  .btv-service-card .card-icon{height:48px}
  .btv-section-head h2{font-size:24px}
  .btv-page-intro h1{font-size:28px}
  .btv-banner-slot{height:150px}
  .btv-banner-card.wide .btv-banner-slot{height:150px}
  .btv-trip-banner{
    border-radius:12px;
    margin:12px 0;
  }
  .btv-trip-banner iframe{
    height:280px!important;
    width:100%!important;
  }
  .btv-main table{
    display:block;
    overflow-x:auto;
    width:100%;
    white-space:normal;
  }
  .btv-main pre,.btv-main code{
    max-width:100%;
    overflow-x:auto;
  }
}

/* Very small phones */
@media (max-width:380px){
  .btv-shell,.btv-main{width:calc(100% - 12px)}
  .btv-main-nav a{font-size:11px;padding:6px 8px}
  .btv-trip-banner iframe{height:300px!important}
}

/* External comparison widgets */
.btv-widget-card{
  width:100%;
  max-width:100%;
  margin:0 0 20px;
  padding:clamp(16px,2.2vw,26px);
  background:#fff;
  border:1px solid var(--btv-border);
  border-radius:16px;
  box-shadow:var(--btv-shadow);
  overflow:hidden;
}
.btv-widget-card h2{margin:0 0 14px;font-size:clamp(20px,2.4vw,28px);line-height:1.25}
.btv-widget-frame{width:100%;max-width:100%;overflow:hidden}
.btv-widget-frame iframe,.btv-widget-frame > div{max-width:100%!important}
@media(max-width:560px){
 .btv-widget-card{padding:14px;border-radius:13px}
 .btv-widget-card h2{font-size:20px}
}
