@import url("bootstrap/css/bootstrap.min.css");

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

/* Header flyter ovanpå */
.header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: transparent;
}

/* Gör header-innehållet snyggt (ta bort float-stök) */
.headercontainer{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Hero-bilden = första bilden i content */
.content > div:first-child img,
.content > p:first-child img,
.fullwidth-img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Viktigt: hero-bilden ska vara fullbredd även om content är centrerad */
.content{
  max-width: 1100px;        /* centrerar texten */
  margin: 0 auto;
  padding: 40px 20px;
}

/* Men hero ska bryta sig ut fullbredd */
.content > div:first-child,
.content > p:first-child{
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Ta bort padding ovanför så heron ligger dikt an toppen */
.content{
  padding-top: 0;
}